midas 0.1.0

data/public/javascripts/midas/native_extensions.js

@@ -0,0 +1,43 @@
+NodeList.prototype.equals = function(that) {
+  var length = this.length;
+  if (length != that.length) return false;
+
+  var thisItem, thatItem;
+  length = length - 1;
+  for (var i = 0; i <= length; ++i) {
+    thisItem = this[i];
+    thatItem = that.item(i);
+
+    if (thisItem.nodeType != thatItem.nodeType || thisItem.nodeName != thatItem.nodeName) return false;
+  }
+
+  for (var i = 0; i <= length; ++i) {
+    thisItem = this.item(i);
+    thatItem = that.item(i);
+
+    if (thisItem.nodeType == 3) {
+      if (thisItem.innerText != thatItem.innerText) return false;
+    } else if (thisItem.innerHTML && thatItem.innerHTML) {
+      if (thisItem.innerHTML != thatItem.innerHTML) return false;
+    }
+  }
+  
+  return true;
+};
+
+Number.prototype.toHex = function() {
+  var result = this.toString(16).toUpperCase();
+  return result[1] ? result : "0" + result;
+};
+
+String.prototype.toHex = function() {
+  return this.replace(/rgb\((\d+)[\s|\,]?\s(\d+)[\s|\,]?\s(\d+)\)/gi,
+    function (a, b, c, d) {
+      return "#" + parseInt(b).toHex() + parseInt(c).toHex() + parseInt(d).toHex();
+    }
+  )
+};
+
+window.isTop = function() {
+  return (this == top);
+};

data/public/javascripts/midas/palette.js

@@ -0,0 +1,108 @@
+if (!Midas) var Midas = {};
+Midas.Palette = Class.create({
+  version: 0.2,
+  button: null,
+  element: null,
+  setupFunction: null,
+  options: {
+    url: null,
+    configuration: null
+  },
+
+  initialize: function(button, name, toolbar, options) {
+    if (!Midas.version) throw('Midas.Region requires Midas');
+
+    this.button = button;
+    this.name = name;
+    this.toolbar = toolbar;
+    
+    this.options = Object.extend(Object.clone(this.options), options);
+    this.options['configuration'] = this.options['configuration'] || Midas.Config;
+    this.config = this.options['configuration'];
+
+    this.build();
+    this.setupObservers();
+  },
+
+  build: function() {
+    this.element = new Element('div', {'class': 'midas-palette', style: 'display:none;'});
+    this.toolbar.element.appendChild(this.element);
+  },
+
+  setupObservers: function() {
+    Event.observe(window, 'resize', this.position.bind(this));
+    Event.observe(this.element, 'mousedown', function(event) {
+      event.stop();
+    });
+    Event.observe(this.button, 'click', function() {
+      if (!this.element) return;
+      if (this.visible()) this.hide();
+      else this.show();
+    }.bind(this));
+  },
+
+  show: function() {
+    if (!this.loaded) {
+      this.load(this.show.bind(this));
+      return;
+    }
+
+    this.position();
+    this.element.show();
+  },
+
+  hide: function() {
+    this.element.hide();
+  },
+
+  position: function() {
+    if (!this.element) return;
+    
+    var keepVisible = this.visible();
+    this.element.setStyle({top: 0, left: 0, display: 'block', visibility: 'hidden'});
+    var position = this.button.cumulativeOffset();
+    var dimensions = this.element.getDimensions();
+    if (position.left + dimensions.width > document.viewport.getWidth()) {
+      position.left = position.left - dimensions.width + this.button.getWidth();
+    }
+    
+    this.element.setStyle({
+      top: (position.top + this.button.getHeight()) + 'px',
+      left: position.left + 'px',
+      display: keepVisible ? 'block' : 'none',
+      visibility: 'visible'
+    });
+  },
+
+  visible: function() {
+    return (!this.element || this.element.getStyle('display') == 'block');
+  },
+
+  load: function(callback) {
+    new Ajax.Request(this.options.url, {
+      method: 'get',
+      onSuccess: function(transport) {
+        this.loaded = true;
+        this.element.innerHTML = transport.responseText;
+        transport.responseText.evalScripts();
+
+        this.setupFunction = window['setup_' + this.name];
+        if (this.setupFunction) this.setupFunction.call(this);
+
+        if (callback) callback();
+      }.bind(this),
+      onFailure: function() {
+        alert('unable to get the palette contents');
+      }
+    });
+  },
+
+  execute: function(action, options, event) {
+    Midas.fire('button', {action: this.name, event: event, toolbar: this.toolbar, options: options});
+  },
+
+  destroy: function() {
+    if (this.element) this.element.remove();
+    this.element = null;
+  }
+});

