trusty-cms 1.0.0

data/public/javascripts/admin/dropdown.js

@@ -0,0 +1,216 @@
+/*
+ *  dropdown.js
+ *
+ *  dependencies: prototype.js, effects.js, lowpro.js
+ *
+ *  --------------------------------------------------------------------------
+ *  
+ *  Allows you to easily create a dropdown menu item. Simply create a link
+ *  with a class of "dropdown" that references the ID of the list that you
+ *  would like to use as a dropdown menu.
+ *  
+ *  A link like this:
+ *  
+ *    <a class="dropdown" href="#dropdown">Menu</a>
+ *  
+ *  will dropdown a list of choices in the list with the ID of "dropdown".
+ *  
+ *  You will need to install the following hook:
+ *  
+ *    Event.addBehavior({'a.dropdown': Dropdown.TriggerBehavior()});
+ *  
+ *  --------------------------------------------------------------------------
+ *  
+ *  Copyright (c) 2010, John W. Long
+ *  
+ *  Permission is hereby granted, free of charge, to any person obtaining a
+ *  copy of this software and associated documentation files (the "Software"),
+ *  to deal in the Software without restriction, including without limitation
+ *  the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ *  and/or sell copies of the Software, and to permit persons to whom the
+ *  Software is furnished to do so, subject to the following conditions:
+ *  
+ *  The above copyright notice and this permission notice shall be included in
+ *  all copies or substantial portions of the Software.
+ *  
+ *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ *  THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ *  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ *  DEALINGS IN THE SOFTWARE.
+ *  
+ */
+
+var Dropdown = {
+  
+  DefaultPosition: 'bottom',
+  
+  DefaultEffect: 'slide',
+  DefaultEffectDuration: 0.1,
+  
+  EffectPairs: {
+    'slide' : ['SlideDown', 'SlideUp'],
+    'blind' : ['BlindDown', 'BlindUp'],
+    'appear': ['Appear', 'Fade']
+  }
+  
+};
+
+Dropdown.TriggerBehavior = Behavior.create({
+  initialize: function(options) {
+    var options = options || {};
+    options.position = (options.position || Dropdown.DefaultPosition).toLowerCase();
+    options.effect = (options.effect || Dropdown.DefaultEffect).toLowerCase();
+    options.duration = (options.duration || Dropdown.DefaultEffectDuration);
+    this.options = options;
+    
+    var matches = this.element.href.match(/\#(.+)$/);
+    this.menu = (matches ? Dropdown.Menu.findOrCreate(matches[1]) : new Dropdown.AjaxMenu(this.element.href));
+  },
+  
+  onclick: function(event) {
+    event.stop();
+    $$('a.dropdown').each(function(drop){ drop.removeClassName('selected') });
+    c = $H(Dropdown.Menu.controls);
+    clicked = this;
+    c.each(function(pair){
+      menu = Dropdown.Menu.controls[pair.key];
+      if (menu && menu.visible()) { 
+        menu.close(clicked.element,clicked.options);
+      }
+    })
+    if (this.menu) this.menu.toggle(this.element, this.options);
+  }
+});
+
+Dropdown.Menu = Class.create({
+  
+  initialize: function(element) {
+    element.remove();
+    this.element = element;
+    this.wrapper = $div({'class': 'dropdown_wrapper', 'style': 'position: absolute; display: none'}, element);
+    document.body.insert(this.wrapper);
+  },
+  
+  open: function(trigger, options) {
+    this.wrapper.hide();
+    trigger.addClassName('selected');
+    this.position(trigger, options);
+    var name = options.effect;
+    var effect = Effect[Dropdown.EffectPairs[name][0]];
+    effect(this.wrapper, {duration: options.duration});
+  },
+  
+  close: function(trigger, options) {
+    var name = options.effect;
+    var effect = Effect[Dropdown.EffectPairs[name][1]];
+    effect(this.wrapper, {duration: options.duration});
+    trigger.removeClassName('selected');
+  },
+  
+  toggle: function(trigger, options) {
+    if (this.lastTrigger == trigger) {
+      if (this.wrapper.visible()) {
+        this.close(trigger, options);
+      } else {
+        this.open(trigger, options);
+      }
+    } else {
+      if (this.lastTrigger) this.lastTrigger.removeClassName('selected');
+      this.open(trigger, options);
+    }
+    this.lastTrigger = trigger;
+  },
+  
+  position: function(trigger, options) {
+    switch(options.position) {
+      case 'top':     this.positionTop(trigger);     break;
+      case 'bottom':  this.positionBottom(trigger);  break;
+      default:        this.positionBottom(trigger);
+    }
+    this.lastOptions = options;
+  },
+  
+  positionTop: function(trigger) {
+    var offset = trigger.cumulativeOffset();
+    var height = this.wrapper.getHeight();
+    this.wrapper.setStyle({
+      left: offset.left + 'px',
+      top:  (offset.top - height) + 'px'
+    });
+    this.lastTrigger = trigger;
+  },
+  
+  positionBottom: function(trigger) {
+    var offset = trigger.cumulativeOffset();
+    var height = trigger.getHeight();
+    this.wrapper.setStyle({
+      left: offset.left + 'px',
+      top:  (offset.top + height) + 'px'
+    });
+    this.lastTrigger = trigger;
+  },
+  
+  reposition: function() {
+    if (this.lastTrigger) this.position(this.lastTrigger, this.lastOptions);
+  },
+  
+  visible: function() {
+    return this.wrapper.visible();
+  }
+  
+});
+
+Dropdown.AjaxMenu = Class.create(Dropdown.Menu, {
+  initialize: function(url) {
+    this.url = url;
+    this.element = $ul({'class': 'menu'});
+    this.wrapper = $div({'class': 'dropdown_wrapper', 'style': 'position: absolute; display: none'}, this.element);
+    document.body.insert(this.wrapper);
+  },
+
+  open: function($super, trigger, options) {
+    if (!this.loaded) {
+      new Ajax.Request(this.url, {
+        asynchronous: false,
+        method: 'get',
+        evalScripts: true,
+        onSuccess: function(data) {
+          var menu = new Element('ul',{'class':'menu'}).update(data.responseText);
+          var links = menu.childElements($$('li'));
+          if (links.length == 1) {
+            window.location = links[0].down().href;
+          } else {
+            this.element.replace(menu);
+            $super(trigger, options);
+          };
+        }.bind(this)
+      });
+      this.loaded = true;
+    } else {
+      $super(trigger, options);
+    }
+  }
+});
+
+Dropdown.Menu.findOrCreate = function(element) {
+  var element = $(element);
+  var key = element.identify();
+  var menu = Dropdown.Menu.controls[key];
+  if (menu == null) menu = Dropdown.Menu.controls[key] = new Dropdown.Menu(element);
+  return menu;
+}
+Dropdown.Menu.controls = {};
+
+Event.observe(window, 'resize', function(event) {
+  for (key in Dropdown.Menu.controls) {
+    var menu = Dropdown.Menu.controls[key];
+    if (menu.visible()) menu.reposition();
+  }
+});
+
+Event.addBehavior({
+  'a.dropdown': Dropdown.TriggerBehavior()
+});