From 71a81e43b12ab559bf34014861ff5b265ada7dc0 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Sun, 13 Sep 2015 13:19:23 -0700 Subject: [PATCH] Implement and document command API. Closes #5. --- demo.html | 112 +++++++++++++++++++++++++++++++++++---- js/jquery.enhsplitter.js | 78 ++++++++++++++++++++++++++- 2 files changed, 180 insertions(+), 10 deletions(-) diff --git a/demo.html b/demo.html index 9d1bae3..a7ad2ae 100644 --- a/demo.html +++ b/demo.html @@ -204,7 +204,7 @@

#demoThreeB

- + 
<div id="demoOne">
@@ -246,10 +246,12 @@ 
#demoThreeB

                 style="color: #333333">: false});
         $('#demoOneB').enhsplitter();
         $('#demoThree').enhsplitter({handle: 'bar', position: 'bar', position: 150, lowerLimit: 0, upperLimit: 0, upperLimit: 150, fixed: true});
     });
@@ -335,9 +337,11 @@ 
Options

             

 
             
         
 
@@ -351,9 +355,11 @@ 
Options

             

 
             
         
 
@@ -383,7 +389,7 @@ 
Options

 
         
handle

         

-            ['default'|'block'|'largeblock'|'none'|<user-defined>]
+            ['default'|'bar'|'block'|'none'|<user-defined>]
             Default: 'default'
 
             

@@ -394,7 +400,8 @@ 
Options

                 
  • 'bar' draws a narrow grey bar, as shown in the third example above.
    • 
                 
  • 'block' draws a wide grey block that fills the width of the splitter.
    • 
                 
  • 'none' hides the handle completely, disabling it. This effect is also achieved
-                when setting {invisible: true};  it is not necessary to set both.
    • 
+                    when setting {invisible: true}; it is not necessary to set both.
+                
                 
  • 
                     <user-defined> - Identifier for any CSS class you create. By adding new
                     .splitter-handle- classes (see the CSS file), you can create custom styles without
@@ -440,9 +447,11 @@ 
    Options
    
             
    
                 Specifies the height of the container.
             
    
+
             
    
                 Any CSS value can be used; numbers with no suffix will be treated as pixel values.
             
    
+
             
    
                 In the instance that the both the container and parent heights have not been specified, the CSS on
                 the container will cause the height to become 0. If this happens, height will default to 10em.
@@ -459,6 +468,7 @@ 
    Options
    
                 without custom CSS. Ideal when paired with {invisible: true}, also useful for increasing
                 the splitter size on mobile sites (for easier use on touch devices).
             
    
+
             
    
                 Any CSS value can be used; numbers with no suffix will be treated as pixel values.
             
    
@@ -470,6 +480,7 @@ 
    Options
    
             Default: $.noop
 
             
    Event handler called when a user starts dragging a splitter.
    
+
             
    Parameters passed are the standard event handler data, and the .splitter_container object.
    
         
    • 
 
@@ -479,6 +490,7 @@ 
    Options
    
             Default: $.noop
 
             
    Event handler called when a user stops dragging a splitter.
    
+
             
    Parameters passed are the standard event handler data, and the .splitter_container object.
    
         
 
@@ -488,9 +500,91 @@ 
    Options
    
             Default: $.noop
 
             
    Event handler called after a user moves a splitter.
    
+
             
    Parameters passed are the standard event handler data, and the .splitter_container object.
    
         
     
+
+    
    Commands
    
+
+    
    
+        These commands can be used on splitters which have already been created.
+        They will have no effect on non-splitter objects. Attempting to use a command on a jQuery object which is not
+        a jquery.enhsplitter object will simply create an splitter with default options.
+    
    
+    
    
+        
    move
    
+        
    
+            .enhsplitter('move', [number (px)|string (px|%)])
+
+            
    
+                Changes the splitter position to the location specified (with range checks).
+            
    
+        
    
+
+        
    refresh
    
+        
    
+            .enhsplitter('refresh')
+
+            
    
+                Forces a refresh of the container size and splitter location (with range checks).
+            
    
+        
    
+
+        
    reset
    
+        
    
+            .enhsplitter('reset')
+
+            
    
+                Resets the splitter location to it's starting position.
+            
    
+        
    
+
+        
    collapse
    
+        
    
+            .enhsplitter('collapse')
+
+            
    
