Fix missing in layer selection using part of WazeWrap

[davidakachaos]

This fixes the shortcut not working for us. There is a lot of code involved for adding the shortcut in a good way, so I propose using WazeWrap for add the shortcut.
Also for #59 this uses WazeWrap to add the layer to the layer selector, and toggles with the shortcut.

[berestovskyy]

It's an external dependency, so two questions:

1. Will it work as a Chrome extension?
2. What happens when WazeWrap crashes or GreasyFork is down?

IMO we better fix the functionality on our own or using an example with a compatible open license.

[davidakachaos]

1. I don't know, I haven't build this as a Chrome extension. How do I do that?
2. A lot of other scripts won't work then either.

I believe @justins83 created this library to avoid code duplication across scripts, so we could duplicate his code or use the library to avoid duplication.

[justins83]

Indeed. Greasyfork is rarely down so in the (just shy of) 2 years that it has been in use there has never been a problem. I am actually going to be changing WazeWrap to be an installable script rather than work as a dependency, however. The reason for this is due to how tampermonkey uses dependencies - every script that uses it pulls down its own copy, but they all overwrite the same variable on `window`, so the last one to load always "wins", but they still exhibit some behavior of operating on different versions. With some of the changes that I have planned for WW it starts becoming difficult to update due to some scripts targeting specific versions of WW through the `?version=` URL parameter, and because of how Tampermonkey checks for dependency updates they can be out of date for a week after updating before the script pulls the latest version.

…

On Mon, Nov 5, 2018 at 8:40 AM David Westerink ***@***.***> wrote: 1. I don't know, I haven't build this as a Chrome extension. How do I do that? 2. A lot of other scripts won't work then either. I believe @justins83 <https://github.com/justins83> created this library to avoid code duplication across scripts, so we could duplicate his code or use the library to avoid duplication. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#85 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATTy2rtseBf5yq1vC2Rfffk9_iUhkNgiks5usD-9gaJpZM4YOTwv> .

-- JustinS83 USA Local Champ

[berestovskyy]

1. The script to build a chrome extension is in the release repo. Please also have a look here on how to load an unpacked extension:
   https://developer.chrome.com/extensions/getstarted

2. Sure, but Validator does not have any dependencies, so it will work ;)
   Do you know if those @required scripts get cached by the Tampermonkey?

Sure, code duplication must be avoided. If WazeWrap is on GitHub, we can try to use it as a subrepo. This might duplicate the code in the browser, but there will be no external dependency and will be just one source repo.

What do you think?

[justins83]

WazeWrap writes everything to an object on window and should not be compiled directly into any script as that would then lock all other scripts that use it to the version that is compiled into one specific script, if it is the last one to load.

[berestovskyy]

So basically, there will be no other way to use WazeWrap, unless we ask users to install it prior to the Validator?

[justins83]

Yes. There have been too many issues with some script specifying versions or tampermonkey not pulling the latest dependency because it only forces that when the script gets a version number bump, which then requires bumping the version on a dozen scripts just so they use the latest version of the dependency. As of right now there are over 40 scripts (that I know of) that are using WazeWrap, so chances are it will be installed.

…

On Mon, Nov 5, 2018 at 10:24 AM Andriy Berestovskyy < ***@***.***> wrote: So basically, there will be no other way to use WazeWrap, unless we ask users to install it prior to the Validator? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#85 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATTy2ok07Sk4QSurUpa9jKnP2BjNple6ks5usFg7gaJpZM4YOTwv> .

-- JustinS83 USA Local Champ

[berestovskyy]

What's the license for the WazeWrap? Are we allowed to reuse some fragments in Validator?

[davidakachaos]

If the license for WazeWrap allows it, copying the code over to the lib of Validator isn't a problem.
That would also negate the issue for the extention I think?

[berestovskyy]

@justins83 so, can we use a part of WazeWrap in Validator?

@BellHouse maybe you can contribute a piece of code to add a layer in WME? Whatever you have, we will adapt it to our needs...

[justins83]

Sorry guys, work kicked my butt this week.

WazeWrap currently doesn't have a license, which technically means myself and MoM are the only ones allowed to use it. I'll have to find a license for it.

