Changeset 233 for ether_megapoli/trunk/web/resources/js/classesForJQuery/Slide.js

Timestamp:

10/24/11 18:22:18 (13 years ago)

Author:

vmipsl

Message:

Slides

File:

• ether_megapoli/trunk/web/resources/js/classesForJQuery/Slide.js (copied) (copied from ether_megapoli/trunk/web/resources/js/Select.js) (2 diffs)

ether_megapoli/trunk/web/resources/js/classesForJQuery/Slide.js

@@ -1 +1 @@
 //********************************************************
-// Class Select
-// Display a Select
+// Class Slide
+// Display a Slide
 //
-// obj objParam: {id, [parent], [specificClass], [maxOptionSize], [isDisable], [isDisplayed]}
-//    int objParam.id: id of the dom element
-//    [dom objParam.parent]: in which dom element to draw the button
-//    [str objParam.specificClass]
-//    [int objParam.maxOptionSize]: define a max number of line to display
-//    [int objParam.isDisable]: is the Select disable by default?
-//    [int objParam.isDisplayed]: is the Select opened by default?
-//
-// Public functions
-//    Select.getValue
-//    Select.getName
-//    Select.disable
-//    Select.enable
-//    Select.add
-//    Select.remove
-//    Select.clear
-//    Select.select
-//    Select.selectFirst
+// use jQuery
 //********************************************************
 
