<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Splitter Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<link href="splitter.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="appLayout">
<div id="outerLayout">
<div id="innerLayout">
<div class="sidebar">
<div class="splitter-header">
<div class="splitter-title">Navigator</div>
</div>
<div class="splitter-center webkit-scrollbar">
<div id="navTree"></div>
</div>
<div class="splitter-footer"></div>
</div> <!--// .sidebar -->
<div class="content">
<div class="splitter-header">
<div class="splitter-title">Editor</div>
</div>
<div class="splitter-center">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
</div> <!--// #innerLayout -->
</div> <!--// #outerLayout -->
<div class="preview">
<div class="splitter-header">
<div class="splitter-title">Preview</div>
</div>
<div class="splitter-center">
<iframe src="http://plunker.no.de/about" class="preview-frame" frameborder="0" scrolling="auto" seamless></iframe>
</div>
</div>
</div>
<!--
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> --><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-transition.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-alert.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-modal.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-dropdown.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-scrollspy.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-tab.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-popover.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-button.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-collapse.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-carousel.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/gh-pages/assets/js/bootstrap-typeahead.js"></script>
<script src="splitter.js"></script>
<script src="script.js"></script>
</body>
</html>
.splitter-container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.splitter-panel {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.splitter-vertical,
.splitter-horizontal {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.splitter-vertical {
top: 0; bottom: 0;
cursor: ew-resize;
width: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAIAAAA4WjmaAAAAA3NCSVQICAjb4U/gAAAAIElEQVQImWM8cOCAvr4+EwwwMzPD2YcOHWJiwAsokwYAQV4FSAlcJZAAAAAASUVORK5CYII=);
}
.splitter-horizontal {
left: 0; right: 0;
cursor: ns-resize;
height: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAKCAIAAAAcmWhZAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWM8cOAAAwww/vv3D85hIZLz9+9fkvVcvHgRzgEAul4coy9jw2IAAAAASUVORK5CYII=);
}
.splitter-header {
height: 23px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAXCAIAAABF+LJYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEZJREFUeNocw4kNwCAMADHd/qtlF74QfqgaS+a9x//e68857L1Za/k5J2MMeu+01jAzaq2oqi+lkHMmpeRjjIQQEJFPgAEAIdRCSGGFwR8AAAAASUVORK5CYII=);
}
.splitter-center {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
overflow: auto;
}
.splitter-footer {
position: absolute;
height: 26px;
left: 0; right: 0; bottom: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAaCAIAAAD5ZqGGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABxJREFUCFtj2Hv8MsOLj78ZHr79QxK+/vw3KRgAe89HUPF0VZwAAAAASUVORK5CYII=);
}
.splitter-title {
line-height: 1em;
font-weight: bold;
padding: 4px 6px;
}
#appLayout {
left: 0;
right: 0;
top: 40px;
bottom: 0;
min-width: 600px;
position: absolute;
}
.preview-frame {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
$(function(){
$('#appLayout').splitter({
position: 250,
inverse: true,
toggleOn: 'click'
});
$('#innerLayout').splitter({
position: 250,
toggleOn: 'click'
});
// iframe fix
var iframe = $('.preview-frame');
$('#appLayout').find('.splitter-vertical').mousedown(function(e){
iframe.hide();
});
$('#appLayout').on('splitter:dragstop', function(e){
iframe.show();
});
});
/**
* Splitter.js
* Author: Amit Mendapara <mendapara.amit@gmail.com>
* Copyright (c) 2012 Axelor SAS (http://axelor.com);
* Licensed MIT, GPL
*/
(function($, undefined) {
var Splitter = function(element, options) {
this.element = $(element);
this.init(options);
};
Splitter.prototype = {
constructor: Splitter,
defaults: {
// splitter position
position: 200,
// toggle effect duration
duration: 200,
// whether to keep splitter on opposite side
inverse: false,
// live drag updates
live: true,
// orientation (vertical or horizontal),
orientation: 'vertical',
// toggle on event (if null then disable toggle)
toggleOn: 'dblclick'
},
init: function(options) {
var opts = this.opts = $.extend({}, this.defaults, options),
horz = this.horz = opts.orientation == 'horizontal',
css = 'splitter-' + (horz ? 'horizontal' : 'vertical'),
axis = horz ? 'y' : 'x';
this.element.addClass('splitter-container splitter-panel').css('overflow', 'hidden');
this.elemOne = this.element.children('div:first').addClass('splitter-panel');
this.elemTwo = this.element.children('div:last').addClass('splitter-panel');
this.elemOne.add(this.elemTwo).children('.splitter-center').each(function() {
var center = $(this);
if (center.prev().is('.splitter-header')) center.css('top', center.prev().outerHeight(true));
if (center.next().is('.splitter-footer')) center.css('bottom', center.next().outerHeight(true));
});
var dragger = this.element.find('> .' + css);
if (dragger.size() === 0) {
dragger = $('<div></div>').addClass(css).appendTo(this.element);
}
var pos = +opts.position,
side = opts.inverse === true ? (horz ? 'bottom' : 'right') : (horz ? 'top' : 'left'),
self = this;
var draggerOpts = {
axis: axis,
containment: 'parent'
};
if (!opts.live) {
draggerOpts.helper = 'clone';
}
this.dragger = dragger.draggable(draggerOpts)
.on('drag', function(event, ui) {
if (opts.live) {
self._adjust(true);
self._collapsed = false;
}
self.element.trigger('splitter:drag');
})
.on('dragstart', function(event, ui) {
self.element.trigger('splitter:dragstart');
})
.on('dragstop', function(event, ui) {
if (opts.live) {
self.element.trigger('splitter:dragstop');
} else {
var side = self.horz ? 'top' : 'left';
self._animate(side, ui.offset[side], function() {
self._collapsed = false;
self.element.trigger('splitter:dragstop');
});
}
});
this.dragger.css(side, pos);
this._adjust();
opts.evtHandler = $(window).resize(function() {
self._adjust();
});
var toggleOn = opts.toggleOn;
if (typeof toggleOn == 'string') {
dragger.on(toggleOn, function(e) {
self.toggle();
});
}
},
_animate: function(side, position, complete) {
var that = this,
effect = {},
params = {};
effect[side] = position;
params['duration'] = this.opts.duration || 200;
params['step'] = function() {
that._adjust(true);
};
params['complete'] = function() {
that._adjust(true);
if (complete) complete.call();
};
this.dragger.animate(effect, params);
},
toggle: function() {
var opts = this.opts,
side = this.horz ? (opts.inverse ? 'bottom' : 'top') : (opts.inverse ? 'right' : 'left');
if (this._collapsed != true) {
this._lastPosition = parseInt(this.dragger.css(side));
}
if (this._lastPosition == undefined) {
this._lastPosition = this.opts.position;
}
this._collapsed = !this._collapsed;
if (this._lastPosition < 1) {
this._lastPosition = this.opts.position;
this._collapsed = false;
}
var that = this,
pos = this._collapsed ? 0 : this._lastPosition;
this._animate(side, pos, function() {
that.element.trigger('splitter:dragstop');
});
},
_adjust: function(notify) {
var el = this.dragger,
that = this,
opts = this.opts,
sideProp = this.horz ? 'top' : 'left',
sizeProp = this.horz ? 'height' : 'width';
setTimeout(function() {
var pos = el.position(),
dim = el[sizeProp](),
x = Math.max(0, pos[sideProp]),
y = Math.max(dim, x + dim);
if (y === dim) {
el.css(sideProp, 0);
}
that.elemOne[sizeProp](x);
that.elemTwo.css(sideProp, y);
// handle inverse resize
if (opts.inverse && x > 0) {
el.css(that.horz ? 'bottom' : 'right', that.elemTwo[sizeProp]());
el.css(that.horz ? 'top' : 'left', '');
}
if (notify) {
$.event.trigger('splitter:adjust', {
element: that.element
});
}
});
},
destroy: function() {
$(window).unbind('resize', this.options.evtHandler);
}
};
$.fn.splitter = function(options) {
return this.each(function() {
var $this = $(this),
data = $this.data('splitter');
if (!data) $this.data('splitter', (data = new Splitter(this, options)));
if (typeof options == 'string') data[options]();
});
};
$.fn.splitter.Constructor = Splitter;
})(window.jQuery);