Dodanie PanelContainerView oraz postawy HTMLView i XMLView.

diff --git a/project/static/css/master.css b/project/static/css/master.css
index 256c09b..6ac3696 100644 (file)
--- a/project/static/css/master.css
+++ b/project/static/css/master.css
@@ -345,6 +345,13 @@ text#commit-dialog-message {
 /* ======= */
 /* = New = */
 /* ======= */
 /* ======= */
 /* = New = */
 /* ======= */

+#splitview {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+

 .splitview-splitbar {
     width: 5px;
     border-left: 1px solid #999;
 .splitview-splitbar {
     width: 5px;
     border-left: 1px solid #999;

diff --git a/project/static/js/app.js b/project/static/js/app.js
index 702fb0c..73ce107 100644 (file)
--- a/project/static/js/app.js
+++ b/project/static/js/app.js
@@ -4,6 +4,7 @@ var panel_hooks;
 
 
 (function(){
 
 
 (function(){

+  // Classes

   var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
   this.Class = function(){};
   Class.extend = function(prop) {
   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;
   };
     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() {
 })();
 
 (function() {


@@ -64,7 +98,10 @@ var panel_hooks;
   
 })();
  
   
 })();
  

+var panels = [];

 
 $(function() {
 
 $(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 f94d33c..d9166cf 100644 (file)
--- a/project/static/js/editor.js
+++ b/project/static/js/editor.js
@@ -322,30 +322,30 @@ Editor.prototype.loadConfig = function() {
 };
 
 Editor.prototype.loadPanelOptions = 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() {
 };
 
 Editor.prototype.savePanelOptions = function() {

diff --git a/project/static/js/editor.ui.js b/project/static/js/editor.ui.js
index de2d0bf..282df77 100755 (executable)
--- a/project/static/js/editor.ui.js
+++ b/project/static/js/editor.ui.js
@@ -3,7 +3,7 @@
  */\r
 Editor.prototype.setupUI = function() {\r
 //     // set up the UI visually and attach callbacks\r
  */\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
 // \r
 //     var resize_start = function(event, mydata) {\r
 //         $(document).bind('mousemove', mydata, resize_changed).\r


@@ -112,83 +112,81 @@ Editor.prototype.setupUI = function() {
 //         self.savePanelOptions();      \r
 //     });\r
 //     \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
 }\r
 \r
 Editor.prototype.loadRelatedIssues = function(hash)\r

diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js
new file mode 100644 (file)
index 0000000..054b60e
--- /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 (file)
index 0000000..66683dd
--- /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 d8c5e6b..9d6dabd 100644 (file)
--- 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
        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]);
     });
     
     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 (file)
index 0000000..529253b
--- /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 428f354..5848b0f 100644 (file)
--- a/project/templates/explorer/editor.html
+++ b/project/templates/explorer/editor.html
@@ -12,9 +12,29 @@
     <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/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>
     <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 extrahead %}
 
 {% block extrabody %}


@@ -57,31 +77,25 @@
 {% endblock %}
 
 {% block maincontent %}
 {% 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">
 
         <div id="commit-dialog" class="jqmWindow">
             <form action="{% url file_commit fileid %}" method="POST">