zen 0.1a → 0.2

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

@@ -3,157 +3,144 @@
  * modal windows. The class itself does not apply any CSS styles, it only adds
  * a few IDs/classes. All styling should be done in separate CSS files.
  *
- * h2. Basic Usage
+ * ## Basic Usage
  *
  * Using this class is super-duper simple:
  *
- * bc. new Modal("Hello, world!");
+ *      new Modal("Hello, world!");
  *
  * That creates a container, a background div and the actual modal window
  * along with the specified content. It doesn't matter what kind of content
  * you're trying to add as long as it's valid HTML you're good to go.
  * For example, an image could be shown as following:
  *
- * bc. new Modal($('some_image_id'))
+ *      new Modal($('some_image_id'))
  *
  * Note that iFrames are not supported simply because I never had the need for them.
  * If you want to load remote data you'd have to do some processing before generating
  * the modal window:
  *
- * bc. var iframe = new Element('iframe', {src: 'url/of/iframe'});
- * new Modal(iframe);
+ *      var iframe = new Element('iframe', {src: 'url/of/iframe'});
+ *      new Modal(iframe);
  *
  * This class also does not animate the modals, this should also be handled by CSS
  * and can be done quite easily using CSS3.
  *
- * h2. Closing Modal Windows
+ * ## Closing Modal Windows
  *
  * The Modal class will add a div element with an id of "modal_close" to the modal window.
  * Whenever this element is clicked the callback specified in options.callback will be triggered.
  *
- * h2. HTML
+ * ## HTML
  *
  * The Modal class generates the following HTML:
  *
- * bc. <div id="modal_container">
- *   <div id="modal_window">
- *     <div id="modal_close"></div>
- *     <!-- Content goes here -->
- *   </div>
- * </div>
- * <div id="modal_background"></div>
+ *     <div id="modal_container">
+ *         <div id="modal_window">
+ *             <div id="modal_close"></div>
+ *             <!-- Content goes here -->
+ *         </div>
+ *         <div id="modal_background"></div>
+ *     </div>
  *
  * @author    Yorick Peterse
