Skip to content

Commit

Permalink
Implement and document command API. Closes #5.
Browse files Browse the repository at this point in the history
  • Loading branch information
Hilton Janfield committed Sep 13, 2015
1 parent 10f5d5c commit 71a81e4
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 10 deletions.
112 changes: 103 additions & 9 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ <h4>#demoThreeB</h4>

<!-- Example code display. -->

<!-- HTML generated using hilite.me and slightly modified by hand -->
<!-- HTML generated using hilite.me and slightly modified by hand -->
<pre id="code" class="codesample"><span style="color: #007700">&lt;div</span> <span
style="color: #0000CC">id=</span><span style="background-color: #fff0f0">&quot;demoOne&quot;</span><span
style="color: #007700">&gt;</span>
Expand Down Expand Up @@ -246,10 +246,12 @@ <h4>#demoThreeB</h4>
style="color: #333333">:</span> <span style="background-color: #fff0f0">false</span>});
$(<span style="background-color: #fff0f0">&#39;#demoOneB&#39;</span>).enhsplitter();
$(<span style="background-color: #fff0f0">&#39;#demoThree&#39;</span>).enhsplitter({handle<span
style="color: #333333">:</span> <span style="background-color: #fff0f0">&#39;bar&#39;</span>, position<span
style="color: #333333">:</span> <span
style="background-color: #fff0f0">&#39;bar&#39;</span>, position<span
style="color: #333333">:</span> <span
style="background-color: #fff0f0">150</span>, lowerLimit<span
style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">0</span>, upperLimit<span
style="color: #333333">:</span> <span
style="color: #0000DD; font-weight: bold">0</span>, upperLimit<span
style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">150</span>, fixed<span
style="color: #333333">:</span> <span style="color: #0000DD; font-weight: bold">true</span>});
});
Expand Down Expand Up @@ -335,9 +337,11 @@ <h1>Options</h1>
</p>

<ul>
<li><code>minSize</code> is an alias to set both <code>leftMinSize</code> and <code>rightMinSize</code>.</li>
<li><code>minSize</code> is an alias to set both <code>leftMinSize</code> and <code>rightMinSize</code>.
</li>
<li><code>topMinSize</code> and <code>bottomMinSize</code> are internally an alias for
<code>leftMinSize</code> and <code>rightMinSize</code> respectively.</li>
<code>leftMinSize</code> and <code>rightMinSize</code> respectively.
</li>
</ul>
</dd>

Expand All @@ -351,9 +355,11 @@ <h1>Options</h1>
</p>

<ul>
<li><code>maxSize</code> is an alias to set both <code>leftMaxSize</code> and <code>rightMaxSize</code>.</li>
<li><code>maxSize</code> is an alias to set both <code>leftMaxSize</code> and <code>rightMaxSize</code>.
</li>
<li><code>topMaxSize</code> and <code>bottomMaxSize</code> are internally an alias for
<code>leftMaxSize</code> and <code>rightMaxSize</code> respectively.</li>
<code>leftMaxSize</code> and <code>rightMaxSize</code> respectively.
</li>
</ul>
</dd>

Expand Down Expand Up @@ -383,7 +389,7 @@ <h1>Options</h1>

<dt>handle</dt>
<dd>
<code>['default'|'block'|'largeblock'|'none'|&lt;user-defined&gt;]</code>
<code>['default'|'bar'|'block'|'none'|&lt;user-defined&gt;]</code>
<code class="default">Default: 'default'</code>

<p>
Expand All @@ -394,7 +400,8 @@ <h1>Options</h1>
<li><code>'bar'</code> draws a narrow grey bar, as shown in the third example above.</li>
<li><code>'block'</code> draws a wide grey block that fills the width of the splitter.</li>
<li><code>'none'</code> hides the handle completely, disabling it. This effect is also achieved
when setting <code>{invisible: true}</code>; it is not necessary to set both.</li>
when setting <code>{invisible: true}</code>; it is not necessary to set both.
</li>
<li>
<code>&lt;user-defined&gt;</code> - Identifier for any CSS class you create. By adding new
<code>.splitter-handle-</code> classes (see the CSS file), you can create custom styles without
Expand Down Expand Up @@ -440,9 +447,11 @@ <h1>Options</h1>
<p>
Specifies the height of the container.
</p>

<p>
Any CSS value can be used; numbers with no suffix will be treated as pixel values.
</p>

<p>
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.
Expand All @@ -459,6 +468,7 @@ <h1>Options</h1>
without custom CSS. Ideal when paired with <code>{invisible: true}</code>, also useful for increasing
the splitter size on mobile sites (for easier use on touch devices).
</p>

<p>
Any CSS value can be used; numbers with no suffix will be treated as pixel values.
</p>
Expand All @@ -470,6 +480,7 @@ <h1>Options</h1>
<code class="default">Default: $.noop</code>

<p>Event handler called when a user starts dragging a splitter.</p>

<p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
</dd>

Expand All @@ -479,6 +490,7 @@ <h1>Options</h1>
<code class="default">Default: $.noop</code>

<p>Event handler called when a user stops dragging a splitter.</p>

<p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
</dd>

Expand All @@ -488,9 +500,91 @@ <h1>Options</h1>
<code class="default">Default: $.noop</code>

<p>Event handler called after a user moves a splitter.</p>

<p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
</dd>
</dl>

<h1>Commands</h1>

<p>
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.
</p>
<dl>
<dt>move</dt>
<dd>
<code>.enhsplitter('move', [number (px)|string (px|%)])</code>

<p>
Changes the splitter position to the location specified (with range checks).
</p>
</dd>

<dt>refresh</dt>
<dd>
<code>.enhsplitter('refresh')</code>

<p>
Forces a refresh of the container size and splitter location (with range checks).
</p>
</dd>

<dt>reset</dt>
<dd>
<code>.enhsplitter('reset')</code>

<p>
Resets the splitter location to it's starting position.
</p>
</dd>

<dt>collapse</dt>
<dd>
<code>.enhsplitter('collapse')</code>

<p>
Collapses the splitter as if the collapse handle was clicked.
</p>
</dd>

<dt>uncollapse</dt>
<dd>
<code>.enhsplitter('uncollapse')</code>

<p>
Returns the splitter to it's pre-collapsed position.
</p>
</dd>

<dt>visible</dt>
<dd>
<code>.enhsplitter('visible', [true|false])</code>

<p>
Sets whether the splitter is visible or not. This is equivalent to (but opposite from) the
<code>invisible</code> option, visually hiding the splitter but leaving it usable.
</p>
</dd>

<dt>handle</dt>
<dd>
<code>.enhsplitter('handle', ['default'|'bar'|'block'|'none'|&lt;user-defined&gt;])</code>

<p>Equivalent to the <code>handle</code> option, changes the handle style on the fly.</p>
</dd>

<dt>destroy</dt>
<dd>
<code>.enhsplitter('destroy');</code>

<p>
Removes the splitter container, splitter panels, and splitter bar, returning the DOM to its previous layout.
</p>
</dd>

</dl>
</div>

</body>
Expand Down
78 changes: 77 additions & 1 deletion js/jquery.enhsplitter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -125,7 +199,9 @@
if (self.containerSize != newSize) {
self.containerSize = newSize;
self.setPosition(self.currentPosition);
return true;
}
return false;
},

setPosition: function (newPos) {
Expand Down

0 comments on commit 71a81e4

Please sign in to comment.