data/public/javascripts/midas/region.js

@@ -0,0 +1,194 @@
+if (!Midas) var Midas = {};
+Midas.Region = Class.create({
+  version: 0.2,
+  name: null,
+  options: {
+    configuration: null,
+    contentWindow: window,
+    inline: false
+  },
+
+  initialize: function(element, options, name) {
+    if (!Midas.version) throw('Midas.Region requires Midas');
+    if (!Midas.agentIsCapable()) throw('Midas.Region requires a browser that has contentEditable features');
+
+    this.element = $(element);
+    if (!this.element) throw('Unable to locate the element "' + element + '"');
+    this.sibling = this.element.previousSibling;
+
+    this.options = Object.extend(Object.clone(this.options), options);
+    this.options['configuration'] = this.options['configuration'] || Midas.Config;
+    this.config = this.options['configuration'];
+    this.name = this.element.getAttribute('id') || name;
+    this.doc = this.options['contentWindow'].document;
+    this.selections = [];
+
+    this.makeEditable();
+    this.setupObservers();
+  },
+
+  makeEditable: function() {
+    this.element.addClassName('midas-region');
+
+    if (this.element.innerHTML.replace(/^\s+|\s+$/g, "") == '' && Prototype.Browser.Gecko) {
+      this.setContents(' ')
+    }
+    
+    if (this.options['inline']) {
+      this.element.setStyle({height: 'auto', minHeight: '20px'});
+    } else {
+      this.element.setStyle({overflow: 'auto'});
+      this.element.setStyle({maxWidth: this.element.getWidth() + 'px'});
+    }
+    this.element.contentEditable = true;
+
+    this.doc.execCommand('styleWithCSS', false, false);
+    //this.doc.execCommand('enableInlineTableEditing', false, false);
+  },
+
+  setupObservers: function() {
+    this.element.observe('focus', function(event) {
+      Midas.fire('region', {region: this, name: this.name, event: event});
+      if (this.getContents() == ' ' && Prototype.Browser.Gecko) this.setContents(' ');
+    }.bind(this));
+
+    this.element.observe('click', function(event) {
+      Midas.fire('region', {region: this, name: this.name, event: event});
+      if (this.getContents() == ' ' && Prototype.Browser.Gecko) this.setContents(' ');
+    }.bind(this));
+    this.element.observe('mouseup', function(event) {
+      Midas.fire('region:update', {region: this, name: this.name, event: event});
+    }.bind(this));
+
+    this.element.observe('keyup', function(event) {
+      Midas.fire('region:update', {region: this, name: this.name, event: event, changed: true});
+    }.bind(this));
+    this.element.observe('keypress', function(event) {
+      Midas.fire('region:update', {region: this, name: this.name, event: event});
+
+      switch(event.keyCode) {
+        case 9: // tab
+          this.selections.each(function(selection) {
+            var container = selection.commonAncestorContainer;
+            if (container.nodeType == 3) container = container.parentNode;
+            if (container.tagName == 'LI' || container.up('li')) {
+              event.stop();
+              this.handleAction('indent');
+            }
+          }.bind(this));
+          break;
+        case 13: // enter
+          break;
+      }
+
+    }.bind(this));
+
+    // selection tracking
+    this.element.observe('keyup', function() {
+      this.updateSelections();
+    }.bind(this));
+    this.element.observe('mousedown', function() {
+      this.selecting = true;
+    }.bind(this));
+    Event.observe(document, 'mouseup', function() {
+      if (!this.selecting) return;
+      this.selecting = false;
+      this.updateSelections();
+    }.bind(this));
+  },
+
+  setContents: function(content) {
+    this.element.innerHTML = content;
+  },
+
+  getContents: function() {
+    return this.element.innerHTML.replace(/^\s+|\s+$/g, "");
+  },
+
+  updateSelections: function() {
+    var selection = window.getSelection();
+    this.selections = [];
+
+    for (var i = 0; i <= selection.rangeCount - 1; ++i) {
+      var range = selection.getRangeAt(i);
+
+      if (range.commonAncestorContainer == this.element ||
+          Element.descendantOf(range.commonAncestorContainer, this.element)) {
+        this.selections.push(range);
+      }
+    }
+  },
+
+  execCommand: function(action, argument) {
+    argument = typeof(argument) == 'undefined' ? null : argument;
+
+    var supported = this.doc.execCommand('styleWithCSS', false, false);
+    var handled;
+    try {
+      handled = this.doc.execCommand(action, false, argument);
+    } catch(e) {
+      Midas.trace(e);
+
+      // Gecko does some interesting things when it fails on indent
+      if (action == 'indent') {
+        var sibling = this.element.previousSibling;
+        if (sibling != this.sibling) sibling.remove();
+      }
+      handled = true;
+    }
+    if (!handled && supported) throw('Unknown action "' + action + '"');
+  },
+
+  serialize: function() {
+    return {name: this.name, content: this.getContents()}
+  },
+
+  destroy: function() {
+    this.element.contentEditable = 'false';
+    this.element.blur();
+    this.element.removeClassName('midas-region');
+  },
+
+  handleAction: function(action, event, toolbar, options) {
+    options = options || {};
+    
+    if (this.config['behaviors'][action]) {
+      var behaviors = this.config['behaviors'][action];
+
+      for (var behavior in behaviors) {
+        if (Object.isFunction(this.handle[behavior])) {
+          this.handle[behavior].apply(this, Object.isArray(behaviors[behavior]) ? behaviors[behavior] : [behaviors[behavior]]);
+
+          var sel = window.getSelection();
+          this.selections.each(function(selection) {
+            sel.removeRange(selection);
+            sel.addRange(selection);
+          })
+        } else {
+          throw('Unknown behavior method "' + behavior + '"');
+        }
+      }
+    } else {
+      switch (action) {
+        case 'removeformatting':
+          this.handle['insertHTML'].call(this, function() {
+            return (this.selections[0]) ? this.selections[0].cloneContents().textContent : '';
+          });
+          break;
+        default: this.execCommand(action, options['value']);
+      }
+    }
+  },
+
+  handle: {
+
+    insertHTML: function(callback) {
+      this.execCommand('insertHTML', callback.call(this))
+    },
+
+    execCommand: function(action, argument) {
+      this.execCommand(action, argument);
+    }
+
+  }
+});

