added components registry for components to don't pollute Misago namespace

misago/frontend/misago/app.js

@@ -59,10 +59,10 @@
   };
 
 
-  // Services registry
+  // Services
   var proto = window.Misago.prototype;
-  proto._services = [];
 
+  proto._services = [];
   proto.addService = function(name, factory, order) {
     proto._services.push({
       key: name,

misago/frontend/misago/components/footer/forum-footer.js

@@ -1,21 +1,38 @@
 (function (Misago) {
   'use strict';
 
-  Misago.ForumFooter = {
+  var isMenuVisible = function(settings) {
+    return [
+      !!settings.forum_footnote,
+      !!settings.terms_of_service,
+      !!settings.terms_of_service_link,
+      !!settings.privacy_policy,
+      !!settings.privacy_policy_link
+    ].indexOf(true) !== -1;
+  };
+
+  var footer = {
     view: function(ctrl, _) {
       var nav = null;
-      if (Misago.FooterNav.isVisible(_.settings)) {
-        nav = _.component(Misago.FooterNav);
+      if (isMenuVisible(_.settings)) {
+        nav = _.component('footer:menu');
       }
 
       return m('footer.forum-footer', [
         m('.container',
           m('.footer-content', [
             nav,
-            _.component(Misago.FooterMisagoBranding)
+            _.component('footer:branding')
           ])
         )
       ]);
     }
   };
+
+  Misago.addService('component:footer', {
+    factory: function(_) {
+      _.component('footer', footer);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/footer/footer-nav.js → misago/frontend/misago/components/footer/menu.js

@@ -18,7 +18,7 @@
     }
   };
 
-  Misago.FooterNav = {
+  var menu = {
     isVisible: function(settings) {
       return [
         !!settings.forum_footnote,
@@ -43,4 +43,11 @@
       return m('ul.list-inline.footer-nav', items);
     }
   };
+
+  Misago.addService('component:footer:menu', {
+    factory: function(_) {
+      _.component('footer:menu', menu);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/footer/misago-branding.js

@@ -1,11 +1,18 @@
 (function (Misago) {
   'use strict';
 
-  Misago.FooterMisagoBranding = {
+  var branding = {
     view: function() {
       return m('a.misago-branding[href=http://misago-project.org]', [
         "powered by ", m('strong', "misago")
       ]);
     }
   };
+
+  Misago.addService('component:footer:branding', {
+    factory: function(_) {
+      _.component('footer:branding', branding);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/forum-layout.js

@@ -5,14 +5,21 @@
     context.retain = true;
   };
 
-  Misago.ForumLayout = {
+  var forumLayout = {
     view: function(ctrl, _) {
       return [
-        _.component(Misago.ForumNavbar),
+        _.component('navbar'),
         m('#router-fixture', {config: persistent}),
-        _.component(Misago.ForumFooter),
-        m.component(Misago.ForumModal)
+        _.component('footer'),
+        _.component('modal')
       ];
     }
   };
+
+  Misago.addService('component:layout', {
+    factory: function(_) {
+      _.component('forum-layout', forumLayout);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/loaders.js

@@ -1,7 +1,7 @@
 (function (Misago) {
   'use strict';
 
-  Misago.Loader = {
+  var loader = {
     view: function() {
       return m('.loader.sk-folding-cube', [
         m('.sk-cube1.sk-cube'),
@@ -12,10 +12,17 @@
     }
   };
 
+  Misago.addService('component:loader', {
+    factory: function(_) {
+      _.component('loader', loader);
+    },
+    after: 'components'
+  });
+
   Misago.LoadingPage = {
     view: function(ctrl, _) {
       return m('.page.loading-page',
-        _.component(Misago.Loader)
+        _.component('loader')
       );
     }
   };

misago/frontend/misago/components/misago-markup.js

@@ -1,15 +1,22 @@
 (function (Misago) {
   'use strict';
 
-  var setupMarkup = function(el, isInit, context) {
+  var persistent = function(el, isInit, context) {
     context.retain = true;
   };
 
-  Misago.Markup = {
+  var markup = {
     view: function(ctrl, content) {
-      return m('article.misago-markup', {config: setupMarkup},
+      return m('article.misago-markup', {config: persistent},
         m.trust(content)
       );
     }
   };
+
+  Misago.addService('component:markup', {
+    factory: function(_) {
+      _.component('markup', markup);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/modal.js

@@ -5,7 +5,7 @@
     context.retain = true;
   }
 
-  Misago.ForumModal = {
+  var modal = {
     view: function() {
       return m(
         '#misago-modal.modal.fade[role="dialog"]',
@@ -17,4 +17,11 @@
       );
     }
   };
+
+  Misago.addService('component:modal', {
+    factory: function(_) {
+      _.component('modal', modal);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/modals/register.js

@@ -5,7 +5,7 @@
     context.retain = true;
   }
 
-  Misago.RegisterModal = {
+  var register = {
     view: function() {
       return m('.modal-dialog.modal-lg[role="document"]',
         {config: persistent},
@@ -25,4 +25,11 @@
       );
     }
   };
+
+  Misago.addService('component:modal:register', {
+    factory: function(_) {
+      _.component('modal:register', register);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/modals/signin.js

@@ -5,24 +5,72 @@
     context.retain = true;
   }
 
-  Misago.SignInModal = {
-    view: function() {
-      return m('.modal-dialog[role="document"]',
+  var signin = Misago.route({
+    controller: function() {
+      console.log('construct!');
+      return {
+        busy: false,
+
+        username: m.prop(''),
+        password: m.prop(''),
+
+        validate: function() {
+          return false;
+        },
+
+        submit: function(e) {
+          console.log('SUBMITTING FORM!');
+          return false;
+        }
+      };
+    },
+    view: function(ctrl) {
+      return m('.modal-dialog.modal-sm.modal-signin[role="document"]',
         {config: persistent},
-        m('.modal-content', [
-          m('.modal-header',
-            m('h4#misago-modal-label.modal-title', 'Sign in modal!')
-          ),
-          m('.modal-body', [
-            m('p', 'Lorem ipsum dolor met sit amet elit.'),
-            m('p', [
-              'Si vis pacem ',
-              m('a', {href: '/'}, 'bellum'),
-              ' sequitat.'
+        m('.modal-content',
+          m('form', {onsubmit: ctrl.submit}, [
+            m('.modal-header',
+              m('button.close[type="button"]',
+                {'data-dismiss': 'modal', 'aria-label': gettext('Close')},
+                m('span', {'aria-hidden': 'true'}, m.trust('×'))
+              ),
+              m('h4#misago-modal-label.modal-title', 'Sign in')
+            ),
+            m('.modal-body', [
+              m('.form-group',
+                m('.control-input',
+                  m('input.form-control[type="text"]', {
+                    placeholder: gettext("Username or e-mail"),
+                    oninput: m.withAttr('value', ctrl.username),
+                    value: ctrl.username()
+                  })
+                )
+              ),
+              m('.form-group',
+                m('.control-input',
+                  m('input.form-control[type="password"]', {
+                    placeholder: gettext("Password"),
+                    oninput: m.withAttr('value', ctrl.password),
+                    value: ctrl.password()
+                  })
+                )
+              )
+            ]),
+            m('.modal-footer', [
+              m('button.btn.btn-primary.btn-block[type="submit"]',
+                gettext('Sign in')
+              )
             ])
           ])
-        ])
+        )
       );
     }
-  };
+  });
+
+  Misago.addService('component:modal:sign-in', {
+    factory: function(_) {
+      _.component('modal:sign-in', signin);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/navbar/brand-full.js → misago/frontend/misago/components/navbar/desktop/brand.js

@@ -1,7 +1,7 @@
 (function (Misago) {
   'use strict';
 
-  Misago.BrandFull = {
+  var brand = {
     view: function(ctrl, branding, _) {
       var children = [
         m('img', {
@@ -17,4 +17,11 @@
       return m('a.navbar-brand', {href: _.router.url('index')}, children);
     }
   };
+
+  Misago.addService('component:navbar:desktop:brand', {
+    factory: function(_) {
+      _.component('navbar:desktop:brand', brand);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/navbar/guest-menu.js → misago/frontend/misago/components/navbar/desktop/guest-menu.js

@@ -1,7 +1,7 @@
 (function (Misago) {
   'use strict';
 
-  Misago.NavbarGuestMenu = {
+  var menu = {
     view: function(ctrl, _) {
       return m('div.nav.guest-nav', [
         m('button.navbar-btn.btn.btn-default',
@@ -13,4 +13,11 @@
       ]);
     }
   };
+
+  Misago.addService('component:navbar:desktop:guest-menu', {
+    factory: function(_) {
+      _.component('navbar:desktop:guest-menu', menu);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/navbar/desktop-navbar.js → misago/frontend/misago/components/navbar/desktop/navbar.js

@@ -1,13 +1,13 @@
 (function (Misago) {
   'use strict';
 
-  Misago.DesktopForumNavbar = {
+  var navbar = {
     view: function(ctrl, _) {
       var menu = [];
 
       if (_.settings.forum_branding_display) {
         menu.push(
-          _.component(Misago.BrandFull, _.settings.forum_branding_text));
+          _.component('navbar:desktop:brand', _.settings.forum_branding_text));
       }
 
       menu.push(m('ul.nav.navbar-nav', [
@@ -16,9 +16,16 @@
         )
       ]));
 
-      menu.push(_.component(Misago.NavbarGuestMenu));
+      menu.push(_.component('navbar:desktop:guest-menu'));
 
       return m('.container.navbar-full.hidden-xs.hidden-sm', menu);
     }
   };
+
+  Misago.addService('component:navbar:desktop', {
+    factory: function(_) {
+      _.component('navbar:desktop', navbar);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/navbar/forum-navbar.js

@@ -1,12 +1,19 @@
 (function (Misago) {
   'use strict';
 
-  Misago.ForumNavbar = {
+  var navbar = {
     view: function(ctrl, _) {
       var style = '.navbar.navbar-default.navbar-static-top';
       return m('nav' + style + '[role="navigation"]', [
-        _.component(Misago.DesktopForumNavbar)
+        _.component('navbar:desktop')
       ]);
     }
   };
+
+  Misago.addService('component:navbar', {
+    factory: function(_) {
+      _.component('navbar', navbar);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/components/page-header.js

@@ -1,7 +1,7 @@
 (function (Misago) {
   'use strict';
 
-  Misago.PageHeader = {
+  var header = {
     view: function(ctrl, options) {
       return m('.page-header',
         m('.container', [
@@ -10,4 +10,11 @@
       );
     }
   };
+
+  Misago.addService('component:header', {
+    factory: function(_) {
+      _.component('header', header);
+    },
+    after: 'components'
+  });
 }(Misago.prototype));

misago/frontend/misago/routes/legal.js

@@ -47,9 +47,9 @@
         var _ = this.container;
 
         return m('.page.legal-page.' + dashedTypeName + '-page', [
-          _.component(Misago.PageHeader, {title: this.vm.page.title}),
+          _.component('header', {title: this.vm.page.title}),
           m('.container',
-            _.component(Misago.Markup, this.vm.page.body)
+            _.component('markup', this.vm.page.body)
           )
         ]);
       }

misago/frontend/misago/services/component-factory.js

@@ -1,16 +0,0 @@
-(function (Misago) {
-  'use strict';
-
-  Misago.addService('component-factory', function(_) {
-    // Component factory
-    _.component = function() {
-      var argumentsArray = [];
-      for (var i = 0; i < arguments.length; i += 1) {
-        argumentsArray.push(arguments[i]);
-      }
-
-      argumentsArray.push(_);
-      return m.component.apply(undefined, argumentsArray);
-    };
-  });
-}(Misago.prototype));

misago/frontend/misago/services/components.js

@@ -0,0 +1,21 @@
+(function (Misago) {
+  'use strict';
+
+  var component = function(name, component) {
+    if (this._components[name]) {
+      var argumentsArray = [this._components[name]];
+      for (var i = 1; i < arguments.length; i += 1) {
+        argumentsArray.push(arguments[i]);
+      }
+      argumentsArray.push(this);
+      return m.component.apply(undefined, argumentsArray);
+    } else {
+      this._components[name] = component;
+    }
+  };
+
+  Misago.addService('components', function(_) {
+    _._components = {};
+    _.component = component;
+  });
+}(Misago.prototype));

misago/frontend/misago/services/forum-layout.js

@@ -5,7 +5,7 @@
     factory: function(_) {
       if (_.setup.fixture) {
         m.mount(document.getElementById(_.setup.fixture),
-                _.component(Misago.ForumLayout));
+                _.component('forum-layout'));
       }
     },
 

misago/frontend/misago/services/route.js

@@ -62,7 +62,7 @@
         component.loading = function () {
           var _ = this.container;
           return m('.page.page-loading',
-            _.component(Misago.Loader)
+            _.component('loader')
           );
         };
       }

misago/frontend/misago/style/misago.less

@@ -35,6 +35,9 @@
 @import "@{bs}component-animations.less";
 @import "@{bs}navs.less";
 @import "@{bs}navbar.less";
+@import "@{bs}close.less";
+
+// Components w/ JavaScript
 @import "@{bs}modals.less";
 
 // Utility classes

misago/frontend/misago/utils/views-shortcuts.js

@@ -3,7 +3,7 @@
 
   Misago.loadingPage = function(_) {
     return m('.page.page-loading',
-      _.component(Misago.Loader)
+      _.component('loader')
     );
   };
 }(Misago.prototype));

misago/frontend/test/tests/unit/component-factory.js

@@ -1,15 +0,0 @@
-(function () {
-  'use strict';
-
-  QUnit.module("Component factory");
-
-  QUnit.test("service factory", function(assert) {
-    var container = {};
-
-    var service = getMisagoService('component-factory');
-    service(container);
-
-    assert.ok(container.component,
-      "service factory has set component on container.");
-  });
-}());

misago/frontend/test/tests/unit/components.js

@@ -0,0 +1,33 @@
+(function () {
+  'use strict';
+
+  QUnit.module("Components");
+
+  QUnit.test("service factory", function(assert) {
+    var container = {};
+
+    var service = getMisagoService('components');
+    service(container);
+
+    assert.ok(container.component,
+      "service factory has set component function on container.");
+  });
+
+  QUnit.test("component factory", function(assert) {
+    var container = {};
+
+    var service = getMisagoService('components');
+    service(container);
+
+    var view = function() {
+      return 'ok!';
+    };
+
+    container.component('test-component', {
+      view: view
+    });
+
+    assert.equal(container.component('test-component').view(), view(),
+      "component service registered and constructed component.");
+  });
+}());