You are welcome to use the add layer checkbox method - it works very well and handles changing to/from MTE mode and changing imperial/metric.

`
this.AddLayerCheckbox = function(group, checkboxText, checked, callback){
group = group.toLowerCase();
var normalizedText = checkboxText.toLowerCase().replace(/\s/g, '');
var checkboxID = "layer-switcher-item" + normalizedText;
var groupPrefix = 'layer-switcher-group_';
var groupClass = groupPrefix + group.toLowerCase();
sessionStorage[normalizedText] = checked;

        var CreateParentGroup = function(groupChecked){
            var groupList = $('.layer-switcher').find('.list-unstyled.togglers');
            var checkboxText = group.charAt(0).toUpperCase() + group.substr(1);
            var newLI = $('<li class="group">');
            newLI.html([
                '<div class="controls-container toggler">',
                '<input class="' + groupClass + '" id="' + groupClass + '" type="checkbox" ' + (groupChecked ? 'checked' : '') +'>',
                '<label for="' + groupClass + '">',
                '<span class="label-text">'+ checkboxText + '</span>',
                '</label></div>',
                '<ul class="children"></ul>'
            ].join(' '));

            groupList.append(newLI);
            $('#' + groupClass).change(function(){sessionStorage[groupClass] = this.checked;});
        };

        if(group !== "issues" && group !== "places" && group !== "road" && group !== "display") //"non-standard" group, check its existence
            if($('.'+groupClass).length === 0){ //Group doesn't exist yet, create it
                var isParentChecked = (typeof sessionStorage[groupClass] == "undefined" ? true : sessionStorage[groupClass]=='true');
                CreateParentGroup(isParentChecked);  //create the group
                sessionStorage[groupClass] = isParentChecked;

                W.app.modeController.model.bind('change:mode', function(model, modeId, context){ //make it reappear after changing modes
                    CreateParentGroup((sessionStorage[groupClass]=='true'));
                });
            }

        var buildLayerItem = function(isChecked){
            var groupChildren = $("."+groupClass).parent().parent().find('.children').not('.extended');
            let $li = $('<li>');
            $li.html([
                '<div class="controls-container toggler">',
                '<input type="checkbox" id="' + checkboxID + '"  class="' + checkboxID + ' toggle">',
                '<label for="' + checkboxID + '"><span class="label-text">' + checkboxText + '</span></label>',
                '</div>',
            ].join(' '));

            groupChildren.append($li);
            $('#' + checkboxID).prop('checked', isChecked);
            $('#' + checkboxID).change(function(){callback(this.checked); sessionStorage[normalizedText] = this.checked;});
            if(!$('#' + groupClass).is(':checked')){
                $('#' + checkboxID).prop('disabled', true);
                callback(false);
            }

            $('#' + groupClass).change(function(){$('#' + checkboxID).prop('disabled', !this.checked); callback(!this.checked ? false : sessionStorage[normalizedText]=='true');});
        };


        W.app.modeController.model.bind('change:mode', function(model, modeId, context){
            buildLayerItem((sessionStorage[normalizedText]=='true'));
        });

        buildLayerItem(checked);
    };

`

[davidakachaos]

The AddLayerCheckbox function is one I can add without issues, but the Shortcut class is a es6 thing and more difficult to add. I'll look into this, but if you have any ideas to convert....

[berestovskyy]

Sorry, I am not quite sure I understand you. There is no shortcut class in the code posted by Justin, do you refer WazeWrap?

Overall, if the shortcut is an issue, let's just have the layer for now?

[davidakachaos]

Okay, I've updated the PR so it now only fixes the layer that is missing from the layer selector.
The Shortcut class in WazeWrap works like a charm when we use the ES6 javascript, but in Validator we use ES5 (because of closure-compiler) so I can't use that class. We'll have to take another look at fixing the shortcut. For now this adds back the layer.

[berestovskyy]

@davidakachaos the WazeWrap has no license, so it's not open-source as defined by Wikipedia. Please ask Justin explicitly if we need something besides the code snippet posted here.

Closure Compiler supports ES6. Try to change the line --language_in ECMASCRIPT5 to --language_in ECMASCRIPT6 in 99.buid.sh file.