+                Collapses the splitter as if the collapse handle was clicked.
+            
    
+        
    
+
+        
    uncollapse
    
+        
    
+            .enhsplitter('uncollapse')
+
+            
    
+                Returns the splitter to it's pre-collapsed position.
+            
    
+        
    
+
+        
    visible
    
+        
    
+            .enhsplitter('visible', [true|false])
+
+            
    
+                Sets whether the splitter is visible or not. This is equivalent to (but opposite from) the
+                invisible option, visually hiding the splitter but leaving it usable.
+            
    
+        
    
+
+        
    handle
    
+        
    
+            .enhsplitter('handle', ['default'|'bar'|'block'|'none'|<user-defined>])
+
+            
    Equivalent to the handle option, changes the handle style on the fly.
    
+        
    
+
+        
    destroy
    
+        
    
+            .enhsplitter('destroy');
+
+            
    
+                Removes the splitter container, splitter panels, and splitter bar, returning the DOM to its previous layout.
+            
    
+        
    
+
+    
    
 
 
 
diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js
index 3f9d143..e51bcd8 100644
--- a/js/jquery.enhsplitter.js
+++ b/js/jquery.enhsplitter.js
@@ -25,9 +25,83 @@
     var dragStartPosition = null;
     var disableClick = false;
 
-    $.fn.enhsplitter = function (options) {
+    $.fn.enhsplitter = function (options, arg1) {
         var data = this.data('splitter');
         if (data) {
+            if (typeof options === 'string') {
+                currentSplitter = data;
+
+                if (options == 'move') {
+                    currentSplitter.setPosition(currentSplitter.translatePosition(arg1));
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'refresh') {
+                    if (!currentSplitter.refresh()) {
+                        currentSplitter.setPosition(currentSplitter.currentPosition);
+                    }
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'reset') {
+                    currentSplitter.setPosition(currentSplitter.translatePosition(currentSplitter.settings.position));
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'collapse') {
+                    currentSplitter.data('savedPosition', currentSplitter.currentPosition);
+                    if (currentSplitter.settings.collapseNormal) {
+                        currentSplitter.setPosition(currentSplitter.settings.leftMinSize);
+                    } else {
+                        currentSplitter.setPosition(currentSplitter.containerSize - currentSplitter.settings.rightMinSize);
+                    }
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'uncollapse') {
+                    var saved = currentSplitter.data('savedPosition');
+                    currentSplitter.setPosition(saved || currentSplitter.settings.position);
+                    currentSplitter.data('savedPosition', null);
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'visible') {
+                    currentSplitter.settings.invisible = !arg1;
+                    var splitterBar = currentSplitter.children('.splitter_bar');
+                    if (currentSplitter.settings.invisible) {
+                        splitterBar.addClass('splitter-invisible');
+                        currentSplitter.splitterSize = 0;
+                        currentSplitter.splitterSizeHalf = 0;
+                    } else {
+                        splitterBar.removeClass('splitter-invisible');
+                        currentSplitter.splitterSize = (currentSplitter.settings.vertical ? splitterBar.outerWidth() : splitterBar.outerHeight());
+                        currentSplitter.splitterSizeHalf = (currentSplitter.settings.vertical ? splitterBar.outerWidth() / 2 : splitterBar.outerHeight() / 2);
+                    }
+                    currentSplitter.setPosition(currentSplitter.currentPosition);
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'handle') {
+                    splitterBar = currentSplitter.children('.splitter_bar');
+                    if (!arg1) {
+                        arg1 = 'none';
+                    }
+                    $.each(splitterBar[0].classList, function (k, v) {
+                        if (v.indexOf('splitter-handle-') !== -1) {
+                            splitterBar.removeClass(v);
+                        }
+                    });
+                    splitterBar.addClass('splitter-handle-' + arg1)
+                    currentSplitter = null;
+                    return this;
+
+                } else if (options == 'remove') {
+                    currentSplitter.destroy();
+                    currentSplitter = null;
+                    return true;
+                }
+                return false;
+            }
             return data;
         }
 
@@ -125,7 +199,9 @@
                 if (self.containerSize != newSize) {
                     self.containerSize = newSize;
                     self.setPosition(self.currentPosition);
+                    return true;
                 }
+                return false;
             },
 
             setPosition: function (newPos) {