zen 0.1a

data/lib/zen/public/admin/js/zen/notification.js

@@ -0,0 +1,213 @@
+/**
+ * The Notification class can be used to display Growl like notifications to the user.
+ * These notifications can be used to inform the user that an entry has been saved, a new comment
+ * has been posted, etc. Note that this class only inserts/animates the HTML, you'll have to
+ * style the notifications yourself (more on that later on).
+ *
+ * h2. Basic Usage
+ *
+ * Creating a new notification is fairly easy. The most basic notification only requires some content
+ * and a title.
+ *
+ * bc. notification = new Zen.Notification(
+ * {
+ *   title: 'My title',
+ *   content: 'Hello, world!'
+ * });
+ *
+ * This will show a new notification without a title and an image, just the text "Hello, world!".
+ * You're not limited to plain text so feel free to use Comic Sans MS, pink colors and other funky
+ * elements.
+ *
+ * h2. Configuring Notifications
+ *
+ * Obviously just a message isn't enough and you might want to add an image or a title. When creating
+ * a new notification you can use the following configuration options:
+ *
+ * * title: the title for the notification
+ * * content: the text or HTML to display in the message
+ * * image: a custom image to show in the notification
+ * * sticky: boolean that indicates that the message can't be hidden by clicking on it
+ * * duration: the time (in miliseconds) after which the notification should be removed
+ * 
+ * h2. Styling Notifications
+ *
+ * The HTML generated by the Notification class is fairly straightforward. There
+ * are 2 important elements. The notification container and the notification itself.
+ * The container will, how unexpected it may sound, contain all notifications. It's
+ * HTML looks like the following:
+ *
+ * bc. <div id="notification_container">
+ *
+ * </div>
+ *
+ * The HTML for a notification is slightly more complicated and looks like the following:
+ *
+ * bc. <div class="notification">
+ *   <div class="close"></div>
+ *   <div class="image">
+ *     <img src="..." />
+ *   </div>
+ *   <div class="title">
+ *     Notification Title
+ *   </div>
+ *   <div class="content">
+ *     Content goes here
+ *   </div>
+ * </div>
+ *
+ * As you can see it uses quite a few div elements but it's nothing ground breaking.
+ * The image and title div elements will only be displayed if a title and/or image has been
+ * specified. The close and content div will always be displayed.
+ * 
+ * @author    Yorick Peterse
+ * @link      http://yorickpeterse.com/
+ * @license   MIT License
+ * @package   Zen
+ * @since     0.1
+ *
+ * Copyright (c) 2011, Yorick Peterse
+ * 
+ * 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.
+ */
+Zen.Notification = new Class(
+{
+  Implements: Options,
+  
+  /**
+   * JSON object containing all default and user defined options.
+   * The following options are available:
+   *
+   * * title: the title for the notification
+   * * content: the text or HTML to display in the message
+   * * image: a custom image to show in the notification
+   * * sticky: boolean that indicates that the message can't be hidden by clicking on it
+   * * duration: the time (in miliseconds) after which the notification should be removed
+   *
+   * @var [Object]
+   */
+  options:
+  {
+    title:   '',
+    content: '',
+    image:   '',
+    sticky:  false,
+    duration: 3000
+  },
+  
+  /**
+   * Creates a new instance of the notification class
+   * and shows the notification based on the specified options.
+   *
+   * @author Yorick Peterse
+   * @param  [Object] options JSON objects containing all custom configuration parameters.
+   * @return [Object]
+   */
+  initialize: function(options)
+  {
+    this.setOptions(options);
+    this.generateContainer();
+    this.generateNotification();
+  },
+  
+  /**
+   * Generates a new notification container in case it doesn't already exist.
+   *
+   * @author Yorick Peterse
+   * @return [Void]
+   */
+  generateContainer: function()
+  {
+    // The container only has to be created once
+    if ( $('notification_container') != null )
+    {
+      return;
+    }
+    
+    container = new Element('div', {id: 'notification_container'});
+    container.inject(document.body);
+  },
+  
+  /**
+   * Generates a new notification and inserts it into the notification
+   * container.
+   *
+   * @author Yorick Peterse
+   * @return [Void]
+   */
+  generateNotification: function()
+  {
+    var self         = this;
+    var notification = new Element('div', {
+      class:  'notification',
+      styles: {visibility: 'hidden'}
+    });
+    
+    notification.adopt(new Element('div', {class: 'close'}));
+
+    // We'll only add the title and the image if they've been set
+    if ( this.options.image != '' )
+    {
+      var image_div = new Element('div', {class: 'image'});
+      var image_tag = new Element('img', {src: this.options.image});
+      
+      notification.adopt(image_div.adopt(image_tag));
+    }
+    
+    var title_div   = new Element('div', {class: 'title'  , html: this.options.title  });
+    var content_div = new Element('div', {class: 'content', html: this.options.content});
+    
+    notification.adopt(title_div, content_div).inject($('notification_container'));
+    
+    // Add a new event listener so we can close our event
+    notification.addEvent('click', function()
+    {
+      self.removeNotification(notification); 
+    });
+    
+    notification.tween('opacity', 0, 1);
+    
+    // Automatically remove the notification after 3 seconds if "sticky" is set to false
+    if ( this.options.sticky != true )
+    {
+      this.removeNotification.delay(this.options.duration, this, [notification]);
+    }
+  },
+  
+  /**
+   * Removes the specified notification by fading it out and them removing the DOM element.
+   *
+   * @author Yorick peterse
+   * @param  [Object] notification The notification to remove.
+   * @return [Void]
+   */
+  removeNotification: function(notification)
+  {
+    // Fade the notification along with a callback so we can remove the element
+    // once the animation is finished
+    effect = new Fx.Tween(notification);
+    
+    effect.addEvent('complete', function()
+    {
+      notification.destroy();
+    });
+    
+    effect.start('opacity', 1, 0);
+  }
+});

