From: zuber Date: Thu, 24 Sep 2009 15:08:14 +0000 (+0200) Subject: Dodanie PanelContainerView oraz postawy HTMLView i XMLView. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/3bf45c83c84f9e7a1c5f2dafd64d812c987037e5?ds=sidebyside;hp=--cc Dodanie PanelContainerView oraz postawy HTMLView i XMLView. --- 3bf45c83c84f9e7a1c5f2dafd64d812c987037e5 diff --git a/project/static/css/master.css b/project/static/css/master.css index 256c09b3..6ac36967 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -345,6 +345,13 @@ text#commit-dialog-message { /* ======= */ /* = New = */ /* ======= */ +#splitview { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + .splitview-splitbar { width: 5px; border-left: 1px solid #999; diff --git a/project/static/js/app.js b/project/static/js/app.js index 702fb0cb..73ce1076 100644 --- a/project/static/js/app.js +++ b/project/static/js/app.js @@ -4,6 +4,7 @@ var panel_hooks; (function(){ + // Classes var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.Class = function(){}; Class.extend = function(prop) { @@ -34,6 +35,39 @@ var panel_hooks; 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() { @@ -64,7 +98,10 @@ var panel_hooks; })(); +var panels = []; $(function() { - var splitView = new SplitView('#panels'); + 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 f94d33c4..d9166cf6 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 de2d0bf8..282df773 100755 --- a/project/static/js/editor.ui.js +++ b/project/static/js/editor.ui.js @@ -3,7 +3,7 @@ */ Editor.prototype.setupUI = function() { // // set up the UI visually and attach callbacks -// var self = this; + var self = this; // // var resize_start = function(event, mydata) { // $(document).bind('mousemove', mydata, resize_changed). @@ -112,83 +112,81 @@ Editor.prototype.setupUI = function() { // self.savePanelOptions(); // }); // -// /* -// * Connect panel actions -// */ -// $('#panels > *.panel-wrap').each(function() { -// var panelWrap = $(this); -// // $.log('wrap: ', panelWrap); -// var panel = new Panel(panelWrap); -// panelWrap.data('ctrl', panel); // attach controllers to wraps -// panel.load($('.panel-toolbar select', panelWrap).val()); -// -// $('.panel-toolbar select', panelWrap).change(function() { -// var url = $(this).val(); -// panelWrap.data('ctrl').load(url); -// self.savePanelOptions(); -// }); -// -// $('.panel-toolbar button.refresh-button', panelWrap).click( -// function() { -// panel.refresh(); -// } ); -// -// self.rootDiv.bind('stopResize', function() { -// panel.callHook('toolbarResized'); -// }); -// }); -// -// $(document).bind('panel:contentChanged', function() { -// self.onContentChanged.apply(self, arguments) -// }); -// -// /* -// * Connect various buttons -// */ -// -// $('#toolbar-button-quick-save').click( function (event, data) { -// self.saveToBranch(); -// } ); -// -// $('#toolbar-button-save').click( function (event, data) { -// $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.saveToBranch)} ); -// } ); -// -// $('#toolbar-button-update').click( function (event, data) { -// if (self.updateUserBranch()) { -// // commit/update can be called only after proper, save -// // this means all panels are clean, and will get refreshed -// // do this only, when there are any changes to local branch -// self.refreshPanels(); -// } -// } ); -// -// /* COMMIT DIALOG */ -// $('#commit-dialog'). -// jqm({ -// modal: true, -// onShow: $.fbind(self, self.loadRelatedIssues) -// }); -// -// $('#toolbar-button-commit').click( function (event, data) { -// $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.sendMergeRequest)} ); -// } ); -// -// /* STATIC BINDS */ -// $('#commit-dialog-cancel-button').click(function() { -// $('#commit-dialog-error-empty-message').hide(); -// $('#commit-dialog').jqmHide(); -// }); -// -// -// /* SPLIT DIALOG */ -// $('#split-dialog').jqm({ -// modal: true, -// onShow: $.fbind(self, self.loadSplitDialog) -// }). -// jqmAddClose('button.dialog-close-button'); -// -// // $('#split-dialog'). + /* + * Connect panel actions + */ + $('#panels > *.panel-wrap').each(function() { + var panelWrap = $(this); + // $.log('wrap: ', panelWrap); + var panel = new Panel(panelWrap); + panelWrap.data('ctrl', panel); // attach controllers to wraps + panel.load($('.panel-toolbar select', panelWrap).val()); + + $('.panel-toolbar select', panelWrap).change(function() { + var url = $(this).val(); + panelWrap.data('ctrl').load(url); + self.savePanelOptions(); + }); + + $('.panel-toolbar button.refresh-button', panelWrap).click( + function() { + panel.refresh(); + } ); + + self.rootDiv.bind('stopResize', function() { + panel.callHook('toolbarResized'); + }); + }); + + $(document).bind('panel:contentChanged', function() { + self.onContentChanged.apply(self, arguments) + }); + + /* + * Connect various buttons + */ + + $('#toolbar-button-quick-save').click( function (event, data) { + self.saveToBranch(); + } ); + + $('#toolbar-button-save').click( function (event, data) { + $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.saveToBranch)} ); + } ); + + $('#toolbar-button-update').click( function (event, data) { + if (self.updateUserBranch()) { + // commit/update can be called only after proper, save + // this means all panels are clean, and will get refreshed + // do this only, when there are any changes to local branch + self.refreshPanels(); + } + } ); + + /* COMMIT DIALOG */ + $('#commit-dialog'). + jqm({ + modal: true, + onShow: $.fbind(self, self.loadRelatedIssues) + }); + + $('#toolbar-button-commit').click( function (event, data) { + $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.sendMergeRequest)} ); + } ); + + /* STATIC BINDS */ + $('#commit-dialog-cancel-button').click(function() { + $('#commit-dialog-error-empty-message').hide(); + $('#commit-dialog').jqmHide(); + }); + + + /* SPLIT DIALOG */ + $('#split-dialog').jqm({ + modal: true, + onShow: $.fbind(self, self.loadSplitDialog) + }). + jqmAddClose('button.dialog-close-button'); } 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 index d8c5e6bb..9d6dabd2 100644 --- a/project/static/js/views/split.js +++ b/project/static/js/views/split.js @@ -17,7 +17,7 @@ var SplitView = Class.extend({ position: 'absolute', // positioned inside splitter container 'z-index': 1, // splitbar is positioned above '-moz-outline-style': 'none', // don't show dotted outline - overflow: 'auto' + overflow: 'auto' }); this.leftView = $(this.views[0]); 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 428f3546..5848b0f5 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -12,9 +12,29 @@ - + + + + + + + {# JavaScript templates #} + + + {% endblock extrahead %} {% block extrabody %} @@ -57,31 +77,25 @@ {% endblock %} {% block maincontent %} -
- {% for n in panel_list %} -
-
-

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ {# #} + {#
#} +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+