data/public/javascripts/midas/statusbar.js

@@ -0,0 +1,84 @@
+if (!Midas) var Midas = {};
+Midas.Statusbar = Class.create({
+  version: 0.2,
+  options: {
+    appendTo: null,
+    configuration: null,
+    contentWindow: window,
+    panels: ['Path']
+  },
+
+  initialize: function(options) {
+    if (!Midas.version) throw('Midas.Statusbar requires Midas');
+
+    this.options = Object.extend(Object.clone(this.options), options);
+    this.options['configuration'] = this.options['configuration'] || Midas.Config;
+    this.config = this.options['configuration'];
+
+    this.build();
+  },
+
+  build: function() {
+    this.element = new Element('div', {'class': 'midas-statusbar'});
+
+    this.options.panels.each(function(method) {
+      this.element.innerHTML += this['insert' + method].call(this);
+    }.bind(this));
+
+    ($(this.options['appendTo']) || document.body).appendChild(this.element);
+  },
+
+  update: function(region, event) {
+    setTimeout(function() {
+      this.element.innerHTML = '';
+      this.options.panels.each(function(method) {
+        this['insert' + method].call(this, region, event);
+      }.bind(this));
+    }.bind(this), 1);
+  },
+
+  getHeight: function() {
+    return ($(this.options['appendTo']) || this.element).getHeight();
+  },
+  
+  destroy: function() {
+    this.element.remove();
+  },
+
+  insertPath: function(region, event) {
+    if (!event) return '<span><strong>Path:</strong></span>';
+    
+    var selection = this.options['contentWindow'].getSelection();
+    if (!selection.rangeCount) return;
+    var range = selection.getRangeAt(0);
+
+    var path = '';
+    var node = range.commonAncestorContainer;
+    node = node.nodeType == 3 ? Element.up(node) : node;
+    this.path = [];
+
+    if (node != region.element && Element.descendantOf(node, region.element)) {
+      this.path = Element.ancestors(node);
+
+      var length = this.path.length - 1;
+      for (var i = 0; i <= length; ++i) {
+        if (this.path[i] == region.element) break;
+        path = '<a>' + this.path[i].tagName.toLowerCase() + '</a> &raquo; ' + path;
+      }
+      path += '<a>' + node.tagName.toLowerCase() + '</a>';
+      this.path[-1] = node;
+    }
+
+    var element = new Element('span').update('<strong>Path:</strong> ' + path);
+    element.observe('click', function(event) {
+      var index = Element.nextSiblings(Event.element(event)).length;
+      var selection = window.getSelection();
+      var range = document.createRange();
+      range.selectNode(this.path[index - 1]);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }.bindAsEventListener(this));
+
+    this.element.appendChild(element);
+  }
+});

data/public/javascripts/midas/toolbar.js

