From: zuber Date: Thu, 24 Sep 2009 20:04:58 +0000 (+0200) Subject: Merge branch 'master' into view-refactor X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/d3c74552a8f8509ff85cf956cf2b750d8387b683?hp=e49688b94d3f0f2e72efc2b66f77a5c148aa7ea2 Merge branch 'master' into view-refactor Conflicts: project/templates/explorer/editor.html --- diff --git a/project/static/css/master.css b/project/static/css/master.css index de799891..6ac36967 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -35,7 +35,6 @@ body { top: 2.4em; left: 0px; right: 0px; bottom: 0px; overflow: auto; background-color: white; - padding: 0.2em 1em; } ul { @@ -107,8 +106,8 @@ label { /* ========== */ #panels { - position: absolute; - bottom: 0px; left: 0px; right: 0px; top: 0px; + height: 100%; + width: 100%; } .panel-wrap { @@ -341,4 +340,22 @@ text#commit-dialog-message { #split-dialog .container-box fieldset { margin: 0.5em; -} \ No newline at end of file +} + +/* ======= */ +/* = New = */ +/* ======= */ +#splitview { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +.splitview-splitbar { + width: 5px; + border-left: 1px solid #999; + border-right: 1px solid #999; + height: 100%; + background-color: #CCC; +} diff --git a/project/static/js/app.js b/project/static/js/app.js new file mode 100644 index 00000000..73ce1076 --- /dev/null +++ b/project/static/js/app.js @@ -0,0 +1,107 @@ +/*global Class*/ +var editor; +var panel_hooks; + + +(function(){ + // Classes + var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; + this.Class = function(){}; + Class.extend = function(prop) { + var _super = this.prototype; + initializing = true; + var prototype = new this(); + initializing = false; + for (var name in prop) { + prototype[name] = typeof prop[name] == "function" && + typeof _super[name] == "function" && fnTest.test(prop[name]) ? + (function(name, fn){ + return function() { + var tmp = this._super; + this._super = _super[name]; + var ret = fn.apply(this, arguments); + this._super = tmp; + return ret; + }; + })(name, prop[name]) : + prop[name]; + } + function Class() { + if ( !initializing && this.init ) + this.init.apply(this, arguments); + } + Class.prototype = prototype; + Class.constructor = Class; + Class.extend = arguments.callee; + return Class; + }; + + // Templates + var cache = {}; + + this.render_template = function render_template(str, data){ + // Figure out if we're getting a template, or if we need to + // load the template - and be sure to cache the result. + var fn = !/^[\d\s-_]/.test(str) ? + cache[str] = cache[str] || + render_template(document.getElementById(str).innerHTML) : + + // Generate a reusable function that will serve as a template + // generator (and which will be cached). + new Function("obj", + "var p=[],print=function(){p.push.apply(p,arguments);};" + + + // Introduce the data as local variables using with(){} + "with(obj){p.push('" + + + // Convert the template into pure JavaScript + str + .replace(/[\r\t\n]/g, " ") + .split("<%").join("\t") + .replace(/((^|%>)[^\t]*)'/g, "$1\r") + .replace(/\t=(.*?)%>/g, "',$1,'") + .split("\t").join("');") + .split("%>").join("p.push('") + .split("\r").join("\\'") + + "');}return p.join('');"); + + // Provide some basic currying to the user + return data ? fn( data ) : fn; + }; +})(); + +(function() { + var slice = Array.prototype.slice; + + function update(array, args) { + var arrayLength = array.length, length = args.length; + while (length--) array[arrayLength + length] = args[length]; + return array; + }; + + function merge(array, args) { + array = slice.call(array, 0); + return update(array, args); + }; + + Function.prototype.bind = function(context) { + if (arguments.length < 2 && typeof arguments[0] === 'undefined') { + return this; + } + var __method = this; + var args = slice.call(arguments, 1); + return function() { + var a = merge(args, arguments); + return __method.apply(context, a); + } + } + +})(); + +var panels = []; + +$(function() { + var splitView = new SplitView('#splitview'); + var leftPanelView = new PanelContainerView('#left-panel-container'); + var rightPanelContainer = new PanelContainerView('#right-panel-container'); +}); diff --git a/project/static/js/editor.js b/project/static/js/editor.js index 94b4ca97..d81a7b06 100644 --- a/project/static/js/editor.js +++ b/project/static/js/editor.js @@ -322,30 +322,30 @@ Editor.prototype.loadConfig = function() { }; Editor.prototype.loadPanelOptions = function() { - var self = this; - var totalWidth = 0; - - $('.panel-wrap', self.rootDiv).each(function(index) { - var panelWidth = self.fileOptions.panels[index].ratio * self.rootDiv.width(); - if ($(this).hasClass('last-panel')) { - $(this).css({ - left: totalWidth, - right: 0 - }); - } else { - $(this).css({ - left: totalWidth, - width: panelWidth - }); - totalWidth += panelWidth; - } - $.log('panel:', this, $(this).css('left')); - $('.panel-toolbar option', this).each(function() { - if ($(this).attr('p:panel-name') == self.fileOptions.panels[index].name) { - $(this).parent('select').val($(this).attr('value')); - } - }); - }); + // var self = this; + // var totalWidth = 0; + // + // $('.panel-wrap', self.rootDiv).each(function(index) { + // var panelWidth = self.fileOptions.panels[index].ratio * self.rootDiv.width(); + // if ($(this).hasClass('last-panel')) { + // $(this).css({ + // left: totalWidth, + // right: 0 + // }); + // } else { + // $(this).css({ + // left: totalWidth, + // width: panelWidth + // }); + // totalWidth += panelWidth; + // } + // $.log('panel:', this, $(this).css('left')); + // $('.panel-toolbar option', this).each(function() { + // if ($(this).attr('p:panel-name') == self.fileOptions.panels[index].name) { + // $(this).parent('select').val($(this).attr('value')); + // } + // }); + // }); }; Editor.prototype.savePanelOptions = function() { diff --git a/project/static/js/editor.ui.js b/project/static/js/editor.ui.js index f66d977b..c8d47f66 100755 --- a/project/static/js/editor.ui.js +++ b/project/static/js/editor.ui.js @@ -2,116 +2,116 @@ * UI related Editor methods */ Editor.prototype.setupUI = function() { - // set up the UI visually and attach callbacks +// // set up the UI visually and attach callbacks var self = this; - - var resize_start = function(event, mydata) { - $(document).bind('mousemove', mydata, resize_changed). - bind('mouseup', mydata, resize_stop); - - $('.panel-overlay', mydata.root).css('display', 'block'); - return false; - } - var resize_changed = function(event) { - var old_width = parseInt(event.data.overlay.css('width')); - var delta = event.pageX + event.data.hotspot_x - old_width; - - if(old_width + delta < 12) delta = 12 - old_width; - if(old_width + delta > $(window).width()) - delta = $(window).width() - old_width; - - event.data.overlay.css({ - 'width': old_width + delta - }); - - if(event.data.overlay.next) { - var left = parseInt(event.data.overlay.next.css('left')); - event.data.overlay.next.css('left', left+delta); - } - - return false; - }; - - var resize_stop = function(event) { - $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop); - // $('.panel-content', event.data.root).css('display', 'block'); - var overlays = $('.panel-content-overlay', event.data.root); - $('.panel-content-overlay', event.data.root).each(function(i) { - if( $(this).data('panel').hasClass('last-panel') ) - $(this).data('panel').css({ - 'left': $(this).css('left'), - 'right': $(this).css('right') - }); - else - $(this).data('panel').css({ - 'left': $(this).css('left'), - 'width': $(this).css('width') - }); - }); - $('.panel-overlay', event.data.root).css('display', 'none'); - $(event.data.root).trigger('stopResize'); - }; - - /* - * Prepare panels (overlays & stuff) - */ - /* create an overlay */ - var panel_root = self.rootDiv; - var overlay_root = $("
"); - panel_root.append(overlay_root); - - var prev = null; - - $('*.panel-wrap', panel_root).each( function() - { - var panel = $(this); - var handle = $('.panel-slider', panel); - var overlay = $("
 
"); - overlay_root.append(overlay); - overlay.data('panel', panel); - overlay.data('next', null); - - if (prev) prev.next = overlay; - - if( panel.hasClass('last-panel') ) - { - overlay.css({ - 'left': panel.css('left'), - 'right': panel.css('right') - }); - } - else { - overlay.css({ - 'left': panel.css('left'), - 'width': panel.css('width') - }); - // $.log('Has handle: ' + panel.attr('id')); - overlay.append(handle.clone()); - /* attach the trigger */ - handle.mousedown(function(event) { - var touch_data = { - root: panel_root, - overlay: overlay, - hotspot_x: event.pageX - handle.position().left - }; - - $(this).trigger('hpanel:panel-resize-start', touch_data); - return false; - }); - $('.panel-content', panel).css('right', - (handle.outerWidth() || 10) + 'px'); - $('.panel-content-overlay', panel).css('right', - (handle.outerWidth() || 10) + 'px'); - }; - - prev = overlay; - }); - - panel_root.bind('hpanel:panel-resize-start', resize_start); - self.rootDiv.bind('stopResize', function() { - self.savePanelOptions(); - }); - +// +// var resize_start = function(event, mydata) { +// $(document).bind('mousemove', mydata, resize_changed). +// bind('mouseup', mydata, resize_stop); +// +// $('.panel-overlay', mydata.root).css('display', 'block'); +// return false; +// } +// var resize_changed = function(event) { +// var old_width = parseInt(event.data.overlay.css('width')); +// var delta = event.pageX + event.data.hotspot_x - old_width; +// +// if(old_width + delta < 12) delta = 12 - old_width; +// if(old_width + delta > $(window).width()) +// delta = $(window).width() - old_width; +// +// event.data.overlay.css({ +// 'width': old_width + delta +// }); +// +// if(event.data.overlay.next) { +// var left = parseInt(event.data.overlay.next.css('left')); +// event.data.overlay.next.css('left', left+delta); +// } +// +// return false; +// }; +// +// var resize_stop = function(event) { +// $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop); +// // $('.panel-content', event.data.root).css('display', 'block'); +// var overlays = $('.panel-content-overlay', event.data.root); +// $('.panel-content-overlay', event.data.root).each(function(i) { +// if( $(this).data('panel').hasClass('last-panel') ) +// $(this).data('panel').css({ +// 'left': $(this).css('left'), +// 'right': $(this).css('right') +// }); +// else +// $(this).data('panel').css({ +// 'left': $(this).css('left'), +// 'width': $(this).css('width') +// }); +// }); +// $('.panel-overlay', event.data.root).css('display', 'none'); +// $(event.data.root).trigger('stopResize'); +// }; +// +// /* +// * Prepare panels (overlays & stuff) +// */ +// /* create an overlay */ +// var panel_root = self.rootDiv; +// var overlay_root = $("
"); +// panel_root.append(overlay_root); +// +// var prev = null; +// +// $('*.panel-wrap', panel_root).each( function() +// { +// var panel = $(this); +// var handle = $('.panel-slider', panel); +// var overlay = $("
 
"); +// overlay_root.append(overlay); +// overlay.data('panel', panel); +// overlay.data('next', null); +// +// if (prev) prev.next = overlay; +// +// if( panel.hasClass('last-panel') ) +// { +// overlay.css({ +// 'left': panel.css('left'), +// 'right': panel.css('right') +// }); +// } +// else { +// overlay.css({ +// 'left': panel.css('left'), +// 'width': panel.css('width') +// }); +// // $.log('Has handle: ' + panel.attr('id')); +// overlay.append(handle.clone()); +// /* attach the trigger */ +// handle.mousedown(function(event) { +// var touch_data = { +// root: panel_root, +// overlay: overlay, +// hotspot_x: event.pageX - handle.position().left +// }; +// +// $(this).trigger('hpanel:panel-resize-start', touch_data); +// return false; +// }); +// $('.panel-content', panel).css('right', +// (handle.outerWidth() || 10) + 'px'); +// $('.panel-content-overlay', panel).css('right', +// (handle.outerWidth() || 10) + 'px'); +// }; +// +// prev = overlay; +// }); +// +// panel_root.bind('hpanel:panel-resize-start', resize_start); +// self.rootDiv.bind('stopResize', function() { +// self.savePanelOptions(); +// }); +// /* * Connect panel actions */ @@ -187,8 +187,6 @@ Editor.prototype.setupUI = function() { onShow: $.fbind(self, self.loadSplitDialog) }). jqmAddClose('button.dialog-close-button'); - -// $('#split-dialog'). } Editor.prototype.loadRelatedIssues = function(hash) diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js new file mode 100644 index 00000000..054b60ee --- /dev/null +++ b/project/static/js/views/html.js @@ -0,0 +1,18 @@ +/*global Class render_template panels */ +var HTMLView = Class.extend({ + element: null, + template: 'html-view-template', + + init: function(element, template) { + this.element = $(element); + this.template = template || this.template; + this.element.html(render_template(this.template, {})); + }, + + dispose: function() { + + } +}); + +// Register view +panels.push({name: 'html', klass: HTMLView}); \ No newline at end of file diff --git a/project/static/js/views/panel_container.js b/project/static/js/views/panel_container.js new file mode 100644 index 00000000..66683dd2 --- /dev/null +++ b/project/static/js/views/panel_container.js @@ -0,0 +1,28 @@ +/*globals Class render_template panels*/ + +var PanelContainerView = Class.extend({ + element: null, + template: 'panel-container-view-template', + contentView: null, + + init: function(element, template) { + this.element = $(element); + this.template = template || this.template; + + this.element.html(render_template(this.template, {panels: panels})); + $('select', this.element.get(0)).bind('change.panel-container-view', this.selectChanged.bind(this)); + }, + + selectChanged: function(event) { + var view = panels[$('select', this.element.get(0)).val()]; + var klass = view.klass; + console.log(view, klass); + this.contentView = new klass($('.content-view', this.element.get(0))); + console.log(this.contentView); + }, + + dispose: function() { + $('select', this.element.get(0)).unbind('change.panel-container-view'); + } +}); + diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js new file mode 100644 index 00000000..9d6dabd2 --- /dev/null +++ b/project/static/js/views/split.js @@ -0,0 +1,93 @@ +/*globals Class*/ + +// Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/ +var SplitView = Class.extend({ + splitbarClass: 'splitview-splitbar', + activeClass: 'splitview-active', + element: null, + zombie: null, + leftViewOffset: 0, + + // Cache + _splitbarWidth: 0, + + init: function(element) { + this.element = $(element).css('position', 'relative'); + this.views = $(">*", this.element[0]).css({ + position: 'absolute', // positioned inside splitter container + 'z-index': 1, // splitbar is positioned above + '-moz-outline-style': 'none', // don't show dotted outline + overflow: 'auto' + }); + + this.leftView = $(this.views[0]); + this.rightView = $(this.views[1]); + this.splitbar = $(this.views[2] || '
') + .insertAfter(this.leftView) + .css({ + position: 'absolute', + 'user-select': 'none', + '-webkit-user-select': 'none', + '-khtml-user-select': 'none', + '-moz-user-select': 'none', + 'z-index': 100 + }) + .attr('unselectable', 'on') + .addClass(this.splitbarClass) + .bind('mousedown.splitview', this.beginResize.bind(this)); + + this._splitbarWidth = this.splitbar.outerWidth(); + + // Solomon's algorithm ;-) + this.resplit(this.element.width() / 2); + }, + + beginResize: function(event) { + this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView); + this.views.css("-webkit-user-select", "none"); // Safari selects A/B text on a move + this.splitbar.addClass(this.activeClass); + this.leftViewOffset = this.leftView[0].offsetWidth - event.pageX; + + $(document) + .bind('mousemove.splitview', this.resizeChanged.bind(this)) + .bind('mouseup.splitview', this.endResize.bind(this)); + }, + + resizeChanged: function(event) { + var newPosition = event.pageX + this.leftViewOffset; + newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth)); + this.splitbar.css('left', newPosition); + }, + + endResize: function(event) { + var newPosition = event.pageX + this.leftViewOffset; + this.zombie.remove(); + this.zombie = null; + this.resplit(newPosition); + + $(document) + .unbind('mousemove.splitview') + .unbind('mouseup.splitview'); + }, + + resplit: function(newPosition) { + newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth)); + this.splitbar.css('left', newPosition); + this.leftView.css({ + left: 0, + width: newPosition + }); + this.rightView.css({ + left: newPosition + this._splitbarWidth, + width: this.element.width() - newPosition - this._splitbarWidth + }); + if (!$.browser.msie) { + this.views.trigger("resize"); + } + }, + + dispose: function() { + this.splitter.unbind('mousedown.splitview'); + } +}); + diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js new file mode 100644 index 00000000..529253b4 --- /dev/null +++ b/project/static/js/views/xml.js @@ -0,0 +1,18 @@ +/*global Class render_template panels */ +var XMLView = Class.extend({ + element: null, + template: 'xml-view-template', + + init: function(element, template) { + this.element = $(element); + this.template = template || this.template; + this.element.html(render_template(this.template, {})); + }, + + dispose: function() { + + } +}); + +// Register view +panels.push({name: 'xml', klass: XMLView}); diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index 22a60f60..e752286d 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -12,9 +12,33 @@ - + + + + + + + {# JavaScript templates #} + + + + + {% endblock extrahead %} {% block extrabody %} @@ -57,63 +81,41 @@ {% endblock %} {% block maincontent %} -
- {% for n in panel_list %} -
-
-

+

+
+
+
- - - - - - {# Wydruk #} - -

-
-
- -
- {% endfor %} -
-
-
- - -

Wiadomość nie może być pusta.

- -

- - -

-
-
+
+
+ + +

Wiadomość nie może być pusta.

+ +

+ + +

+
+
-
-
- - +
+
+ + +
{% endblock maincontent %}