Changeset 593 for ether_statistics/web/resources

Timestamp:

10/12/12 16:38:48 (12 years ago)

Author:

vmipsl

Message:

slides

Location:

ether_statistics/web/resources

Files:

• css/statistics.css (modified) (6 diffs)
• js/classesForJQuery/DragSlide.js (copied) (copied from ether_statistics/web/resources/js/classesForJQuery/Slide.js) (3 diffs)

ether_statistics/web/resources/css/statistics.css

@@ -108 +108 @@
 }
 
+#title {
+    position: relative;
+    top: 17px;
+    left: 3px;
+}
+
 #home, #mail, #login {
     padding: 15px 0 0 23px;
@@ -116 +122 @@
     padding: 21px 0 0 28px;
     width: 62px;
+    position: relative;
+    top: 23px;
+    left: 17px;
+}
+
+#mail {
+    position: relative;
+    top: -15px;
+    left: 20px;
 }
 
 #copy {
     position: absolute;
-    top: 492px;
-    left: 800px;
+    top: 500px;
+    left: 773px;
 }
 
@@ -140 +155 @@
     float: left;
     margin-right: 10px;
+    top: 41px;
+    left: 4px;
 }
 
@@ -146 +163 @@
     top: 0;
     left: 0;
-    z-index: 1;
 }
 
@@ -153 +169 @@
     top: 21px;
     left: 25px;
-    z-index: 2;
 }
 
@@ -159 +174 @@
     visibility: hidden;
     position: absolute;
-    z-index: 2;
 }
 

ether_statistics/web/resources/js/classesForJQuery/DragSlide.js

@@ -1 +1 @@
 //*************************************************************************
-// Class Slide
-// Display a Slide
+// Class DragSlide
+// Display a draggable slide
 //
 // use jQuery
@@ -8 +8 @@
 //*************************************************************************
 
-var Slide = Class.create( {
+var DragSlide = Class.create( {
 
     initialize: function( objectParameter )
@@ -14 +14 @@
         // Param
         this.parent = objectParameter.parent ? objectParameter.parent : document.body;
+        this.titleId = objectParameter.titleId;
         this.contentId = objectParameter.contentId;
-        this.buttonId = objectParameter.buttonId;
+        this.width = objectParameter.width;
+        this.height = objectParameter.height;
+        this.top = objectParameter.top;
+        this.left = objectParameter.left;
+        this.specificClass = objectParameter.specificClass;
+        this.specificTitleClass = objectParameter.specificTitleClass ? objectParameter.specificTitleClass : false;
         this.specificContentClass = objectParameter.specificContentClass ? objectParameter.specificContentClass : false;
-        this.specificButtonClass = objectParameter.specificButtonClass ? objectParameter.specificButtonClass : false;
-        this.timeToSlide = objectParameter.timeToSlide ? objectParameter.timeToSlide : 1000;
+        this.title = objectParameter.title;
         this.contentSlide = objectParameter.contentSlide ? objectParameter.contentSlide : false;
         this.contentPageSlide = objectParameter.contentPageSlide ? objectParameter.contentPageSlide : false;
-        this.contentButton = objectParameter.contentButton;
         this.isIndexToChange = objectParameter.isIndexToChange ? objectParameter.isIndexToChange : false;
-        this.zIndex = this.parent.css( "z-index" );
 
-        // Content div
-        this.divSlideContent = $( document.createElement( "div" ) );
-        this.divSlideContent.attr( {id:this.contentId, class:"containerSlideContent"} );
+        this.divContainer = $( document.createElement( "div" ) );
+        if( this.specificClass )
+            this.divContainer.addClass( this.specificClass );
+        this.divContainer.attr( {id:this.id, style:"width:" + this.width + "px; height:" + this.height + "px; top:" + this.top + "; left:" + this.left} );
+
+        // Title
+        this.divTitle = $( document.createElement( "div" ) );
+        if( this.specificTitleClass )
+            this.divTitle.addClass( this.specificTitleClass );
+        this.divTitle.html( this.title );
+        this.divTitle.attr( {style:"width:" + (this.width - 7) + "px"} );
+        this.divContainer.append( this.divTitle );
+
+        // Content
+        this.divContent = $( document.createElement( "div" ) );
         if( this.specificContentClass )
-            this.divSlideContent.addClass( this.specificContentClass );
-        if( this.contentId )
-            this.divSlideContent.html( this.contentSlide );
-        this.parent.append( this.divSlideContent );
+            this.divContent.addClass( this.specificContentClass );
+        this.divContent.html( this.content );
+        this.divContainer.append( this.divContent );
 
-        // 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 );
+        this.parent.append( this.divContainer );
+
+        this.divContainer.draggable();
+        this.divContainer.resizable();
+//        this.divContainer.dblclick();
+        this.divTitle.dblclick( jQuery.proxy( this.onDbClickTitle, this ) );
+        this.divContainer.resize( jQuery.proxy( this.onResizeContainer, this ) );
     },
 
     getContent: function()
     {
-        return this.divSlideContent.html();
+        return this.divContent.html();
     },
 
     setContent: function( newContent )
     {
-        this.divSlideContent.html( newContent );
+        this.divContent.html( newContent );
     },
 
     isContentVisible: function()
     {
-        return (this.divSlideContent.css( "display" ) == "block");
+        return (this.divContent.css( "display" ) == "block");
     },
 
     // public
-    onClickButton: function()
+    onDbClickTitle: function()
     {
-        if( this.isIndexToChange && !this.isContentVisible() )
-            this.parent.css( "z-index", 100 );
+        if( this.width == this.divContainer.width() )
+            this.enlargeContainer();
+        else
+            this.reduceContainer();
+    },
 
-        this.divSlideContent.animate( {width:"toggle"}, this.timeToSlide, jQuery.proxy( function()
+    enlargeContainer: function()
+    {
+        this.divContainer.animate( {
+            height:'500px',
+            width:'500px'
+        }, 1000, function()
         {
-            if( this.isIndexToChange && !this.isContentVisible() )
-                this.parent.css( "z-index", this.zIndex );
-        }, this ) );
+        } );
+        this.divTitle.animate( {
+            width:'493px'
+        }, 1000, function()
+        {
+        } );
+    },
 
-        if( this.contentPageSlide )
-            this.divSlideContent.load( this.contentPageSlide );
+    reduceContainer: function()
+    {
+        this.divContainer.animate( {
+            height:this.height + 'px',
+            width:this.width + 'px'
+        }, 1000, function()
+        {
+        } );
+        this.divTitle.animate( {
+            width:(this.width - 7) + 'px'
+        }, 1000, function()
+        {
+        } );
+    },
+
+    onResizeContainer: function()
+    {
+        var widthTitle = this.divContainer.width() - 7;
+        this.divTitle.width( widthTitle );
     }
 } );