view system wip

html/index.mustache.html

@@ -79,9 +79,9 @@
             <div id="editor"></div>
         </div>
 
-        <script type="text/html" id="editor-javascript"></script>
+        <!-- <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
-        <script type="text/html" id="editor-css"></script>
+        <script type="text/html" id="editor-css"></script> -->
         <!-- <button id="revert-editor">!</button> -->
     </div>
 
@@ -92,7 +92,7 @@
 </div>
 
 {{=<% %>=}}
-<script id="menu-example-tmpl" type="text/x-mustache-tmpl">
+<script data-tmpl-for="menu-example" id="menu-example-tmpl" type="text/x-mustache-tmpl">
   {{#menuExample}}
   <div class="pure-u-1 pure-u-md-1-2">
     <span class="cat-title">{{category.title}}</span>
@@ -102,13 +102,13 @@
   </div>{{/menuExample}}
 </script>
 
-<script id="details-example-tmpl" type="text/x-mustache-tmpl">
+<script data-tmpl-for="details-example" id="details-example-tmpl" type="text/x-mustache-tmpl">
   {{#example}}
     <strong>{{_.example}} </strong><span>{{title}}</span>
   {{/example}}
 </script>
 
-<script id="tabs-tmpl" type="text/x-mustache-tmpl">
+<script data-tmpl-for="tabs" id="tabs-tmpl" type="text/x-mustache-tmpl">
   <ul id="tabs">{{#files}}
     <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
   {{/files}}
@@ -136,10 +136,11 @@ window._ws = {
   files: {{{filesJSON}}}
 };
 </script>
+<script src="/js/ws-ui-parts.js"></script>
 <script src="/js/ws-events.js"></script>
 <script src="/js/menu.js"></script>
 <!-- <script src="/js/ws-navigator.js"></script> -->
-<script src="/js/vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+<script src="/js/vendor/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/req-promise.js"></script>
 <script src="/js/editor-local-storage.js"></script>
 <script src="/js/editor.js"></script>

js/editor.js

@@ -3,35 +3,43 @@ $(document).ready(function() {
 
   var $editorWrapper = $('#editor-wrapper');
   var $editor        = $('#editor');
-  var $editorJs      = $('#editor-javascript');
-  var $editorHtml    = $('#editor-html');
-  var $editorCss     = $('#editor-css');
-  var $htmlContent   = $('#html-content');
-  var $selectorNav   = $('#selector');
-  var $fileSelect    = $('#file-select');
+  // var $editorJs      = $('#editor-javascript');
+  // var $editorHtml    = $('#editor-html');
+  // var $editorCss     = $('#editor-css');
+
+  // var $htmlContent   = $('#html-content');  // replaced by iframe
+
+
+  // var $selectorNav   = $('#selector');
+  // var $fileSelect    = $('#file-select');
+
   var $addExampleBtn = $('#add-example-btn');
   var $exampleForm   = $('#add-example-form');
   var $exampleFormIn = $exampleForm.find('input')
   var $exampleSave   = $('#add-example-save');
   var $exampleCancel = $('#add-example-cancel');
+
+
   var $saveChanges   = $('#save-changes');
   var $notification  = $('#notification');
   var $revertEditor  = $('#revert-editor');
-  var $panelLeft     = $('.panel-left');
-  var $panelRight    = $('.panel-right');
-  var $panelWrap     = $('.panel-container');
+  // var $panelLeft     = $('.panel-left');
+  // var $panelRight    = $('.panel-right');
+  // var $panelWrap     = $('.panel-container');
   var $tabItems      = $('#tabs li');
   var $detailsRepo   = $('#details-repo');
   var $detailsExmp   = $('#details-example');
+
   var $window        = $(window);
   var activeMode     = 'html';
-  var currentHash; 
+
+  // var currentHash; 
   var editor;
   var editorSession;
   var editorStorage = new LocalStorageDraft();
-  var saveTimeout1;
-  var saveTimeout2;
-  var exampleList;
+  // var saveTimeout1;
+  // var saveTimeout2;
+  // var exampleList;
   var mapTypes = {
     html: 'html', js: 'javascript', css: 'css'
   }

js/menu.js

@@ -62,7 +62,8 @@
         _ws.events.emit('navToRepo', this.nav.repo);
         rp.get('/parts/' + this.nav.repo, 'json')
         .then(function(parts) {
-          renderMenuExample(parts.menuExample);
+          // renderMenuExample(parts.menuExample);
+          _ws.ui.menuExample.render(parts);
         });
       }
       else if(this.nav.example !== oldNav.example) {

js/ws-ui-parts.js

@@ -0,0 +1,77 @@
+"use strict";
+(function($) {
+  $(document).ready(function() {
+
+
+    var eventBinders = {
+
+      menuExample: function() {
+        console.log('eventBinder for menuExample', this);
+        this.$elem.find('a').click(function(e) {
+          e.preventDefault();
+          var $link = $(this);
+          var originalColor = $link.css('backgroundColor');
+          // self.toggleMenu();
+          $link.animate({
+            backgroundColor: '#aaa',
+          }, 70);
+          $link.animate({
+            backgroundColor: originalColor,
+          }, 70);
+          _ws.navigator.navigateTo($link.prop('href'));
+        });
+      }
+
+    }
+
+    /**
+     * Render an UI part
+     */
+    function renderPart(partName, data) {
+      var part = _ws.ui[partName];
+      part.$elem.html( Mustache.render( part.tmpl, data ) );
+    }
+
+
+    /**
+     * Initialize an empty object to be populated as follows:
+     *   - key is an UI element's id
+     *   - value associated is an obj containing: tmpl (the template) and $elem (jQueried target element)
+     */
+    _ws.ui = {};
+
+    // Iterate over the template script elements
+    var $templateElems = $('script[data-tmpl-for]');
+    $templateElems.each(function(idx, el) {
+
+      // Get the script element content and target element id
+      var $script = $(el);
+      var tmpl = $script.html();
+      var elemId = $script.data('tmpl-for');
+      var $elem = $('#' + elemId);
+      var partName = _.camelCase(elemId);
+
+      // Populate the uiParts object
+      _ws.ui[partName] = {
+        tmpl: tmpl,
+        $elem: $elem,
+        render: (function(_name) {
+          return function(data) {
+            var eventBinder = eventBinders[_name];
+            renderPart(_name, data);
+            if(eventBinder) {
+              eventBinder = eventBinder.bind(this);
+              console.log('bind events for', _name);
+              eventBinder();
+            }
+          };
+        })(partName)
+      };
+    });
+
+    // console.log(_.map(_ws.uiParts, p => (p.render.toString())));
+
+
+
+  });
+})(jQuery);