zen 0.2.7 → 0.2.8

data/lib/zen/public/admin/js/zen/{editor → lib/editor}/markdown.js

@@ -1,10 +1,8 @@
 /**
  * Markdown driver for the text editor that ships with Zen.
  *
- * @author    Yorick Peterse
- * @since     0.2.6
- * @namespace Zen
- * @extend    Editor
+ * @author Yorick Peterse
+ * @since  0.2.6
  */
 Zen.Editor.Markdown = new Class(
 {
@@ -15,7 +13,7 @@ Zen.Editor.Markdown = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     bold: function(editor)
     {
@@ -27,7 +25,7 @@ Zen.Editor.Markdown = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     italic: function(editor)
     {
@@ -39,7 +37,7 @@ Zen.Editor.Markdown = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     link: function(editor)
     {
@@ -57,7 +55,7 @@ Zen.Editor.Markdown = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     ul: function(editor)
     {
@@ -72,7 +70,7 @@ Zen.Editor.Markdown = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     ol: function(editor)
     {

data/lib/zen/public/admin/js/zen/{editor → lib/editor}/textile.js

@@ -1,10 +1,8 @@
 /**
  * Textile driver for the text editor that ships with Zen.
  *
- * @author    Yorick Peterse
- * @since     0.2.6
- * @namespace Zen
- * @extend    Editor
+ * @author Yorick Peterse
+ * @since  0.2.6
  */
 Zen.Editor.Textile = new Class(
 {
@@ -15,7 +13,7 @@ Zen.Editor.Textile = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     bold: function(editor)
     {
@@ -27,7 +25,7 @@ Zen.Editor.Textile = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     italic: function(editor)
     {
@@ -39,7 +37,7 @@ Zen.Editor.Textile = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     link: function(editor)
     {
@@ -57,7 +55,7 @@ Zen.Editor.Textile = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     ul: function(editor)
     {
@@ -72,7 +70,7 @@ Zen.Editor.Textile = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [Element] editor The textarea to insert the tags into.
+     * @param  {element} editor The textarea to insert the tags into.
      */
     ol: function(editor)
     {

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

@@ -0,0 +1,143 @@
+/**
+ * Zen.HtmlTable is an extension to the HtmlTable class provided by Mootools
+ * More. This extension makes it possible to sort tables, check all checkboxes
+ * in the first column and so on.
+ *
+ * ## Usage
+ *
+ * The markup required by this class is very basic, in fact, by default it
+ * doesn't need any special markup at all. A simple table with a <thead> element
+ * will do just fine:
+ *
+ * <table id="some_table">
+ *     <thead>
+ *         <tr>
+ *             <th>#</th>
+ *             <th>Name</th>
+ *         </tr>
+ *     </thead>
+ *     <tbody>
+ *         <tr>
+ *             <td>10</td>
+ *             <td>Yorick</td>
+ *         </tr>
+ *     </tbody>
+ * </table>
+ *
+ * Creating the Javascript object for this table would work as following:
+ *
+ *     var table = new Zen.HtmlTable($('some_table'));
+ *
+ * For more information on the available options (which can be set in the second
+ * parameter just like HtmlTable) see HtmlTable and HtmlTable.Sort.
+ *
+ * @author Yorick Peterse
+ * @since  0.2.8
+ */
+Zen.HtmlTable = new Class(
+{
+    Extends: HtmlTable,
+
+    /**
+     * Creates a new instance of the class and calls the required methods to
+     * allow users to check all checkboxes in a table.
+     *
+     * @author Yorick Peterse
+     * @since  0.2.8
+     * @see    HtmlTable.initialize()
+     */
+    initialize: function(element, options)
+    {
+        options = Object.merge(this.generateOptions(element), options);
+
+        this.parent(element, options);
+
+        this.enableCheck();
+    },
+
+    /**
+     * Given an HTML element this method returns an object containing various
+     * options that can be passed to the HtmlTable class. These options are set
+     * using various HTML attributes.
+     *
+     * The following attributes can be set on the <table> element:
+     *
+     * * data-sort-index: the index of the column to sort the table on by
+     *   default, set to 1 by default.
+     *
+     * The following attributes can be set on each <th> elements:
+     *
+     * * data-sort-parser: the name of the parser to use for the column.
+     *
+     * @author Yorick Peterse
+     * @since  0.2.8
+     * @param  {element} element An HTML element that represents a single table.
+     * @return {object}
+     */
+    generateOptions: function(element)
+    {
+        // Set the default options
+        var options = {
+            classSortSpan   : 'sort',
+            classSortable   : 'sortable',
+            classHeadSort   : 'asc',
+            classHeadSortRev: 'desc',
+            classNoSort     : 'no_sort',
+            classZebra      : 'odd',
+            sortable        : true,
+            parsers         : []
+        };
+
+        // Determine the column to sort on by default.
+        options.sortIndex = element.get('data-sort-index') || 1;
+
+        if ( typeOf(options.sortIndex) === 'string' )
+        {
+            options.sortIndex = options.sortIndex.toInt();
+        }
+
+        // Add all custom parsers
+        element.getChildren('thead tr th').each(function(th, index)
+        {
+            var parser = th.get('data-sort-parser');
+
+            if ( parser )
+            {
+                options.parsers[index] = parser;
+            }
+        });
+
+        return options;
+    },
+
+    /**
+     * Creates the required events to allow a user to check a single checkbox in
+     * the table heading which in turn checks all the checkboxes for that column
+     * in each table row.
+     *
+     * @author Yorick Peterse
+     * @since  0.2.8
+     */
+    enableCheck: function()
+    {
+        var element   = this.element;
+        var check_all = element.getElement(
+            'thead tr th:first-child input[type="checkbox"]'
+        );
+
+        if ( check_all )
+        {
+            check_all.addEvent('click', function()
+            {
+                var checked = check_all.get('checked');
+
+                element.getElements(
+                    'tbody tr td:first-child input[type="checkbox"]'
+                ).each(function(checkbox)
+                {
+                    checkbox.set('checked', checked);
+                });
+            });
+        }
+    }
+});

data/lib/zen/public/admin/js/zen/{tabs.js → lib/tabs.js}

@@ -1,12 +1,12 @@
 /**
  * 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.
+ * 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:
+ * 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:
  *
  *     <ul class="tabs">
  *         <li>
@@ -18,9 +18,10 @@
  *         <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:
+ * 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:
  * 
  *     <ul class="tabs">
  *         <li>
@@ -34,16 +35,19 @@
  *
  * ## 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:
+ * 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:
  *
  *     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".
+ * 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.
+ * Let's create another Tab instance but use some custom configuration options 
+ * this time.
  *
  *     Zen.Objects.MyTabs = new Zen.Tabs('ul.some_class_name',
  *     {
@@ -53,18 +57,15 @@
  *
  * 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.
+ * * 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/ Yorick Peterse's Website
- * @link     http://zen-cms.com/ Zen Website
- * @license  http://code.yorickpeterse.com/license.txt The MIT license
- * @since    0.1
+ * @author Yorick Peterse
+ * @since  0.1
  */
 Zen.Tabs = new Class(
 {
@@ -104,7 +105,8 @@ Zen.Tabs = new Class(
     /**
     * 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.
+    * tab so that we don't have to search for these tabs/fields over and over 
+    * again.
     *
     * @author Yorick Peterse
     * @since  0.1
@@ -120,7 +122,6 @@ Zen.Tabs = new Class(
     * @since  0.1
     * @param  {string} element The element to use for creating the tabs.
     * @param  {object} options Custom options used when creating the tabs
-    * @return {void}
     */
     initialize: function(element, options)
     {
@@ -146,13 +147,13 @@ Zen.Tabs = new Class(
     },
 
     /**
-    * 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.
+    * 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
     * @since  0.1
-    * @return {void}
     */
     generalTabs: function()
     {
@@ -161,7 +162,8 @@ Zen.Tabs = new Class(
         var self = this;
 
         // Select our default tab element
-        var default_field = this.element.getElement(self.options['default']).getElement('a');
+        var default_field = this.element.getElement(self.options['default']);
+            default_field = default_field.getElement('a');
         var links         = this.element.getElements('li a');
 
         this.element.getElement(self.options['default']).addClass('active');
@@ -192,7 +194,8 @@ Zen.Tabs = new Class(
                 // 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.
+                // Toggle the state of each tab and ignore any non-existing 
+                // fields.
                 self.fields.each(function(item)
                 {
                     if ( item === null || item.field === null )
@@ -215,13 +218,12 @@ Zen.Tabs = new Class(
 
     /**
     * 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".
+    * 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
     * @since  0.1
-    * @return {void}
     */
     ajaxTabs: function()
     {
@@ -230,7 +232,8 @@ Zen.Tabs = new Class(
         var self = this;
 
         // Select our default tab element
-        var default_link  = this.element.getElement(self.options['default']).getElement('a');
+        var default_link  = this.element.getElement(self.options['default']);
+            default_link  = default_link.getElement('a');
         var links         = this.element.getElements('li a');
 
         // Create the element that will contain our Ajax response data

data/lib/zen/public/admin/js/zen/{window.js → lib/window.js}

@@ -1,13 +1,14 @@
 /**
- * The Window class can be used to create basic windows with a title and a set of buttons.
- * These windows can be used for a preview of an article, showing an image or asking for a
- * confirmation.
+ * The Window class can be used to create basic windows with a title and a set 
+ * of buttons. These windows can be used for a preview of an article, showing an 
+ * image or asking for a confirmation.
  *
  * ## Usage
  *
- * In order to create a new window you simply need to create a new instance of the class.
- * The first parameter is the content to display and is required, the second parameter is
- * an object containing all custom options to use such as the title.
+ * In order to create a new window you simply need to create a new instance of 
+ * the class. The first parameter is the content to display and is required, the 
+ * second parameter is an object containing all custom options to use such as 
+ * the title.
  *
  *     var modal = new Zen.Window('Hello, world!');
  *
@@ -19,14 +20,14 @@
  *
  * ## Buttons
  *
- * Buttons can be added by setting the "buttons" key in the options object to an array of
- * objects. Each object should have the following three keys:
+ * Buttons can be added by setting the "buttons" key in the options object to an 
+ * array of objects. Each object should have the following three keys:
  *
  * * name: the name of the button, also used as the class (should be unique).
  * * label: the text to display in the button.
- * * onClick: a function that will be called whenever the button is clicked. This function
- * takes a single parameter which is set to the instance of the window the button belongs
- * to.
+ * * onClick: a function that will be called whenever the button is clicked. 
+ *   This function takes a single parameter which is set to the instance of the 
+ *   window the button belongs to.
  *
  * An example of setting a button can be seen below.
  *
@@ -60,7 +61,8 @@ Zen.Window = new Class(
     },
 
     /**
-     * Object containing all the custom options as well as the ones specified by the user.
+     * Object containing all the custom options as well as the ones specified by 
+     * the user.
      *
      * @author Yorick Peterse
      * @since  0.2.6
@@ -91,7 +93,7 @@ Zen.Window = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @var    [Element]
+     * @var    {element}
      */
     element: null,
 
@@ -100,9 +102,9 @@ Zen.Window = new Class(
      *
      * @author Yorick Peterse
      * @since  0.2.6
-     * @param  [String] content The content to display inside the window.
-     * @param  [Object] options Object containing a collection of custom options for the
-     * window.
+     * @param  {string} content The content to display inside the window.
+     * @param  {object} options Object containing a collection of custom options 
+     * for the window.
      */
     initialize: function(content, options)
     {
@@ -151,11 +153,13 @@ Zen.Window = new Class(
         // Add all the buttons
         if ( this.options.buttons.length > 0 )
         {
-            var buttons_container = new Element('div', {'class': 'buttons clearfix'});
+            var buttons_container = new Element(
+                'div', {'class': 'buttons clearfix'}
+            );
 
             this.options.buttons.each(function(button)
             {
-                var div = new Element('div'   , {'class': 'button ' + button.name});
+                var div = new Element('div', {'class': 'button ' + button.name});
                 var btn = new Element('button', {text: button.label});
 
                 btn.addEvent('click', function()
@@ -183,8 +187,8 @@ Zen.Window = new Class(
             container.makeDraggable();
         }
 
-        // Set a negative margin so that the window can be aligned when positioning it
-        // absolute.
+        // Set a negative margin so that the window can be aligned when 
+        // positioning it absolute.
         var margin = this.options.width - ( this.options.width * 1.5 );
         container.setStyle('margin-left', margin);