/* ========== */
/* = Panels = */
/* ========== */
+
+#panels {
+ position: absolute;
+ bottom: 0px; left: 0px; right: 0px; top: 100px;
+}
+
.panel-wrap {
overflow: hidden;
+ position: absolute; /* absolute to relation with #panels */
+ top: 0px;
+ bottom: 0px;
}
#left-panel-wrap {
- float: left;
- width: 8px;
+ left: 0px;
+ width: 8px; /* initial width */
+}
+
+#right-panel-wrap {
+ right: 0px;
+ width: auto;
+ left: 8px; /* initial width of the left panel */
+}
+
+/* contents */
+.panel-contents {
+ position: absolute;
+ top: 22px; left: 0px; right: 8px; bottom:0px;
}
+.panel-wrap.no-slider .panel-contents {
+ right: 0px;
+}
/* Toolbars with select box to change panel contents*/
.panel-toolbar {
- height: 20px;
+ position: absolute;
+ top: 0px; left:0px; right: 0px; height: 20px;
+
padding: 0 0 2px 0;
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
}
/* Slider between panels */
-#slider {
+.panel-wrap .panel-slider {
+ position: absolute;
+
+ top: 0px; bottom: 0px; right: 0px; width: 6px;
+
border-left: 1px solid #999;
border-right: 1px solid #999;
- background-color: #DDD;
- width: 8px;
- height: 100%;
- float: left;
}
-#slider:hover {
+.panel-wrap .panel-slider:hover {
background-color: #999;
cursor: col-resize;
}
--- /dev/null
+/**
+ * Cookie plugin
+ *
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+
+/**
+ * Create a cookie with the given name and value and other optional parameters.
+ *
+ * @example $.cookie('the_cookie', 'the_value');
+ * @desc Set the value of a cookie.
+ * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
+ * @desc Create a cookie with all available options.
+ * @example $.cookie('the_cookie', 'the_value');
+ * @desc Create a session cookie.
+ * @example $.cookie('the_cookie', null);
+ * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
+ * used when the cookie was set.
+ *
+ * @param String name The name of the cookie.
+ * @param String value The value of the cookie.
+ * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
+ * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
+ * If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
+ * If set to null or omitted, the cookie will be a session cookie and will not be retained
+ * when the the browser exits.
+ * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
+ * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
+ * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
+ * require a secure protocol (like HTTPS).
+ * @type undefined
+ *
+ * @name $.cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+
+/**
+ * Get the value of a cookie with the given name.
+ *
+ * @example $.cookie('the_cookie');
+ * @desc Get the value of a cookie.
+ *
+ * @param String name The name of the cookie.
+ * @return The value of the cookie.
+ * @type String
+ *
+ * @name $.cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+jQuery.cookie = function(name, value, options) {
+ if (typeof value != 'undefined') { // name and value given, set cookie
+ options = options || {};
+ if (value === null) {
+ value = '';
+ options.expires = -1;
+ }
+ var expires = '';
+ if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+ var date;
+ if (typeof options.expires == 'number') {
+ date = new Date();
+ date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+ } else {
+ date = options.expires;
+ }
+ expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
+ }
+ // CAUTION: Needed to parenthesize options.path and options.domain
+ // in the following expressions, otherwise they evaluate to undefined
+ // in the packed version for some reason...
+ var path = options.path ? '; path=' + (options.path) : '';
+ var domain = options.domain ? '; domain=' + (options.domain) : '';
+ var secure = options.secure ? '; secure' : '';
+ document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+ } else { // only name given, get cookie
+ var cookieValue = null;
+ if (document.cookie && document.cookie != '') {
+ var cookies = document.cookie.split(';');
+ for (var i = 0; i < cookies.length; i++) {
+ var cookie = jQuery.trim(cookies[i]);
+ // Does this cookie string begin with the name we want?
+ if (cookie.substring(0, name.length + 1) == (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ }
+};
\ No newline at end of file
--- /dev/null
+(function($){
+
+ /* behaviour */
+ $.hpanel = {
+ settings: {},
+ current_data: {},
+ resize_start: function(event, mydata) {
+ console.log('Panel ' + mydata.panel.attr('id') + ' started resizing');
+ $(document).bind('mousemove', mydata, $.hpanel.resize_changed).
+ bind('mouseup', mydata, $.hpanel.resize_stop);
+ return false;
+ },
+ resize_changed: function(event) {
+ var old_width = parseInt(event.data.panel.css('width'));
+ var delta = event.pageX + event.data.hotspot_x - old_width;
+
+ console.log('o: ' + (old_width) + ' pX: ' + event.pageX + ' hX: ' + event.data.hotspot_x);
+ console.log('next_panel: ' + $(event.data.panel.next_panel).attr('id'));
+ event.data.panel.css({'width': old_width + delta});
+
+ if(event.data.panel.next_panel) {
+ var left = parseInt(event.data.panel.next_panel.css('left'));
+ console.log('left: ' + left + ' new_left: ' + (left+delta) );
+ event.data.panel.next_panel.css('left', left+delta);
+ }
+
+ return false;
+ },
+ resize_stop: function(event) {
+ $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
+ $('body').css('cursor', 'auto');
+ }
+ };
+
+ $.fn.make_hpanel = function(options)
+ {
+ console.log('Making an hpanel out of "#' + $(this).attr('id') + '"');
+ var root = $(this)
+ var all_panels = $('.panel-wrap', root)
+ console.log('Panels: ' + all_panels);
+
+ var prev = null;
+
+ all_panels.each(function(i) {
+ var panel = $(all_panels[i]);
+ var handle = $('.panel-slider', panel)
+
+ panel.next_panel = null;
+ if (prev) prev.next_panel = panel;
+
+ /* attach the trigger */
+ handle.mousedown(function(event) {
+ var touch_data = {
+ panel_root: root,
+ panel: panel,
+ hotspot_x: event.pageX - handle.position().left
+ };
+ $(this).trigger('hpanel:panel-resize-start', touch_data);
+ return false;
+ });
+ prev = panel;
+ });
+
+ root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
+ };
+})(jQuery);
+
}
};
- $.fn.resizable = function(handle, options) {
+ $.fn.resizable = function(options) {
var settings = {
minWidth: 0,
maxWidth: $(window).width()
$.extend(settings, options);
var element = $(this);
+ var handle = $('.panel-slider', element)
- $(handle, element).mousedown(function(event) {
+ handle.mousedown(function(event) {
var position = element.position();
- $.resizable.settings = settings;
- $.resizable.element = {
+ console.log('Mouse down on position: ' + position);
+ /* from this point on, the panel should resize events */
+
+ /* $.resizable.settings = settings;
+ $.resizable.data = {
element: element,
width: parseInt(element.css('width')) || element[0].scrollWidth || 0,
mouseX: event.pageX,
- };
- $(document).mousemove($.resizable.drag).mouseup($.resizable.stop);
- $('body').css('cursor', 'col-resize');
- }).bind('dragstart', function(event) { event.preventDefault(); })
+ }; */
+
+ $(document).mousemove($.resizable.ondrag, element).mouseup($.resizable.stop, element);
+ /* $('body').css('cursor', 'col-resize'); */
+ });
+
+ /* stop drag events */
+ handle.bind('dragstart', function(event) { event.preventDefault(); })
.bind('drag', function(event) { event.preventDefault(); })
.bind('draggesture', function(event) { event.preventDefault(); });
};
// ========================
// = Resizable panels =
// ========================
- function resizePanels() {
- $('.panel').height($(window).height() - $('.panel').position().top);
- $('.panel-contents').height($(window).height() - $('.panel-contents').position().top);
- $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
- }
+// function resizePanels() {
+// // called on resize
+// $('.panel').height($(window).height() - $('.panel').position().top);
+// $('.panel-contents').height($(window).height() - $('.panel-contents').position().top);
+// $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
+// }
- $(window).resize(function() {
- resizePanels();
- })
-
- $('#left-panel-wrap').bind('resizable:stop', resizePanels)
- .resizable('#slider', {minWidth: 8});
-
- resizePanels();
+// $(window).resize(function() {
+// resizePanels();
+// })
+
+ $('#panels').make_hpanel({});
+
+// $('#left-panel-wrap').bind('resizable:stop', resizePanels)
+// .resizable({minWidth: 8});
+// resizePanels();
$('.panel-toolbar select').change(function() {
loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val())
<script src="/static/js/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.autoscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.wtooltip.js" type="text/javascript" charset="utf-8"></script>
- <script src="/static/js/jquery.resizable.js" type="text/javascript" charset="utf-8"></script>
+<!-- <script src="/static/js/jquery.resizable.js" type="text/javascript" charset="utf-8"></script> -->
+ <script src="/static/js/jquery.hpanel.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/panels.js" type="text/javascript" charset="utf-8"></script>
{% endblock extrahead %}
<div id="panels">
<div id="left-panel-wrap" class="panel-wrap">
<div id="left-panel" class="panel">
- <div id="slider" style="float: right"></div>
- <div style="margin-right: 10px">
+ <div>
<div id="left-panel-toolbar" class="panel-toolbar">
<label for="select-left-panel">Lewy panel:</label>
<select name="select-left-panel" id="select-left-panel">
<option value="{% url xmleditor_panel hash %}">Edytor XML</option>
<option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
- <option value="{% url gallery_panel hash %}">Galeria skanów</option>
- </select>
- </div>
- <div id="left-panel-contents" class="panel-contents">
+ <option value="{% url gallery_panel hash %}">Galeria skanów</option> </select>
</div>
+ <div id="left-panel-contents" class="panel-contents"></div>
</div>
+ <button class="panel-slider"> </button>
</div>
</div>
- <div id="right-panel-wrap" class="panel-wrap">
+ <div id="right-panel-wrap" class="panel-wrap no-slider">
<div id="right-panel" class="panel">
<div id="right-panel-toolbar" class="panel-toolbar">
<label for="select-right-panel">Prawy panel:</label>
fnp / redakcja.git / commitdiff