- * @link      http://yorickpeterse.com/
- * @license   MIT License
- * @package   Zen
+ * @link      http://yorickpeterse.com/ Yorick Peterse's Website
+ * @link      http://zen-cms.com/ Zen Website
+ * @license   http://code.yorickpeterse.com/license.txt The MIT license
  * @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.Modal = new Class(
 {
-  Implements: Options,
-  
-  /**
-   * Object containing all default options for each modal window.
-   * The following options are available:
-   *
-   * * height: specifies the width of the window (pixels, em, etc)
-   * * width: specifies the height of the modal window
-   * * fullscreen: specifies if the modal window should have a class of "fullscreen".
-   * * callback: an event that's triggered whenever the close element is clicked.
-   *
-   * @var object
-   */
-  options: {
-    height:      '200px',
-    width:       '200px',
-    fullscreen:  false,
-    callback:     function()
-    {
-      // Remove all elements
-      $('modal_background').destroy();
-      $('modal_container').destroy();
-    }
-  },
-  
-  /**
-   * Creates a new instance of the modal window and shows it.
-   * Basic usage is as following:
-   *
-   * bc. modal = new Modal("Hello, world!");
-   *
-   * If you want to specify any additional options you can do so as following:
-   *
-   * bc. modal = new Modal("Hello, world!", {fullscreen: true});
-   *
-   * Note that calling this method will also show the message rather than just
-   * initializing the class.
-   *
-   * @author Yorick Peterse
-   * @param  [String] content The content to display inside the modal window.
-   * @param  [Object] options JSON object containing all custom options.
-   * @return [Object]
-   */
-  initialize: function(content, options)
-  {
-    this.setOptions(options);
-    
-    if ( this.options.fullscreen == true )
-    {
-      var modal_class = "fullscreen";
-    }
-    else
-    {
-      var modal_class = null; 
-    }
-    
-    var styles = {width: this.options.width, height: this.options.height};
-    
-    // Create our base elements
-    var modal_container  = new Element('div', {id: 'modal_container'});
-    var modal_window     = new Element('div', {id: 'modal_window', 'class': modal_class});
-    var modal_close      = new Element('div', {id: 'modal_close'});
-    var modal_background = new Element('div', {id: 'modal_background'});
-    
-    // Strings will be inserted using the html() method. Other elements
-    // will be injected into the modal window.
-    if ( typeof content == "string" )
-    {
-      modal_window.set('html', content);
-    }
-    else
+    Implements: Options,
+
+   /**
+    * Object containing all default options for each modal window.
+    * The following options are available:
+    *
+    * * height: specifies the width of the window (pixels, em, etc)
+    * * width: specifies the height of the modal window
+    * * fullscreen: specifies if the modal window should have a class of "fullscreen".
+    * * callback: an event that's triggered whenever the close element is clicked.
+    *
+    * @author Yorick Peterse
+    * @since  0.1
+    * @var    {object}
+    */
+    options: {
+        height:      '200px',
+        width:       '200px',
+        fullscreen:  false,
+        callback:    function()
+        {
+            // Remove all elements
+            $('modal_background').destroy();
+            $('modal_container').destroy();
+        }
+    },
+
+   /**
+    * Creates a new instance of the modal window and shows it.
+    * Basic usage is as following:
+    *
+    *     modal = new Modal("Hello, world!");
+    *
+    * If you want to specify any additional options you can do so as following:
+    *
+    *     modal = new Modal("Hello, world!", {fullscreen: true});
+    *
+    * Note that calling this method will also show the message rather than just
+    * initializing the class.
+    *
+    * @author Yorick Peterse
+    * @since  0.1
+    * @param  {string} content The content to display inside the modal window.
+    * @param  {object} options Object containing all custom options.
+    * @return {void}
+    */
+    initialize: function(content, options)
     {
-      modal_window.adopt(content.clone());
+        this.setOptions(options);
+
+        var modal_class = null;
+
+        if ( this.options.fullscreen === true )
+        {
+            modal_class = "fullscreen";
+        }
+
+        var styles = {width: this.options.width, height: this.options.height};
+
+        // Create our base elements
+        var modal_container  = new Element('div', {id: 'modal_container'});
+        var modal_window     = new Element('div', 
+        {
+            id     : 'modal_window', 
+            'class': modal_class, 
+            styles : styles
+        });
+
+        var modal_close      = new Element('div', {id: 'modal_close'});
+        var modal_background = new Element('div', {id: 'modal_background'});
+
+        // Strings will be inserted using the html() method. Other elements
+        // will be injected into the modal window.
+        if ( typeof content === "string" )
+        {
+            modal_window.set('html', content);
+        }
+        else
+        {
+            modal_window.adopt(content.clone());
+        }
+
+        // Inject the close button
+        modal_close.inject(modal_window);
+
+        // Bind the events
+        modal_close.addEvent('click', this.options.callback);
+
+        modal_window.inject(modal_container);
+        modal_background.inject(document.body);
+        modal_container.inject(document.body);
     }
-    
-    // Inject the close button
-    modal_close.inject(modal_window);
-    
-    // Bind the events
-    modal_close.addEvent('click', this.options.callback);
-    
-    modal_window.inject(modal_container);
-    modal_background.inject(document.body);
-    modal_container.inject(document.body);
-  }
-});
+});

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

@@ -4,22 +4,22 @@
  * 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
+ * ## 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!'
- * });
+ *     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
+ * ## 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:
@@ -30,184 +30,182 @@
  * * 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
+ * ## 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 id="notification_container">
  *
- * </div>
+ *     </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>
+ *     <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.
+ * @author   Yorick Peterse
+ * @link     http://yorickpeterse.com/ Yorick Peterse's Website
+ * @link     http://zen-cms.com/ Zen Website
+ * @license  http://code.yorickpeterse.com/license.txt The MIT license
+ * @since    0.1
  */
 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 )
+    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
+    *
+    * @author Yorick Peterse
+    * @since  0.1
+    * @var    {object}
+    */
+    options:
     {
-      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 != '' )
+        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
+    * @since  0.1
+    * @param  {object} options An object containing all custom configuration parameters.
+    * @return {void}
+    */
+    initialize: function(options)
     {
-      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()
+        this.setOptions(options);
+        this.generateContainer();
+        this.generateNotification();
+    },
+
+   /**
+    * Generates a new notification container in case it doesn't already exist.
+    *
+    * @author Yorick Peterse
+    * @since  0.1
+    * @return {void}
+    */
+    generateContainer: 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 )
+        // 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
+    * @since  0.1
+    * @return {void}
+    */
+    generateNotification: function()
     {
-      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()
+        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
+    * @since  0.1
+    * @param  {object} notification The notification to remove.
+    * @return {void}
+    */
+    removeNotification: function(notification)
     {
-      notification.destroy();
-    });
-    
-    effect.start('opacity', 1, 0);
-  }
-});
+        // 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);
+    }
+});