Plugin Draw Resonators: Add dialog for changing the zoom level which resonators start to display.

plugins/draw-resonators.user.js

@@ -322,6 +322,8 @@ window.plugin.drawResonators.Styler.prototype.defaultConnectorStyle = function(r
 
 //////// Options for storing and loading options ////////
 
+
+
 window.plugin.drawResonators.Options = function() {
   this._options = {};
   this._callbacks = {};
@@ -335,7 +337,7 @@ window.plugin.drawResonators.Options.prototype.addCallback = function(name, call
 }
 
 window.plugin.drawResonators.Options.prototype.newOption = function(name, defaultValue) {
-  this._options[name] = this.loadLocal(this.getStorageKey, defaultValue)
+  this._options[name] = this.loadLocal(this.getStorageKey(name), defaultValue)
 }
 
 window.plugin.drawResonators.Options.prototype.getOption = function(name) {
@@ -347,7 +349,7 @@ window.plugin.drawResonators.Options.prototype.changeOption = function(name, val
   if(value === this._options[name]) return false;
 
   this._options[name] = value;
-  this.storeLocal(name, this._options[name]);
+  this.storeLocal(this.getStorageKey(name), this._options[name]);
 
   if (this._callbacks[name] !== null) {
     for(var i in this._callbacks[name]) {
@@ -379,23 +381,128 @@ window.plugin.drawResonators.Options.prototype.storeLocal = function(key, value)
 
 
 
+//////// Dialog
+
+window.plugin.drawResonators.Dialog = function() {
+  this._dialogEntries = {};
+}
+
+window.plugin.drawResonators.Dialog.prototype.addLink = function() {
+  $('#toolbox').append('<a id="draw-reso-show-dialog" onclick="window.plugin.drawResonators.dialog.show();">Resonators</a> ');
+}
+
+window.plugin.drawResonators.Dialog.prototype.addEntry = function(dialogEntry) {
+  this._dialogEntries[dialogEntry.name] = dialogEntry;
+}
+
+
+window.plugin.drawResonators.Dialog.prototype.show = function() {
+  window.dialog({html: this.getDialogHTML(), title: 'Resonators', modal: true, id: 'draw-reso-setting'});
+
+  // Attach entries event
+  for(var name in this._dialogEntries) {
+    var events = this._dialogEntries[name].getOnEvents();
+    for(var i in events) {
+      var event = events[i];
+      $('#draw-reso-dialog').on(event.event, '#' + event.id, event.callback);
+    }
+  }
+}
+
+window.plugin.drawResonators.Dialog.prototype.getDialogHTML = function() {
+  var html = '<div id="draw-reso-dialog">'
+  for(var name in this._dialogEntries) {
+    html += this._dialogEntries[name].getHTML();
+  }
+  html += '</div>';
+  return html;
+}
+
+
+
+//////// ListDialogEntry
+
+
+
+window.plugin.drawResonators.ListDialogEntry = function(options) {
+  this._name = options['name'];
+  this._label = options['label'];
+  this._valueFunc = options['valueFunc'];
+  this._valuesList = options['valuesList'];
+  this._valuesListFunc = options['valuesListFunc'];
+  this._onChangeCallback = options['onChangeCallback'];
+}
+
+window.plugin.drawResonators.ListDialogEntry.prototype.getHTML = function() {
+  var curValue = this._valueFunc();
+  var valuesList = this._valuesList ? this._valuesList : this._valuesListFunc();
+  var html = '<label for="' + this.getSelectId() + '">'
+           + this._label + ': '
+           + '</label>'
+           + '<select id="' + this.getSelectId() + '">';
+
+  for(var label in valuesList) {
+    var selected = valuesList[label] === curValue;
+    html += '<option value="' + valuesList[label] + '" '
+          + (selected ? 'selected="selected"' : '')
+          +'>'
+          + label
+          + '</option>';
+  }
+
+  html += '</select>';
+  return html;
+}
+
+window.plugin.drawResonators.ListDialogEntry.prototype.getOnEvents = function() {
+  return [{'event': 'change',
+           'id': this.getSelectId(),
+           'callback': this._onChangeCallback
+  }];
+}
+
+window.plugin.drawResonators.ListDialogEntry.prototype.getSelectId = function() {
+  return 'draw-reso-option-' + this._name;
+}
+
+
+
 
 var setup =  function() {
-  window.plugin.drawResonators.options = new window.plugin.drawResonators.Options();
+  var thisPlugin = window.plugin.drawResonators;
-  window.plugin.drawResonators.options.newOption('enableZoomLevel', 17);
-  window.plugin.drawResonators.options.newOption('useStyler', 'default');
 
+  // Initialize options
+  thisPlugin.options = new thisPlugin.Options();
+  thisPlugin.options.newOption('enableZoomLevel', 17);
+  thisPlugin.options.newOption('useStyler', 'default');
+
+  // Initialize render
   var renderOptions = {
-    'enableZoomLevel': window.plugin.drawResonators.options.getOption('enableZoomLevel'),
+    'enableZoomLevel': thisPlugin.options.getOption('enableZoomLevel'),
-    'useStyler': window.plugin.drawResonators.options.getOption('useStyler')};
+    'useStyler': thisPlugin.options.getOption('useStyler')};
 
-  window.plugin.drawResonators.render = new window.plugin.drawResonators.Render(renderOptions);
+  thisPlugin.render = new thisPlugin.Render(renderOptions);
-  window.plugin.drawResonators.render.registerHook();
+  thisPlugin.render.registerHook();
-  window.addLayerGroup('Resonators', window.plugin.drawResonators.render.resonatorLayerGroup, true);
+  window.addLayerGroup('Resonators', thisPlugin.render.resonatorLayerGroup, true);
 
-  window.plugin.drawResonators.options.addCallback('enableZoomLevel', window.plugin.drawResonators.render.handleEnableZoomLevelChange);
+  thisPlugin.options.addCallback('enableZoomLevel', thisPlugin.render.handleEnableZoomLevelChange);
 
-  // TODO: add options dialog to change options
+  // Initialize dialog
+  thisPlugin.dialog = new thisPlugin.Dialog();
+
+  var enableZoomLevelDialogEntryOptions = {
+    name: 'enable-zoom-level',
+    label: 'Enable zoom level',
+    valueFunc: function() {return thisPlugin.options.getOption('enableZoomLevel')},
+    valuesList: {'15':15, '16':16, '17':17, '18':18, '19':19, '20':20, 'none':99},
+    onChangeCallback: function(event) {thisPlugin.options.changeOption('enableZoomLevel', parseInt(event.target.value));}
+  };
+  var enableZoomLevelDialogEntry = new thisPlugin.ListDialogEntry(enableZoomLevelDialogEntryOptions);
+  thisPlugin.dialog.addEntry(enableZoomLevelDialogEntry);
+
+  thisPlugin.dialog.addLink();
+
+  // TODO: Add dialog entry for styler
 }
 
 // PLUGIN END //////////////////////////////////////////////////////////