-var Select = Class.create( {
+var Slide = Class.create( {
 
     // Public functions ********************************************************
@@ -30 +13 @@
     {
         // Param
-        this.id = objectParameter.id;
         this.parent = objectParameter.parent ? objectParameter.parent : document.body;
-        this.isDisplayed = (true == objectParameter.isDisplayed) ? true : false;
-        this.isDisable = (true == objectParameter.isDisable) ? true : false;
-        this.maxOptionSize = objectParameter.maxOptionSize ? objectParameter.maxOptionSize : 0;
-        this.indexOption = 0;
-        this.isHover = false;
-        this.arrayOptions = $A();
-        this.className = objectParameter.className ? "select_container " + objectParameter.className : "select_container";
-        this.classNameOption = objectParameter.classNameOption ? "select_choicelist " + objectParameter.classNameOption : "select_choicelist";
+        this.contentId = objectParameter.contentId;
+        this.buttonId = objectParameter.buttonId;
+        this.specificContentClass = objectParameter.specificContentClass ? objectParameter.specificContentClass : false;
+        this.specificButtonClass = objectParameter.specificButtonClass ? objectParameter.specificButtonClass : false;
+        this.timeToSlide = objectParameter.timeToSlide ? objectParameter.timeToSlide : 500;
+        this.contentSlide = objectParameter.contentSlide ? objectParameter.contentSlide : false;
+        this.contentButton = objectParameter.contentButton;
+        this.isIndexToChange = objectParameter.isIndexToChange ? objectParameter.isIndexToChange : false;
+        this.zIndex = this.parent.css( "z-index" );
 
-        // Select div
-        this.divSelect = document.createElement( "div" );
-        this.divSelect.id = this.id;
-        this.divSelect.className = this.className;
+        // Content div
+        this.divSlideContent = $( document.createElement( "div" ) );
+        this.divSlideContent.attr( {id:this.contentId, class:"containerSlideContent"} );
+        if( this.specificContentClass )
+            this.divSlideContent.addClass( this.specificContentClass );
+        if( this.contentId )
+            this.divSlideContent.html( this.contentSlide );
+        this.parent.append( this.divSlideContent );
 
-        this.divSelectLeft = document.createElement( "div" );
-        this.divSelectLeft.className = "select_selectLeft";
-        this.divSelect.appendChild( this.divSelectLeft );
-
-        this.divSelectMiddle = document.createElement( "div" );
-        this.divSelectMiddle.className = "select_selectMiddle";
-        this.divSelect.appendChild( this.divSelectMiddle );
-
-        this.divSelectRight = document.createElement( "div" );
-        this.divSelectRight.className = "select_selectRight";
-        this.divSelect.appendChild( this.divSelectRight );
-
-        this.parent.appendChild( this.divSelect );
-
-        // Options div
-        this.divOption = document.createElement( "div" );
-        this.divSelect.id = this.id;
-        this.divOption.className = this.classNameOption;
-        this.parent.appendChild( this.divOption );
-
-        Event.observe( this.divSelect, "mouseup", this.toggleOption.bindAsEventListener( this ) );
-        Event.observe( document.body, "mousedown", this.hideOption.bindAsEventListener( this ) );
-        Event.observe( this.divSelect, 'mouseover', this.onMouseHover.bindAsEventListener( this ) );
-        Event.observe( this.divSelect, 'mouseout', this.onMouseOut.bindAsEventListener( this ) );
-        Event.observe( this.divOption, 'mouseover', this.onMouseHover.bindAsEventListener( this ) );
-        Event.observe( this.divOption, 'mouseout', this.onMouseOut.bindAsEventListener( this ) );
-
-        if( this.isDisplayed )
-            this.showOption();
-
-        if( this.isDisable )
-            this.hideOption();
+        // Button div
+        this.divSlideButton = $( document.createElement( "div" ) );
+        this.divSlideButton.attr( {id:this.buttonId} );
+        this.divSlideButton.attr( {id:this.buttonId, class:"containerSlideButton"} );
+        if( this.specificButtonClass )
+            this.divSlideButton.addClass( this.specificButtonClass );
+        this.divSlideButton.append( this.contentButton );
+        this.divSlideButton.bind( "click", jQuery.proxy( this.onClickButton, this ) );
+        this.parent.append( this.divSlideButton );
     },
 
-    getName: function()
+    getContent: function()
     {
-        return this.itemName;
+        return this.divSlideContent.html();
     },
 
-    getValue: function()
+    setContent: function( newContent )
     {
-        return this.itemValue;
+        this.divSlideContent.html( newContent );
     },
 
-    getSize: function()
+    isContentVisible: function()
     {
-      return this.arrayOptions.size();
-    },
-
-    // private
-    toggleOption:function()
-    {
-        if( this.isDisplayed )
-        {
-            this.isHover = false;
-            this.hideOption();
-        }
-        else
-            this.showOption();
-    },
-
-    // private
-    showOption:function()
-    {
-        if( this.isDisable )
-            return;
-
-        this.isDisplayed = true;
-        this.displayOptions();
-        this.divOption.style.display = "block";
-    },
-
-    // private
-    hideOption: function()
-    {
-        if( this.isHover )
-            return;
-
-        this.isDisplayed = false;
-        this.divOption.style.display = "none";
+        return (this.divSlideContent.css( "display" ) == "block");
     },
 
     // public
-    disable: function()
+    onClickButton: function()
     {
-        this.isDisable = true;
-        this.divSelect.addClassName( "disable" );
-        this.hideOption();
-    },
+        if( this.isIndexToChange )
+            if( this.isContentVisible() )
+                this.parent.css( "z-index", this.zIndex );
+            else
+                this.parent.css( "z-index", 100 );
 
-    // public
-    enable: function()
-    {
-        this.isDisable = false;
-        this.divSelect.removeClassName( "disable" );
-    },
-
-    // public
-    /**
-     * This method indicates if the itemValue is already in the array
-     */
-    content: function( itemValue )
-    {
-        var resu = false;
-        this.arrayOptions.each( function( divOption )
-        {
-            if( divOption.itemValue == itemValue )
-            {
-                resu = true;
-                throw $break;
-            }
-        }.bind( this ) );
-        return resu;
-    },
-
-    // public
-    add: function( itemValue, itemName, callback )
-    {
-        var divOption = document.createElement( "div" );
-        divOption.className = "select_item_middle";
-        divOption.innerHTML = itemName;
-        divOption.itemName = itemName;
-        divOption.itemValue = itemValue;
-        divOption.callback = callback;
-        this.divOption.appendChild( divOption );
-
-        Event.observe( divOption, 'click', this.onOptionClick.bind( this, divOption ) );
-
-        this.arrayOptions.push( divOption );
-    },
-
-    // public
-    remove: function( itemValue )
-    {
-        this.arrayOptions.each( function( divOption )
-        {
-            if( divOption.itemValue == itemValue )
-            {
-                this.divOption.removeChild( divOption );
-                this.arrayOptions = this.arrayOptions.without( divOption );
-                throw $break;
-            }
-        }.bind( this ) );
-    },
-
-    // public
-    clear: function()
-    {
-        this.arrayOptions.each( function( divOption )
-        {
-            this.divOption.removeChild( divOption );
-            this.arrayOptions = this.arrayOptions.without( divOption );
-        }.bind( this ) );
-    },
-
-    // public
-    /**
-     * This method changes only the content of the divSelect without add the item to the array
-     * @param itemValue
-     * @param itemName
-     * @param callback
-     */
-    changeSelectMiddle: function( itemValue, itemName, callback )
-    {
-        this.add( itemValue, itemName, callback );
-        this.select( itemValue, callback );
-        this.remove( itemValue );
-    },
-
-    // public
-    // @itemValue : code of the selected line
-    // @ execute : true / false. Execute the callback.
-    select: function( itemValue, execute )
-    {
-        this.arrayOptions.each( function( divOption )
-        {
-            if( divOption.itemValue == itemValue )
-            {
-                this.selectOption( divOption );
-                if( execute && undefined != divOption.callback )
-                    divOption.callback( divOption.itemValue );
-                throw $break;
-            }
-        }.bind( this ) );
-    },
-
-    // public
-    // @ execute : true / false. Execute the callback.
-    selectFirst: function( execute )
-    {
-        var divOption = this.arrayOptions.first();
-        if( undefined == divOption )
-            return;
-
-        this.selectOption( divOption );
-        if( execute && undefined != divOption.callback )
-            divOption.callback( divOption.itemValue );
-    },
-
-    // private
-    selectOption: function( divOption )
-    {
-        this.itemName = divOption.itemName;
-        this.itemValue = divOption.itemValue;
-        this.divSelectMiddle.innerHTML = divOption.itemName;
-    },
-
-    // private
-    onOptionClick: function( divOption )
-    {
-        this.isHover = false;
-        this.hideOption();
-        this.select( divOption.itemValue, true );
-        if( undefined != divOption.callback )
-            divOption.callback( divOption.itemValue );
-    },
-
-    // private
-    onMouseHover: function()
-    {
-        this.isHover = true;
-    },
-
-    // private
-    onMouseOut: function()
-    {
-        this.isHover = false;
-    },
-
-    // private
-    displayOptions: function()
-    {
-        var fromOption = this.indexOption;
-        var toOption = this.indexOption + this.maxOptionSize - 1;
-        for( var i = 0; i < this.arrayOptions.size(); i++ )
-        {
-            if( 0 == this.maxOptionSize )
-                this.arrayOptions[i].style.display = "";
-            else if( i >= fromOption && i <= toOption )
-                this.arrayOptions[i].style.display = "";
-            else
-                this.arrayOptions[i].style.display = "none";
-        }
+        this.divSlideContent.animate( {width:"toggle"}, this.timeToSlide );
     }
 } );