data/lib/zen/public/admin/js/zen/tabs.js

@@ -0,0 +1,263 @@
+/**
+ * Widget that allows developers to create a tab based navigation menu.
+ * The Tabs class supports both normal tabs (fields hidden based on their IDs) as well
+ * as tabs loaded using Ajax.
+ *
+ * In order to use the Tab class you only need some very basic markup. You'll need a
+ * list element (either ordered or unordered) that will contain all links and a few divs
+ * in case you're using regular tabs that don't load their content using Ajax. The most
+ * basic example looks like the following:
+ *
+ * bc. <ul class="tabs">
+ *   <li>
+ *     <a href="#tab1">Tab #1</a>
+ *   </li>
+ * </ul>
+ *
+ * bc. <div id="tab1">
+ *   <p>This is the content of tab #1.</p>
+ * </div>
+ *
+ * When using regular tabs it doesn't matter where you put the divs for the tabs. However, when
+ * using the Ajax tabs it's important to remember that the content will be inserted just after
+ * the closing tags of the unordered/ordered list in a div with a class of "tab_content". Example:
+ * 
+ * bc. <ul class="tabs">
+ *   <li>
+ *     <a href="#tab1">Tab #1</a>
+ *   </li>
+ * </ul>
+ *
+ * bc. <div class="tab_content">
+ *   <p>This is the content of tab #1 loaded using Ajax.</p>
+ * </div>
+ *
+ * h2. Creating and Configuration
+ *
+ * Now that we know how the markup works, let's create some tabs. Doing this is fairly easy and
+ * at a basic level only requires the following code:
+ *
+ * bc. Zen.Objects.MyTabs = new Zen.Tabs('css_selector_for_element');
+ *
+ * In this case we're creating a new instance of the Tabs class for an element named "css_selector_for_element".
+ * The first argument is a simple CSS selector that defines what element to choose. This means that you can either
+ * use a class or ID name but also a more complicated selector like "div > ul ul:first-child".
+ *
+ * Let's create another Tab instance but use some custom configuration options this time.
+ *
+ * bc. Zen.Objects.MyTabs = new Zen.Tabs('ul.some_class_name',
+ * {
+ *   default: 'li:last-child',
+ *   ajax: false
+ * });
+ *
+ * As you can see there are  configuration items available.
+ *
+ * * default: The default tab/tab field to show. Again this is just a CSS selector so you
+ * can easily customize it.
+ * * ajax: Boolean that indicates that the tabs should be loaded from an external page using
+ * Ajax.
+ *
+ * Special thanks to the guys from #mootools for helping me out :)
+ * 
+ * @author    Yorick Peterse
+ * @link      http://yorickpeterse.com/
+ * @license   MIT License
+ * @package   Zen
+ * @since     0.1
+ *
+ * Copyright (c) 2011, Yorick Peterse
+ * 
+ * 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.
+ */
+Zen.Tabs = new Class(
+{
+  Implements: Options,
+  
+  // Define our default options
+  options:
+  {    
+    // The default tab/field to display
+    default: 'li:first-child',
+    
+    // Specifies if the content of each tab should be loaded using Ajax.
+    ajax: false
+  },
+  
+  /**
+   * String that contains the CSS selector that specifies which element
+   * should be used for creating the tabs.
+   *
+   * @var [Object]
+   */
+  element: null,
+  
+  /**
+   * Array that will contain a list of objects for each tab/field for the
+   * current element. This array will be used when binding events to each
+   * tab so that we don't have to search for these tabs/fields over and over again.
+   *
+   * @var [Array]
+   */
+  fields: [],
+  
+  /**
+   * Constructor method called upon initialization. Options can be
+   * set as a JSON object in the first argument.
+   *
+   * @author Yorick Peterse
+   * @param  [String] element The element to use for creating the tabs.
+   * @param  [Object] options Custom options used when creating the tabs
+   * @return [Object]
+   */
+  initialize: function(element, options)
+  {
+    this.setOptions(options);
+    
+    // Ignore the tab system if the element couldn't be found
+    if ( $$(element).length <= 0 )
+    {
+      return;
+    }
+    
+    this.element = $$(element)[0];
+    
+    // We're good to go
+    if ( this.options.ajax == false )
+    {
+      this.generalTabs();
+    }
+    else
+    {
+      this.ajaxTabs();
+    }
+  },
+  
+  /**
+   * Generate a set of normal tabs that will load content that's already on the page.
+   * In order for these tabs to work your URLs will need to point to an element with
+   * an ID. These elements will be hidden and shown upon clicking the corresponding tab.
+   *
+   * @author Yorick Peterse
+   * @return [Void]
+   */
+  generalTabs: function()
+  {
+    // Create a reference to the current instance so we can
+    // use data in this instance in our events and loops.
+    var self = this;
+
+    // Select our default tab element
+    var default_field = this.element.getElement(self.options.default).getElement('a');
+    var links         = this.element.getElements('li a');
+    
+    this.element.getElement(self.options.default).addClass('active');
+    
+    links.each(function(link)
+    {
+      // Hide the corresponding element
+      var url   = link.get('href');
+      var field = $(url.replace('#', ''));
+      
+      // Check if the field actually exists and hide it if it's a non
+      // default field.
+      if ( field != null && default_field != link )
+      {
+        field.setStyle('display', 'none');
+      }
+
+      self.fields.push({url: url, field: field});
+      
+      // Add an event that will show the corresponding field for each link
+      link.addEvent('click', function(event)
+      {
+        // Prevent normal behavior
+        event.stop();
+
+        self.element.getElement('li.active').removeClass('active');
+        
+        // Now we can add the class to the current tab
+        this.getParent('li').addClass('active');
+        
+        // Toggle the state of each tab and ignore any non-existing fields.
+        self.fields.each(function(item)
+        {
+          if ( item == null || item.field == null )
+          {
+            return;
+          }
+
+          if ( item.url == link.get('href') )
+          {
+            item.field.setStyle('display', 'block');
+          }
+          else
+          {
+            item.field.setStyle('display', 'none');
+          }
+        });
+      });
+    });
+  },
+  
+  /**
+   * Generate a set of tabs of which the content for each tab will be loaded
+   * using an Ajax request. By default the content of these tabs will be inserted
+   * after the element that contains the tabs. This content will be inserted into
+   * a div of which the class is "tab_content".
+   *
+   * @author Yorick Peterse
+   * @return [Void]
+   */
+  ajaxTabs: function()
+  {
+    // Create a reference to the current instance so we can
+    // use data in this instance in our events and loops.
+    var self = this;
+
+    // Select our default tab element
+    var default_link  = this.element.getElement(self.options.default).getElement('a');
+    var links         = this.element.getElements('li a');
+    
+    // Create the element that will contain our Ajax response data
+    tab_content = new Element('div', {class: 'tab_content'});
+    tab_content.inject(this.element, 'after');
+    
+    // Load our default tab content
+    this.element.getElement(self.options.default).addClass('active');
+    this.element.getNext('.tab_content').load(default_link.get('href'));
+    
+    links.each(function(link)
+    {
+      // Add an event that will show the corresponding field for each link
+      link.addEvent('click', function(event)
+      {
+        // Prevent normal behavior
+        event.stop();
+
+        self.element.getElement('li.active').removeClass('active');
+        
+        // Now we can add the class to the current tab
+        this.getParent('li').addClass('active');
+        
+        self.element.getNext('.tab_content').load(this.get('href'));
+      });
+    });
+  }
+});