@@ -0,0 +1,255 @@
+if (!Midas) var Midas = {};
+Midas.Toolbar = Class.create({
+  version: 0.2,
+  contexts: [],
+  buttons: {},
+  palettes: [],
+  options: {
+    appendTo: null,
+    contentWindow: window,
+    configuration: null
+  },
+
+  initialize: function(options) {
+    if (!Midas.version) throw('Midas.Toolbar requires Midas');
+    this.palettes = [];
+
+    this.options = Object.extend(Object.clone(this.options), options);
+    this.options['configuration'] = this.options['configuration'] || Midas.Config;
+    this.config = this.options['configuration'];
+
+    this.build();
+    this.setupObservers();
+  },
+
+  build: function() {
+    this.element = new Element('div', {id: this.options['id'] || this.generateId()}).addClassName('midas-toolbar');
+
+    if (this.config['toolbars']) {
+      for (var toolbar in this.config['toolbars']) {
+        var element = new Element('div').addClassName('midas-' + toolbar + 'bar');
+        var buttons = this.config['toolbars'][toolbar];
+        for (var button in buttons) {
+          element.appendChild(this.makeButton(button, buttons[button]));
+        }
+        this.element.appendChild(element);
+      }
+    }
+    
+    ($(this.options['appendTo']) || document.body).appendChild(this.element);
+  },
+
+  setupObservers: function() {
+    Event.observe(this.element, 'mousedown', function(e) {
+      e.stop();
+    }.bind(this));
+    Event.observe(document, 'mouseup', function(e) {
+      var element = Event.element(e);
+      this.palettes.each(function(palette) {
+        if (element != palette.element || element.descendantOf(palette.element)) palette.hide();
+      }.bind(this));
+    }.bind(this))
+  },
+
+  generateId: function() {
+    if (this.id) return this.id;
+    
+    var id = null;
+    var element = '';
+    while (element !== null) {
+      id = 'midas_toolbar' + parseInt(Math.random() * 10000);
+      element = $(id);
+    }
+
+    this.id = id;
+    return id;
+  },
+
+  makeButton: function(action, buttonSpec) {
+    var element;
+    if (Object.isArray(buttonSpec)) {
+      var types = buttonSpec.without(buttonSpec[0]).without(buttonSpec[1]);
+
+      element = new Element('div', {title: buttonSpec[1] ? buttonSpec[1] : buttonSpec[0], 'class': 'midas-button'});
+      element.update('<em>' + buttonSpec[0] + '</em>');
+      element.addClassName('midas-button-' + action.replace('_', '-'));
+      element.observe('click', function(event) {
+        event.stop();
+        element.blur();
+        Midas.fire('button', {
+          action: action,
+          event: event,
+          toolbar: this
+        });
+      }.bind(this));
+
+      types.each(function(buttonType) {
+        var type = buttonType[0];
+        var mixed = buttonType[1];
+        switch(type) {
+          case 'toggle':
+            element.observe('click', function() {
+              element.toggleClassName('pressed');
+            });
+            break;
+          case 'context':
+            this.contexts.push({element: element, callback: mixed || action});
+            break;
+          case 'mode':
+            element.observe('click', function() {
+              Midas.fire('mode', {mode: mixed || action, toolbar: this});
+            }.bind(this));
+            break;
+          case 'dialog':
+            if (!mixed) throw('Button "' + action + '" is missing arguments');
+            element.observe('click', function() {
+              var url = Object.isFunction(mixed) ? mixed.apply(this, [action]) : mixed;
+              alert('this would open a dialog with the url: ' + url);
+            }.bind(this));
+            break;
+          case 'panel':
+            if (!mixed) throw('Button "' + action + '" is missing arguments');
+            element.observe('click', function() {
+              var url = Object.isFunction(mixed) ? mixed.apply(this, [action]) : mixed;
+              alert('this would open a panel with the url: ' + url);
+            }.bind(this));
+            break;
+          case 'palette':
+            if (!mixed) throw('Button "' + action + '" is missing arguments');
+            this.palettes.push(new Midas.Palette(element, action, this, {url: Object.isFunction(mixed) ? mixed.apply(this, [action]) : mixed}));
+            break;
+          case 'select':
+            if (!mixed) throw('Button "' + action + '" is missing arguments');
+            element.observe('click', function() {
+              var contents = Object.isFunction(mixed) ? mixed.apply(this, [action]) : mixed;
+              alert('this would open a place a pulldown near the button with the contents: ' + contents.join(','));
+            }.bind(this));
+            break;
+          default:
+            throw('Unknown button type "' + type + '" for the "' + action + '" button');
+        }
+      }.bind(this));
+      this.buttons[action] = {element: element, spec: buttonSpec};
+    } else if (Object.isString(buttonSpec)) {
+      element = this.makeSeparator(buttonSpec);
+    } else {
+      element = this.makeButtonGroup(buttonSpec);
+    }
+    return element;
+  },
+
+  makeButtonGroup: function(group) {
+    var element = new Element('div').addClassName('midas-group');
+    for (var button in group) {
+      element.appendChild(this.makeButton(button, group[button]));
+    }
+    return element;
+  },
+
+  makeSeparator: function(button) {
+    return new Element('span').addClassName('midas-' + (button == '*' ? 'flex-separator' : button == '-' ? 'line-separator' : 'separator'));
+  },
+
+  setActiveButtons: function(regions, activeRegion) {
+    var selection = this.options['contentWindow'].getSelection();
+    if (!selection.rangeCount) return;
+
+    var range = selection.getRangeAt(0);
+
+    var node = range.commonAncestorContainer;
+    node = node.nodeType == 3 ? Element.up(node) : node;
+    if (!node) return;
+
+    var length = this.contexts.length;
+    for (var i = 0; i < length; ++i) {
+      var context = this.contexts[i];
+
+      var callback;
+      if (typeof(context['callback']) == 'function') {
+        callback = context['callback'];
+      } else {
+        callback = Midas.Toolbar.contexts[context['callback']];
+      }
+
+      if (typeof(callback) == 'function') {
+        if (callback.call(this, node, activeRegion)) {
+          context['element'].addClassName('active');
+        } else {
+          context['element'].removeClassName('active');
+        }
+      }
+    }
+  },
+
+  unsetActiveButtons: function() {
+    this.element.select('.active').each(function(button) {
+      button.removeClassName('active');
+    });
+  },
+
+  getHeight: function() {
+    return ($(this.options['appendTo']) || this.element).getHeight();
+  },
+
+  destroy: function() {
+    this.palettes.each(function(palette) {
+      if (palette.destroy) palette.destroy();
+    });    
+    this.palettes = [];
+    if (this.element) this.element.remove();
+    if (this.element) this.element = null;
+  }
+});
+
+// Midas.Toolbar static methods
+Object.extend(Midas.Toolbar, {
+  contexts: {
+    backcolor:           function(node) {
+                           this.buttons['backcolor']['element'].setStyle('background-color:' + node.getStyle('background-color'));
+                         },
+    forecolor:           function(node) {
+                           this.buttons['forecolor']['element'].setStyle('background-color:' + node.getStyle('color'));
+                         },
+    bold:                function(node) {
+                           var weight = Element.getStyle(node, 'font-weight');
+                           return weight == 'bold' || weight > 400;
+                         },
+    italic:              function(node) {
+                           return Element.getStyle(node, 'font-style') == 'italic' || node.nodeName == 'I' || node.up('i') || node.nodeName == 'EM' || node.up('em');
+                         },
+    strikethrough:       function(node) {
+                           return Element.getStyle(node, 'text-decoration') == 'line-through' || node.nodeName == 'STRIKE' || node.up('strike');
+                         },
+    underline:           function(node) {
+                           return Element.getStyle(node, 'text-decoration') == 'underline' || node.nodeName == 'U' || node.up('u');
+                         },
+    subscript:           function(node) {
+                           return node.nodeName == 'SUB' || node.up('sub');
+                         },
+    superscript:         function(node) {
+                           return node.nodeName == 'SUP' || node.up('sup');
+                         },
+    justifyleft:         function(node) {
+                           return (Element.getStyle(node, 'text-align') || '').indexOf('left') > -1;
+                         },
+    justifycenter:       function(node) {
+                           return (Element.getStyle(node, 'text-align') || '').indexOf('center') > -1;
+                         },
+    justifyright:        function(node) {
+                           return (Element.getStyle(node, 'text-align') || '').indexOf('right') > -1;
+                         },
+    justifyfull:         function(node) {
+                           return (Element.getStyle(node, 'text-align') || '').indexOf('justify') > -1;
+                         },
+    insertorderedlist:   function(node, region) {
+                           if (node.nodeName == 'OL') return true;
+                           var ol = Element.up(node, 'ol');
+                           return (ol) ? ol.descendantOf(region.element) : false;
+                         },
+    insertunorderedlist: function(node, region) {
+                           if (node.nodeName == 'ul') return true;
+                           var ul = Element.up(node, 'ul');
+                           return (ul) ? ul.descendantOf(region.element) : false;
+                         }
+  }
+});