/* ======= */
/* = New = */
/* ======= */
+#splitview {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
.splitview-splitbar {
width: 5px;
border-left: 1px solid #999;
(function(){
+ // Classes
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
this.Class = function(){};
Class.extend = function(prop) {
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 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');
});
};
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() {
*/\r
Editor.prototype.setupUI = function() {\r
// // set up the UI visually and attach callbacks\r
-// var self = this;\r
+ var self = this;\r
// \r
// var resize_start = function(event, mydata) {\r
// $(document).bind('mousemove', mydata, resize_changed).\r
// self.savePanelOptions(); \r
// });\r
// \r
-// /*\r
-// * Connect panel actions\r
-// */\r
-// $('#panels > *.panel-wrap').each(function() {\r
-// var panelWrap = $(this);\r
-// // $.log('wrap: ', panelWrap);\r
-// var panel = new Panel(panelWrap);\r
-// panelWrap.data('ctrl', panel); // attach controllers to wraps\r
-// panel.load($('.panel-toolbar select', panelWrap).val());\r
-// \r
-// $('.panel-toolbar select', panelWrap).change(function() {\r
-// var url = $(this).val();\r
-// panelWrap.data('ctrl').load(url);\r
-// self.savePanelOptions();\r
-// });\r
-// \r
-// $('.panel-toolbar button.refresh-button', panelWrap).click(\r
-// function() {\r
-// panel.refresh();\r
-// } );\r
-// \r
-// self.rootDiv.bind('stopResize', function() {\r
-// panel.callHook('toolbarResized');\r
-// });\r
-// });\r
-// \r
-// $(document).bind('panel:contentChanged', function() {\r
-// self.onContentChanged.apply(self, arguments)\r
-// }); \r
-// \r
-// /*\r
-// * Connect various buttons\r
-// */\r
-// \r
-// $('#toolbar-button-quick-save').click( function (event, data) {\r
-// self.saveToBranch();\r
-// } );\r
-// \r
-// $('#toolbar-button-save').click( function (event, data) {\r
-// $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.saveToBranch)} );\r
-// } );\r
-// \r
-// $('#toolbar-button-update').click( function (event, data) {\r
-// if (self.updateUserBranch()) {\r
-// // commit/update can be called only after proper, save\r
-// // this means all panels are clean, and will get refreshed\r
-// // do this only, when there are any changes to local branch\r
-// self.refreshPanels();\r
-// }\r
-// } );\r
-// \r
-// /* COMMIT DIALOG */\r
-// $('#commit-dialog').\r
-// jqm({\r
-// modal: true,\r
-// onShow: $.fbind(self, self.loadRelatedIssues) \r
-// });\r
-// \r
-// $('#toolbar-button-commit').click( function (event, data) {\r
-// $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.sendMergeRequest)} );\r
-// } );\r
-// \r
-// /* STATIC BINDS */\r
-// $('#commit-dialog-cancel-button').click(function() {\r
-// $('#commit-dialog-error-empty-message').hide();\r
-// $('#commit-dialog').jqmHide();\r
-// }); \r
-// \r
-// \r
-// /* SPLIT DIALOG */\r
-// $('#split-dialog').jqm({\r
-// modal: true,\r
-// onShow: $.fbind(self, self.loadSplitDialog)\r
-// }).\r
-// jqmAddClose('button.dialog-close-button');\r
-// \r
-// // $('#split-dialog'). \r
+ /*\r
+ * Connect panel actions\r
+ */\r
+ $('#panels > *.panel-wrap').each(function() {\r
+ var panelWrap = $(this);\r
+ // $.log('wrap: ', panelWrap);\r
+ var panel = new Panel(panelWrap);\r
+ panelWrap.data('ctrl', panel); // attach controllers to wraps\r
+ panel.load($('.panel-toolbar select', panelWrap).val());\r
+\r
+ $('.panel-toolbar select', panelWrap).change(function() {\r
+ var url = $(this).val();\r
+ panelWrap.data('ctrl').load(url);\r
+ self.savePanelOptions();\r
+ });\r
+\r
+ $('.panel-toolbar button.refresh-button', panelWrap).click(\r
+ function() {\r
+ panel.refresh();\r
+ } );\r
+\r
+ self.rootDiv.bind('stopResize', function() {\r
+ panel.callHook('toolbarResized');\r
+ });\r
+ });\r
+\r
+ $(document).bind('panel:contentChanged', function() {\r
+ self.onContentChanged.apply(self, arguments)\r
+ }); \r
+\r
+ /*\r
+ * Connect various buttons\r
+ */\r
+\r
+ $('#toolbar-button-quick-save').click( function (event, data) {\r
+ self.saveToBranch();\r
+ } );\r
+\r
+ $('#toolbar-button-save').click( function (event, data) {\r
+ $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.saveToBranch)} );\r
+ } );\r
+\r
+ $('#toolbar-button-update').click( function (event, data) {\r
+ if (self.updateUserBranch()) {\r
+ // commit/update can be called only after proper, save\r
+ // this means all panels are clean, and will get refreshed\r
+ // do this only, when there are any changes to local branch\r
+ self.refreshPanels();\r
+ }\r
+ } );\r
+\r
+ /* COMMIT DIALOG */\r
+ $('#commit-dialog').\r
+ jqm({\r
+ modal: true,\r
+ onShow: $.fbind(self, self.loadRelatedIssues) \r
+ });\r
+\r
+ $('#toolbar-button-commit').click( function (event, data) {\r
+ $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.sendMergeRequest)} );\r
+ } );\r
+ \r
+ /* STATIC BINDS */\r
+ $('#commit-dialog-cancel-button').click(function() {\r
+ $('#commit-dialog-error-empty-message').hide();\r
+ $('#commit-dialog').jqmHide();\r
+ }); \r
+ \r
+\r
+ /* SPLIT DIALOG */\r
+ $('#split-dialog').jqm({\r
+ modal: true,\r
+ onShow: $.fbind(self, self.loadSplitDialog)\r
+ }).\r
+ jqmAddClose('button.dialog-close-button');\r
}\r
\r
Editor.prototype.loadRelatedIssues = function(hash)\r
--- /dev/null
+/*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
--- /dev/null
+/*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');
+ }
+});
+
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]);
--- /dev/null
+/*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});
<script src="{{STATIC_URL}}js/lib/jquery.json.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/lib/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/lib/jquery.modal.js" type="text/javascript" charset="utf-8"></script>
-
+ <script src="{{STATIC_URL}}js/app.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/views/split.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/views/xml.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/views/html.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/views/panel_container.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/editor.ui.js" type="text/javascript" charset="utf-8"></script>
+
+ {# JavaScript templates #}
+ <script type="text/html" charset="utf-8" id="panel-container-view-template">
+ <select>
+ <% for (var i = 0; i < panels.length; i++) { %>
+ <option value="<%= i %>"><%= panels[i].name %></option>
+ <% }; %>
+ </select>
+ <div class="content-view"></div>
+ </script>
+ <script type="text/html" charset="utf-8" id="html-view-template">
+ <p>Hej! Jestem widokiem HTML!</p>
+ </script>
+ <script type="text/html" charset="utf-8" id="xml-view-template">
+ <p>Hej! Jestem widokiem XML!</p>
+ </script>
{% endblock extrahead %}
{% block extrabody %}
{% endblock %}
{% block maincontent %}
- <div id="panels">
- {% for n in panel_list %}
- <div class="panel-wrap{% if forloop.last %} last-panel{% endif %}" id="panel-{{n}}">
- <div class="panel-toolbar">
- <p><label>{{n|capfirst}} panel:
- <select name="select-{{n}}-panel" id="panel-{{n}}-select">
- {% for panel_type in availble_panels %}
- <option value="{% url panel_view path=fileid,name=panel_type.id %}" p:panel-name="{{ panel_type.id }}">{{panel_type.display_name}}</option>
- {% endfor %}
- </select>
- </label>
- <span class="toolbar-button-groups-container">
- <span class="panel-toolbar-extra" > </span>
- </span>
- <!-- rethink the refresh button - it doesn't work very well -->
- <!-- <button type="button" class="refresh-button">Odśwież</button> -->
- {# <a href="{% url print_xml fileid %}" target="_new">Wydruk</a> #}
- <strong class="change-notification" style="display: none">Widok nieaktualny!</strong>
- </p>
- </div>
- <div id="panel-{{n}}-content" class="panel-content"></div>
- <button type="button" class="panel-slider"></button>
- </div>
- {% endfor %}
- </div>
+ <div id="splitview">
+ <div id="left-panel-container" class='panel-container'>
+ <select name="select-left-panel" id="panel-left-select">
+ {% for panel_type in availble_panels %}
+ <option value="{% url panel_view path=fileid,name=panel_type.id %}" p:panel-name="{{ panel_type.id }}">{{panel_type.display_name}}</option>
+ {% endfor %}
+ </select>
+ <div id="panel-left-content" class="panel-content"></div>
+ <p>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.</p>
+ </div>
+ <div id="right-panel-container" class='panel-container'>
+ {# <select name="select-right-panel" id="panel-right-select"> #}
+ {# {% for panel_type in availble_panels %} #}
+ {# <option value="{% url panel_view path=fileid,name=panel_type.id %}" p:panel-name="{{ panel_type.id }}">{{panel_type.display_name}}</option> #}
+ {# {% endfor %} #}
+ {# </select> #}
+ {# <div id="panel-right-content" class="panel-content"></div> #}
+ <p>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.</p></div>
+ </div>
<div id="commit-dialog" class="jqmWindow">
<form action="{% url file_commit fileid %}" method="POST">
fnp / redakcja.git / commitdiff