jquery.easywidgets.js

jquery插件。像iGOOGLE主页一样布局自己的网页。很好用

/*
   Copyrights (C) 2008 David Esperalta <[e-mail]>

   This file is part of Easy Widgets jQuery plugin for jQuery

   Easy Widgets is free software: you can redistribute it and/or
   modify it under the terms of the GNU General Public License as
   published by the Free Software Foundation, either version 3 of
   the License, or (at your option) any later version.

   Easy Widgets is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
   General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with Easy Widgets. If not, see <http://www.gnu.org/licenses/>.

*/

/**
 * Easy Widgets jQuery plugin 1.0 (beta)
 * 
 * David Esperalta - http://www.bitacora.davidesperalta.com/
 *
 * Please, use the included documentation and examples for
 * information about how use this plugin. Thanks very much!
 *
 * Tested in Firefox 3, Opera 9, IExplorer 7 and Safari 3
 *
 * I base my work on a tutorial writen by James Padolsey
 * http://nettuts.com/tutorials/javascript-ajax/inettuts/
 */

/**
 * Begin the plugin workspace
 */
(function($){

  /**
   * This is the main method of the plugin. Is called when Widgets HTML
   * markup, to execute the appropiate Javascript over it.
   * 
   * The method receive the settings argument with some options. If no
   * argument is receive the method use the default plugin settins.
   *
   * See the default settings for this method bello, in this same script.
   *
   * @access public
   * @param settings Array with the plugin options
   * @return Boolean True in every case
   */
  $.fn.EasyWidgets = function(settings){
    /**
     * Initialize some useful variables
     */
    var widgetCount = 0;
    var widgetsIds = new Array();
    /**
     * Recursively extend settings with default plugin settings
     * Put the settings in a short variable for we convenience
     */
    var s = $.extend(true, $.fn.EasyWidgets.defaults, settings);
    /**
     * By default the Widgets editbox are hidden.
     */
    $(s.selectors.editbox).hide();
    /**
     * Prepare the Widget header menu links container
     */
    var menuLinksHtm = '<span class="' + s.selectors
     .menuLinks.replace(/\./, '') + '"></span>';
    $(menuLinksHtm).appendTo(s.selectors.handle, this);
    /**
     * Iterate the Widgets found in the document, in other words
     * execute some actions for every Widget found in the document
     */
    $(s.selectors.widget).each(function(){
      /**
       * Increment the widget count variable
       */
      widgetCount++;
      /**
       * Initialize some other variables for we convenience in this
       * workspace. Is more easy (we think) use thisWidget variable
       * insted the $(this) instruction, specially whe use to much.
       */
      var cookieValue = '';
      var thisWidget = $(this);
      var thisWidgetId = thisWidget.attr('id');
      var thisMenuLinks = thisWidget.find(s.selectors.menuLinks);
      var thisWidgetContent = thisWidget.find(s.selectors.content);
      var useCookies = (thisWidgetId && s.behaviour.useCookies && $.cookie);
      /**
       * Begin the work
       */
      if(thisWidgetId){
        // Store the Widget ID, if anyone found
        widgetsIds[widgetCount] = thisWidgetId;
      }
      /**
       * Find if the user want to use cookies or what
       * In this case we can find if the Widget must
       * be positioned in certain Widgets column
       */
      if(useCookies && $.cookie(s.cookies.positionName)){
        // Get the positions cookie value
        cookieValue = $.cookie(s.cookies.positionName);
        // Find if the Widget ID is in the positions cookie
        if(cookieValue.indexOf(thisWidgetId) != -1){
          // Find the column to append the positioned Widget
          var matched = cookieValue.match(thisWidgetId+"=(.*)");
          if(matched){
            // Append theWidget to matched column
            thisWidget.appendTo('#'+matched[1]);
          }
        }
      }
      /**
       * In this case we can find if the Widget must
       * be closed (hidden) or not.
       */
      if(useCookies && $.cookie(s.cookies.closeName)){
        cookieValue = $.cookie(s.cookies.closeName);
        if(cookieValue.indexOf(thisWidgetId) != -1){
          thisWidget.hide();
        }
      }

      /**
       * We prepare now the collapse Widget link. This link
       * can be used to collapse and extend the Widget.
       */
      var collapseLink = '';
      /**
       * However, the collapse link only appear if user want
       * with the appropiate class in the Widget HTML markup
       */
      if(thisWidget.hasClass(s.options.collapsable)){

        /**
         * Take a look: we find if the user want to collapse
         * this Widget from the begin, using another CSS class
         *
         * We continue with the link creation, but, the text
         * link and the link behaviour change: can be use to
         * expand the Widget, not to collapse
         */
        if(thisWidget.hasClass(s.options.collapse)){
          collapseLink = WidgetLink(
            s.i18n.extendText,
            s.i18n.extendTitle,
            s.selectors.collapseLink
          );
          thisWidgetContent.hide();
        }else{
          collapseLink = WidgetLink(
            s.i18n.collapseText, 
            s.i18n.collapseTitle,
            s.selectors.collapseLink
          );
        }
        /**
         * Note how the use of cookies can overwrite this link behaviour
         * In other words, the Widget HTML markup can determine that the
         * Widget is collapse or not, but if use cookies the cookie value
         * can change this link behaviour
         */
        if(useCookies){
          cookieValue = $.cookie(s.cookies.collapseName);
          if(cookieValue){
            if(cookieValue.indexOf(thisWidgetId) != -1){
              collapseLink = WidgetLink(
                s.i18n.extendText,
                s.i18n.extendTitle,
                s.selectors.collapseLink
              );
              thisWidgetContent.hide();
            }
          }
        }
        /**
         * Above we prepare the link text, title and CSS class (determine
         * the link behaviour). Here we prepare the execution of this link,
         * in other words, handle the "onmousedown" and "onclick" link events.
         */
        $(collapseLink).mousedown(function(e){
          
          e.stopPropagation();

        }).click(function(){
          /**
           * Some variables for we convenience in this workspace
           */
          var thisLink = $(this);
          var canbeExtend = true;
          var canbeCollapse = true;
          var thisWidget = thisLink.parents(s.selectors.widget);
          var thisWidgetId = thisWidget.attr('id');
          var thisWidgetContent = thisWidget.find(s.selectors.content);
          var contentVisible = thisWidgetContent.css('display') != 'none';
          var useCookie = thisWidgetId && s.behaviour.useCookies && $.cookie;
          thisLink.blur();
          /**
           * Remember the workspace, here we handle the "onclick" event
           * of this link. So, the user use the link and expect something
           */
          if(contentVisible){
            // If Widget content is visible, user want to collapse the Widget
            if(s.callbacks.onCollapseQuery != null){
              // Call the appropiate plugin callback for this action
              canbeCollapse = s.callbacks.onCollapseQuery(thisLink, thisWidget);
            }
            // By default the Widget can be collapse, but the plugin callback
            // can change the behaviour using the collapse variable
            if(canbeCollapse){
              // If true, finally the Widget must be collapse
              thisWidgetContent.hide();
              thisLink.html(s.i18n.extendText);
              thisLink.attr('title', s.i18n.extendTitle);
              if(useCookie){
                // And prepare the collapse cookies if is use
                var cookieValue = $.cookie(s.cookies.collapseName);
                if(!cookieValue){
                  cookieValue = thisWidgetId;
                }else if(cookieValue.indexOf(thisWidgetId) == -1){
                  cookieValue = cookieValue+','+thisWidgetId;
                }
                $.cookie(s.cookies.collapseName, cookieValue, {
                  path: s.cookies.path,
                  secure: s.cookies.secure,
                  domain: s.cookies.domain,
                  expires: s.cookies.expires
                });
              }
              if(s.callbacks.onCollapse != null){
                s.callbacks.onCollapse(thisLink, thisWidget);
              }
            }
          /**
           * The Widget content is not visible, in other words, the user
           * want to expand the Widget
           */
          }else{
            if(s.callbacks.onExtendQuery != null){
              // Call the appropiate plugin callback
              canbeExtend = s.callbacks.onExtendQuery(thisLink, thisWidget);
            }
            // If finally the Widget can be extended, show it
            if(canbeExtend){
              thisLink.html(s.i18n.collapseText);
              thisLink.attr('title', s.i18n.collapseTitle);
              thisWidgetContent.show();
              if(useCookie){
                // And update the collapse cookie value, removing this Widget
                cookieValue = $.cookie(s.cookies.collapseName);
                if(cookieValue.indexOf(thisWidgetId) != -1){
                  cookieValue = cookieValue.replace(','+thisWidgetId, '');
                  cookieValue = cookieValue.replace(thisWidgetId+',', '');
                  cookieValue = cookieValue.replace(thisWidgetId, '');
                }
                $.cookie(s.cookies.collapseName, cookieValue, {
                  path: s.cookies.path,
                  secure: s.cookies.secure,
                  domain: s.cookies.domain,
                  expires: s.cookies.expires
                });
              }
              if(s.callbacks.onExtend != null){
                s.callbacks.onExtend(thisLink, thisWidget);
              }
            }
          }
          // Ever return false to evit default link behaviour
          return false;
        }).appendTo($(thisMenuLinks, this));
      }
      
      /**
       * We prepare now the edit Widget link. This link
       * can be used to show the Widget editbox.
       */
      var editLink = '';
      /**
       * However, the edit link only appear if user want
       * with the appropiate class in the Widget HTML markup
       */
      if(thisWidget.hasClass(s.options.editable)){
        /**
         * Text, title and behaviour for this link
         */
        editLink = WidgetLink(
          s.i18n.editText, 
          s.i18n.editTitle,
          s.selectors.editLink
        );
        /**
         * Another plugin options are the use of close edit CSS
         * class into the Widget editbox container. If the class
         * exists, attach a method for handle their "onclick" event
         */
        thisWidget.find(s.selectors.closeEdit).click(function(e){
          var thisLink = $(this);
          var thisWidget = thisLink.parents(s.selectors.widget);
          var thisEditLink = thisWidget.find(s.selectors.editLink);
          var thisEditbox = thisWidget.find(s.selectors.editbox);
          thisLink.blur();
          thisEditbox.hide();
          thisEditLink.html(s.i18n.editText);
          thisEditLink.attr('title', s.i18n.editTitle);
          // Ever return false to evit default link behaviour
          return false;
        });
        /**
         * Above we prepare the link text, title and CSS class (determine
         * the link behaviour). Here we prepare the execution of this link,
         * in other words, handle the "onmousedown" and "onclick" link events.
         */
        $(editLink).mousedown(function(e){

          e.stopPropagation();
          
        }).click(function(){
          /**
           * Again initialize some variables for this workspace
           */
          var canbeShow = true;
          var canbeHide = true;
          var thisLink = $(this);
          var thisWidget = thisLink.parents(s.selectors.widget);
          var thisEditbox = thisWidget.find(s.selectors.editbox);
          var thisEditboxVisible = thisEditbox.css('display') != 'none';
          thisLink.blur();
          /**
           * Remember the workspace, we handle here the "onclick" event
           * of the Widget, so, if the Widget editbox is visible, the user
           * want to hide (close) the Widget editbox.
           */
          if(thisEditboxVisible){
            if(s.callbacks.onCancelEditQuery != null){
              canbeHide = s.callbacks.onCancelEditQuery(thisLink, thisWidget);
            }
            if(canbeHide){
              thisEditbox.hide();
              thisLink.html(s.i18n.editText);
              thisLink.attr('title', s.i18n.editTitle);
              if(s.callbacks.onCancelEdit != null){
                s.callbacks.onCancelEdit(thisLink, thisWidget);
              }
            }
          /**
           * If the Widget editbox is not visible, the user want to view
           */
          }else{
            if(s.callbacks.onEditQuery != null){
              // A plugin callback have the opportunity of handle this
              canbeShow = s.callbacks.onEditQuery(thisLink, thisWidget);
            }
            if(canbeShow){
              // Ok, finally show the Widget edit box
              thisLink.html(s.i18n.cancelEditText);
              thisLink.attr('title', s.i18n.cancelEditTitle);
              thisEditbox.show();
              if(s.callbacks.onEdit != null){
                s.callbacks.onEdit(thisLink, thisWidget);
              }
            }
          }
          // Ever return false to evit default link behaviour
          return false;
        }).appendTo($(thisMenuLinks, this));
      }

      /**
       * Now is the turn of the remove Widget link. This link can be
       * use to close (hide) the Widget. Note that no link to show the
       * Widget is provided: when a Widget is hidden, is hidden.
       */
      var removeLink = '';
      /**
       * However, the remove link only appear if user want
       * with the appropiate class in the Widget HTML markup
       */
      if(thisWidget.hasClass(s.options.removable)){
        /**
         * Text, title and behaviour for this link
         */
        removeLink = WidgetLink(
          s.i18n.closeText, 
          s.i18n.closeTitle,
          s.selectors.closeLink
        );
        /**
         * After the text, title and behaviour for this link, is turn
         * for handle the "onmousedown" and "onclick" events
         */
        $(removeLink).mousedown(function(e){

          e.stopPropagation();

        }).click(function(){
          /**
           * Variables for we convenience in this workspace
           */
          var canbeRemove = true;