M admin/js/components/widgets.js → admin/js/components/widgets.js

@@ -4,31 +4,30 @@ var app = window.LS || (window.LS = {});
   
   app.widgets = {};
     
-  // Panel
+  /**
+   * Creates a Panel component.
+   * @param {Object} obj
+   * @param {string} obj.title
+   * @param {string} obj.footer
+   * @param {string} obj.content
+   */
   app.widgets.panel = function(obj){
     var panel = {
-      controller: function(args){
-        return {
-          title: args.title,
-          footer: args.footer,
-          content: args.content,
-        };
-      },
-      view: function(ctrl){
+      view: function(ctrl, args){
         var title = "";
         var footer = "";
-        if (ctrl.title){
+        if (args.title){
           title = m(".panel-heading", [
-            m("h2.panel-title", [ctrl.title])  
+            m("h2.panel-title", [args.title])  
           ]);
         }
-        if (ctrl.footer){
-          footer = m(".panel-footer", ctrl.footer);
+        if (args.footer){
+          footer = m(".panel-footer", args.footer);
         }
         return m(".panel.panel-default", [
           title,
           m(".panel-body", [
-            ctrl.content
+            args.content
           ]),
           footer
         ]);
@@ -37,36 +36,33 @@ };
     return m.component(panel, obj);
   };
     
-  // Paginator
+  /**
+   * Creates a Paginator component.
+   * @param {Object} obj
+   * @param {string} obj.baseurl
+   * @param {int} obj.total
+   * @param {int} obj.limit
+   * @param {int} obj.offset
+   */
   app.widgets.paginator = function(obj) {
     var paginator = {
-      controller: function(args){
+      view: function(ctrl, args){
         var max_page = Math.min(14, Math.ceil(args.total/args.limit)-1);
         var c_page = Math.ceil(args.offset/args.limit);
-        return {
-          baseurl: args.baseurl,
-          total: args.total,
-          limit: args.limit,
-          offset: args.offset,
-          max_page: max_page,
-          c_page: c_page
-        };
-      },
-      view: function(ctrl){
         var page = function(n, sign, disabled){
           var klass;
           if (disabled) {
             klass = "disabled";
           } else {
-            klass = (n === ctrl.c_page) ? "active" : "inactive";
+            klass = (n === c_page) ? "active" : "inactive";
           }
           var first = (n === 0);
-          var last = (n == ctrl.max_page);
-          var offset = ctrl.limit * n;
+          var last = (n == max_page);
+          var offset = args.limit * n;
           sign = sign || n+1;  
           return m("li", {class: klass},
               [m("a", {
-                        href: ctrl.baseurl +(n+1), // assuming 10 elements per page //+"/"+obj.limit,
+                        href: args.baseurl +(n+1), // assuming 10 elements per page //+"/"+obj.limit,
                         config: m.route
                       }, [m.trust(sign)]
               )]
@@ -76,54 +72,57 @@ 
         var pages = [];
         var prev;
         var next;
-        for (var i=0; i<=ctrl.max_page; i++){
+        for (var i=0; i<=max_page; i++){
           var p;
           switch(i){
-            case ctrl.c_page-1:
+            case c_page-1:
               prev = page(i, "&laquo;");
               break;
-            case ctrl.c_page+1:
+            case c_page+1:
               next = page(i, "&raquo;");
               break;
           }
-          if (ctrl.c_page === 0){
+          if (c_page === 0){
               prev = page(0, "&laquo;", true);
           }
-          if (ctrl.c_page === ctrl.max_page){
-              next = page(ctrl.max_page, "&raquo;", true);
+          if (c_page === max_page){
+              next = page(max_page, "&raquo;", true);
           }
           pages.push(page(i));
         }
         pages.unshift(prev);
         pages.push(next);
         return m("nav", [m("ul.pagination", pages)]);
-        }
+       }
     };
     return m.component(paginator, obj);
   };
   
-  // Dropdown
+  /**
+   * @typedef {Object} DropdownLink
+   * @prop {string} path
+   * @prop {string} title
+   *
+   * Creates a Dropdown component.
+   * @param {Object} obj
+   * @param {string} obj.icon
+   * @param {string} obj.title
+   * @param {string} obj.active
+   * @param {array.DropdownLink} obj.links
+   */
   app.widgets.dropdown = function(obj) {
     var dropdown = {
-      controller: function(args){
-        return {
-          icon: args.icon,
-          active: args.active,
-          title: args.title,
-          links: args.links
-        };
-      },
-      view: function(ctrl){
+      view: function(ctrl, args){
         var el = "li.dropdown";
-        var icon = (ctrl.icon) ? m("i.fa."+ctrl.icon) : "";
-        if (ctrl.active.length > 0) {
-          el += "."+ctrl.active;
+        var icon = (args.icon) ? m("i.fa."+args.icon) : "";
+        if (args.active.length > 0) {
+          el += "."+args.active;
         }
         return m(el, [
           m("a.dropdown-toggle[href='#'][data-toggle='dropdown'][role='button'][aria-expanded='false']",
-          [icon, m("span", " "+ctrl.title+" "), m("span.caret")]),
+          [icon, m("span", " "+args.title+" "), m("span.caret")]),
           m("ul.dropdown-menu[role='menu']", 
-          ctrl.links.map(function(e){
+          args.links.map(function(e){
             return m("li", 
           [m("a", {href: e.path, config: m.route}, m.trust(e.title))]);}))
         ]);
@@ -132,37 +131,42 @@ };
     return m.component(dropdown, obj);
   };
 
-  // TagLink
+  /**
+   * Creates a TagLink component.
+   * @param {Object} obj
+   * @param {string} obj.name
+   */
   app.widgets.taglink = function(obj){
     var taglink = {
-      controller: function(args) {
-        return {
-          color: /^\$/.test(args.name) ? "warning" : "primary",
-          name: args.name
-        };
-      },
-      view: function(ctrl) {
-        return m("span.tag-label.label.label-"+ctrl.color, 
-          [m("i.fa.fa-tag"), " ", m("a", {href: "/tags/"+ctrl.name, config:m.route}, ctrl.name)]);
+      view: function(ctrl, args) {
+        var color = /^\$/.test(args.name) ? "warning" : "primary"
+        return m("span.tag-label.label.label-"+color, 
+          [m("i.fa.fa-tag"), " ", m("a", {href: "/tags/"+args.name, config:m.route}, args.name)]);
       }
     };
     return m.component(taglink, obj);
   };
   
-  // DocLink (warning: API change!)
+  /**
+   * Creates a DocLink component.
+   * @param {Object} obj
+   * @param {string} obj.id
+   */
   app.widgets.doclink = function(obj) {
     var doclink = {
-      controller: function(args){
-        return {id: args.id};
-      },
-      view: function(ctrl) {
-        return m("a", {href: "/document/view/"+ctrl.id, config: m.route}, id);
+      view: function(ctrl, args) {
+        return m("a", {href: "/document/view/"+args.id, config: m.route}, id);
       }
     };
     return m.component(doclink, obj);
   };
   
-  // TagButton (warning: API change!)
+  /**
+   * Creates a TagButton component.
+   * @param {Object} obj
+   * @param {string} obj.name
+   * @param {int} obj.n
+   */
   app.widgets.tagbutton = function(obj) {
     var tagbutton = {
       view: function(ctrl, args) {
@@ -173,15 +177,22 @@ };
     return m.component(tagbutton, obj);
   };
   
-  // Toolbar
+  /**
+   * @typedef {Object} ToolbarLink
+   * @prop {Function} action
+   * @prop {Function} config
+   * @prop {string} title
+   * @prop {string} icon
+   *
+   * Creates a ToolBar component.
+   * @param {Object} obj
+   * @param {array.<ToolbarLink>} obj.links
+   */
   app.widgets.toolbar = function(obj) {
     var toolbar = {
-      controller: function(args){
-        return {links: args.links};
-      },
-      view: function(ctrl){
+      view: function(ctrl, args){
         return m("nav.toolbar.btn-group[role='group'][aria-label='...'].pull-right", 
-          ctrl.links.map(function(l){
+          args.links.map(function(l){
             return m("a.btn.btn-default", 
                       {onclick:l.action, config: l.config}, 
                       [m("i.fa.fa-"+l.icon), " "+l.title]);
@@ -192,33 +203,32 @@ };
     return m.component(toolbar, obj);
   };
   
-  // Modal
+  /**
+   * Creates a Modal component.
+   * @param {Object} obj
+   * @param {string} obj.id
+   * @param {string} obj.content
+   * @param {string} obj.title
+   * @param {Function} obj.action
+   * @param {string} obj.actionText
+   */
   app.widgets.modal = function(obj) {
     var modal = {
-      controller: function(args){
-        return {
-          id: args.id,
-          content: args.content,
-          title: args.title,
-          action: args.action,
-          actionText: args.actionText
-        };
-      },
-      view: function(ctrl){
+      view: function(ctrl, args){
         return m(".modal.fade", 
-          {id: ctrl.id, tabindex: "-1", role: "dialog"},
+          {id: args.id, tabindex: "-1", role: "dialog"},
           [
             m(".modal-dialog", [
               m(".modal-content", [
                 m(".modal-header", [
                   m("button", {type: "button", class: "close", "data-dismiss": "modal"}, 
                   [m.trust("&times;")]),
-                  m("h4.modal-title", ctrl.title)
+                  m("h4.modal-title", args.title)
                 ]),
-                m(".modal-body", [ctrl.content]),
+                m(".modal-body", [args.content]),
                 m(".modal-footer", [
                   m("button.btn.btn-default[data-dismiss='modal']", "Close"),
-                  m("button.btn.btn-primary[data-dismiss='modal']", {onclick: ctrl.action}, ctrl.actionText)
+                  m("button.btn.btn-primary[data-dismiss='modal']", {onclick: args.action}, args.actionText)
                 ])
               ])
             ])
@@ -229,4 +239,4 @@ };
     return m.component(modal, obj);
   };
 
-}());+}());

M admin/js/modules/info.js → admin/js/modules/info.js

@@ -29,7 +29,6 @@ ])]);
     var logo = m(".col-sm-6", [m("img", {src: "images/litestore.png"})]);
     var taglist = m("ul.list-unstyled", info.tags.map(function(tag){
         var key = Object.keys(tag)[0];
-        console.log(key);
         return m("li", [w.tagbutton({name: key, n: tag[key], key: u.guid()})]);
         })
       );
@@ -41,4 +40,4 @@ return v;
   };
   u.layout(app.info);
 
-}())+}())