top: 2.4em; left: 0px; right: 0px; bottom: 0px;
overflow: auto;
background-color: white;
- padding: 0.2em 1em;
}
ul {
/* ========== */
#panels {
- position: absolute;
- bottom: 0px; left: 0px; right: 0px; top: 0px;
+ height: 100%;
+ width: 100%;
}
.panel-wrap {
#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;
+}
--- /dev/null
+/*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');
+});
};
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() {
* UI related Editor methods\r
*/\r
Editor.prototype.setupUI = function() {\r
- // set up the UI visually and attach callbacks\r
+// // set up the UI visually and attach callbacks\r
var self = this;\r
-\r
- var resize_start = function(event, mydata) {\r
- $(document).bind('mousemove', mydata, resize_changed).\r
- bind('mouseup', mydata, resize_stop);\r
-\r
- $('.panel-overlay', mydata.root).css('display', 'block');\r
- return false;\r
- }\r
- var resize_changed = function(event) {\r
- var old_width = parseInt(event.data.overlay.css('width'));\r
- var delta = event.pageX + event.data.hotspot_x - old_width;\r
-\r
- if(old_width + delta < 12) delta = 12 - old_width;\r
- if(old_width + delta > $(window).width()) \r
- delta = $(window).width() - old_width;\r
- \r
- event.data.overlay.css({\r
- 'width': old_width + delta\r
- });\r
-\r
- if(event.data.overlay.next) {\r
- var left = parseInt(event.data.overlay.next.css('left'));\r
- event.data.overlay.next.css('left', left+delta);\r
- }\r
-\r
- return false;\r
- };\r
-\r
- var resize_stop = function(event) {\r
- $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop);\r
- // $('.panel-content', event.data.root).css('display', 'block');\r
- var overlays = $('.panel-content-overlay', event.data.root);\r
- $('.panel-content-overlay', event.data.root).each(function(i) {\r
- if( $(this).data('panel').hasClass('last-panel') )\r
- $(this).data('panel').css({\r
- 'left': $(this).css('left'),\r
- 'right': $(this).css('right')\r
- });\r
- else\r
- $(this).data('panel').css({\r
- 'left': $(this).css('left'),\r
- 'width': $(this).css('width')\r
- });\r
- });\r
- $('.panel-overlay', event.data.root).css('display', 'none');\r
- $(event.data.root).trigger('stopResize');\r
- };\r
-\r
- /*\r
- * Prepare panels (overlays & stuff)\r
- */\r
- /* create an overlay */\r
- var panel_root = self.rootDiv;\r
- var overlay_root = $("<div class='panel-overlay'></div>");\r
- panel_root.append(overlay_root);\r
-\r
- var prev = null;\r
-\r
- $('*.panel-wrap', panel_root).each( function()\r
- {\r
- var panel = $(this);\r
- var handle = $('.panel-slider', panel);\r
- var overlay = $("<div class='panel-content-overlay panel-wrap'> </div>");\r
- overlay_root.append(overlay);\r
- overlay.data('panel', panel);\r
- overlay.data('next', null);\r
-\r
- if (prev) prev.next = overlay;\r
-\r
- if( panel.hasClass('last-panel') )\r
- {\r
- overlay.css({\r
- 'left': panel.css('left'),\r
- 'right': panel.css('right')\r
- });\r
- }\r
- else {\r
- overlay.css({\r
- 'left': panel.css('left'),\r
- 'width': panel.css('width')\r
- });\r
- // $.log('Has handle: ' + panel.attr('id'));\r
- overlay.append(handle.clone());\r
- /* attach the trigger */\r
- handle.mousedown(function(event) {\r
- var touch_data = {\r
- root: panel_root,\r
- overlay: overlay,\r
- hotspot_x: event.pageX - handle.position().left\r
- };\r
-\r
- $(this).trigger('hpanel:panel-resize-start', touch_data);\r
- return false;\r
- });\r
- $('.panel-content', panel).css('right',\r
- (handle.outerWidth() || 10) + 'px');\r
- $('.panel-content-overlay', panel).css('right',\r
- (handle.outerWidth() || 10) + 'px');\r
- };\r
-\r
- prev = overlay;\r
- });\r
-\r
- panel_root.bind('hpanel:panel-resize-start', resize_start);\r
- self.rootDiv.bind('stopResize', function() {\r
- self.savePanelOptions(); \r
- });\r
- \r
+// \r
+// var resize_start = function(event, mydata) {\r
+// $(document).bind('mousemove', mydata, resize_changed).\r
+// bind('mouseup', mydata, resize_stop);\r
+// \r
+// $('.panel-overlay', mydata.root).css('display', 'block');\r
+// return false;\r
+// }\r
+// var resize_changed = function(event) {\r
+// var old_width = parseInt(event.data.overlay.css('width'));\r
+// var delta = event.pageX + event.data.hotspot_x - old_width;\r
+// \r
+// if(old_width + delta < 12) delta = 12 - old_width;\r
+// if(old_width + delta > $(window).width()) \r
+// delta = $(window).width() - old_width;\r
+// \r
+// event.data.overlay.css({\r
+// 'width': old_width + delta\r
+// });\r
+// \r
+// if(event.data.overlay.next) {\r
+// var left = parseInt(event.data.overlay.next.css('left'));\r
+// event.data.overlay.next.css('left', left+delta);\r
+// }\r
+// \r
+// return false;\r
+// };\r
+// \r
+// var resize_stop = function(event) {\r
+// $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop);\r
+// // $('.panel-content', event.data.root).css('display', 'block');\r
+// var overlays = $('.panel-content-overlay', event.data.root);\r
+// $('.panel-content-overlay', event.data.root).each(function(i) {\r
+// if( $(this).data('panel').hasClass('last-panel') )\r
+// $(this).data('panel').css({\r
+// 'left': $(this).css('left'),\r
+// 'right': $(this).css('right')\r
+// });\r
+// else\r
+// $(this).data('panel').css({\r
+// 'left': $(this).css('left'),\r
+// 'width': $(this).css('width')\r
+// });\r
+// });\r
+// $('.panel-overlay', event.data.root).css('display', 'none');\r
+// $(event.data.root).trigger('stopResize');\r
+// };\r
+// \r
+// /*\r
+// * Prepare panels (overlays & stuff)\r
+// */\r
+// /* create an overlay */\r
+// var panel_root = self.rootDiv;\r
+
// var overlay_root = $("<div class='panel-overlay'></div>");
\r+// panel_root.append(overlay_root);\r
+// \r
+// var prev = null;\r
+// \r
+// $('*.panel-wrap', panel_root).each( function()\r
+// {\r
+// var panel = $(this);\r
+// var handle = $('.panel-slider', panel);\r
+
// var overlay = $("<div class='panel-content-overlay panel-wrap'> </div>");
\r+// overlay_root.append(overlay);\r
+// overlay.data('panel', panel);\r
+// overlay.data('next', null);\r
+// \r
+// if (prev) prev.next = overlay;\r
+// \r
+// if( panel.hasClass('last-panel') )\r
+// {\r
+// overlay.css({\r
+// 'left': panel.css('left'),\r
+// 'right': panel.css('right')\r
+// });\r
+// }\r
+// else {\r
+// overlay.css({\r
+// 'left': panel.css('left'),\r
+// 'width': panel.css('width')\r
+// });\r
+// // $.log('Has handle: ' + panel.attr('id'));\r
+// overlay.append(handle.clone());\r
+// /* attach the trigger */\r
+// handle.mousedown(function(event) {\r
+// var touch_data = {\r
+// root: panel_root,\r
+// overlay: overlay,\r
+// hotspot_x: event.pageX - handle.position().left\r
+// };\r
+// \r
+// $(this).trigger('hpanel:panel-resize-start', touch_data);\r
+// return false;\r
+// });\r
+// $('.panel-content', panel).css('right',\r
+// (handle.outerWidth() || 10) + 'px');\r
+// $('.panel-content-overlay', panel).css('right',\r
+// (handle.outerWidth() || 10) + 'px');\r
+// };\r
+// \r
+// prev = overlay;\r
+// });\r
+// \r
+// panel_root.bind('hpanel:panel-resize-start', resize_start);\r
+// self.rootDiv.bind('stopResize', function() {\r
+// self.savePanelOptions(); \r
+// });\r
+// \r
/*\r
* Connect panel actions\r
*/\r
onShow: $.fbind(self, self.loadSplitDialog)\r
}).\r
jqmAddClose('button.dialog-close-button');\r
-\r
-// $('#split-dialog'). \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');
+ }
+});
+
--- /dev/null
+/*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] || '<div></div>')
+ .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');
+ }
+});
+
--- /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="xml-view-template">
+ <div class="xmlview" style="position: absolute; top: 40px; left:0px; right:0px; bottom: 0px;">
+ <textarea name="text">Ala ma kota</textarea>
+ </div>
+ </script>
+
+ <script type="text/html" charset="utf-8" id="html-view-template">
+ <p>Hej! Jestem widokiem HTML!</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>
+ <div id="splitview">
+ <div id="left-panel-container" class='panel-container'></div>
+ <div id="right-panel-container" class='panel-container'></div>
+ </div>
- <span
- <span class="toolbar-buttons-container 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="commit-dialog" class="jqmWindow">
- <form action="{% url file_commit fileid %}" method="POST">
- <label for="message">Commit message:</label>
- <textarea cols="60" rows="10" name="message" id="commit-dialog-message"></textarea>
-
<p id="commit-dialog-error-empty-message">Wiadomość nie może być pusta.</p>
- <fieldset id="commit-dialog-related-issues"
- ui:ajax-src="http://localhost:3000/publications/issues/{{fileid}}">
- <legend>Related issues</legend>
-
<div class="loading-box" style="display: none;">
-
<p>Loading related issues...</p>
- </div>
-
<div class="container-box">No related issues.</div>
- </fieldset>
- <input type="button" value="Save" id="commit-dialog-save-button" />
- <input type="reset" value="Cancel" id="commit-dialog-cancel-button" />
- </p>
- </form>
- </div>
+ <div id="commit-dialog" class="jqmWindow">
+ <form action="{% url file_commit fileid %}" method="POST">
+ <label for="message">Commit message:</label>
+ <textarea cols="60" rows="10" name="message" id="commit-dialog-message"></textarea>
+ <p id="commit-dialog-error-empty-message">Wiadomość nie może być pusta.</p>
+ <fieldset id="commit-dialog-related-issues"
+ ui:ajax-src="http://localhost:3000/publications/issues/{{fileid}}">
+ <legend>Related issues</legend>
+ <div class="loading-box" style="display: none;">
+ <p>Loading related issues...</p>
+ </div>
+ <div class="container-box">No related issues.</div>
+ </fieldset>
+ <p>
+ <input type="button" value="Save" id="commit-dialog-save-button" />
+ <input type="reset" value="Cancel" id="commit-dialog-cancel-button" />
+ </p>
+ </form>
+ </div>
- <div id="split-dialog" class="jqmWindow">
- <div class="container-box"> </div>
- <div class="loading-box" style="display: none;">
- <p>Loading dialog contents...</p>
- <!-- <p><button type="button" class="dialog-close-button">Close</button></p> -->
- </div>
- <div class="fatal-error-box" style="display: none;">
- <p>Server error, while loading dialog :(</p>
- <p><button type="button" class="dialog-close-button">Close</button></p>
- </div>
+ <div id="split-dialog" class="jqmWindow">
+ <div class="container-box"> </div>
+ <div class="loading-box" style="display: none;">
+ <p>Loading dialog contents...</p>
+ <!-- <p><button type="button" class="dialog-close-button">Close</button></p> -->
+ </div>
+ <div class="fatal-error-box" style="display: none;">
+ <p>Server error, while loading dialog :(</p>
+ <p><button type="button" class="dialog-close-button">Close</button></p>
</div>
+ </div>
{% endblock maincontent %}
fnp / redakcja.git / commitdiff