Merge pull request #14 from wickwire/jade-to-pug

Jade to pug

app.js

@@ -3,11 +3,11 @@ var readdirp = require('readdirp');
 
 var app = express();
 app.set('views', __dirname + '/public/app');
-app.set('view engine', 'jade');
+app.set('view engine', 'pug');
 
 /*
 Set bower and app directories for static retrieval.
-JS files from app will use this path, not jade files becaue those need to be rendered
+JS files from app will use this path, not pug files becaue those need to be rendered
 */
 app.use('/static/common', express.static(__dirname + '/public/common'));
 app.use('/static/framework', express.static(__dirname + '/public/app/framework'));
@@ -19,7 +19,7 @@ var frameworkFiles = [];
 var dashboardFiles = [];
 
 //Framework js files
-readdirp({ root: __dirname + '/public/app/framework/', fileFilter: '*.jade' })
+readdirp({ root: __dirname + '/public/app/framework/', fileFilter: '*.pug' })
   .on('data', function (entry) {
     frameworkFiles.push('/app-render/framework/' + entry.path);
   });
@@ -55,12 +55,12 @@ app.get('/app-render/framework/**/*.css', function (req, res) {
 app.get('/app-render/dashboard-elements/**/*.css', function (req, res) {
   res.sendFile(__dirname + "/public/app/dashboard-elements/"+req.params[0]+"/"+req.params[2]+".css");
 });
-//templating angular html (jade) files
-app.get('/app-render/framework/**/*.jade', function (req, res) {
-  res.render("framework/"+req.params[0]+"/"+req.params[2]+".jade");
+//templating angular html (pug) files
+app.get('/app-render/framework/**/*.pug', function (req, res) {
+  res.render("framework/"+req.params[0]+"/"+req.params[2]+".pug");
 });
-app.get('/app-render/dashboard-elements/**/*.jade', function (req, res) {
-  res.render("dashboard-elements/"+req.params[0]+"/"+req.params[2]+".jade");
+app.get('/app-render/dashboard-elements/**/*.pug', function (req, res) {
+  res.render("dashboard-elements/"+req.params[0]+"/"+req.params[2]+".pug");
 });
 //For documentation
 app.get('/app-render/documentation/*.css', function (req, res) {
@@ -73,7 +73,7 @@ app.get('/app-render/documentation/*.md', function (req, res) {
   res.sendFile(__dirname + "/public/app/documentation/"+req.params[0]+".md");
 });
 app.get(['/documentation'], function (req, res) {
-  res.render('documentation/documentation.jade');
+  res.render('documentation/documentation.pug');
 });
 //404
 app.use(function(req, res, next) {

package.json

@@ -6,15 +6,16 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node app.js",
-    "postinstall": "node_modules/bower/bin/bower install"
+    "postinstall": "bower install"
   },
   "author": "Edmund Fung",
   "license": "MIT",
   "dependencies": {
     "bower": "^1.5.2",
     "express": "^4.13.3",
-    "jade": "^1.11.0",
+    "grunt-contrib-pug": "0.0.0",
     "jit-grunt": "^0.9.1",
+    "pug": "^2.0.0-alpha6",
     "readdirp": "^2.0.0"
   },
   "devDependencies": {

public/app/dashboard-elements/crouton-chart-donut/crouton-chart-donut.jade → public/app/dashboard-elements/crouton-chart-donut/crouton-chart-donut.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-chart-donut")

public/app/dashboard-elements/crouton-chart-line/crouton-chart-line.jade → public/app/dashboard-elements/crouton-chart-line/crouton-chart-line.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-chart-line")

public/app/dashboard-elements/crouton-rgb-slider/crouton-rgb-slider.jade → public/app/dashboard-elements/crouton-rgb-slider/crouton-rgb-slider.pug

@@ -1,6 +1,6 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
 link(rel="import", href="/static/common/bower/paper-slider/paper-slider.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-rgb-slider")

public/app/dashboard-elements/crouton-simple-button/crouton-simple-button.jade → public/app/dashboard-elements/crouton-simple-button/crouton-simple-button.pug

@@ -3,7 +3,7 @@ link(rel="import", href="/static/common/bower/paper-fab/paper-fab.html")
 link(rel="import", href="/static/common/bower/iron-icons/iron-icons.html")
 link(rel="import", href="/static/common/bower/iron-icon/iron-icon.html")
 link(rel="import", href="/static/common/bower/fontawesome-iconset/fa-all.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-button")

public/app/dashboard-elements/crouton-simple-dropdown/crouton-simple-dropdown.jade → public/app/dashboard-elements/crouton-simple-dropdown/crouton-simple-dropdown.pug

@@ -3,7 +3,7 @@ link(rel="import", href="/static/common/bower/paper-dropdown-menu/paper-dropdown
 // link(rel="import", href="/static/common/bower/paper-menu/paper-menu.html")
 link(rel="import", href="/static/common/bower/paper-listbox/paper-listbox.html")
 link(rel="import", href="/static/common/bower/paper-item/paper-item.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-dropdown")

public/app/dashboard-elements/crouton-simple-input/crouton-simple-input.jade → public/app/dashboard-elements/crouton-simple-input/crouton-simple-input.pug

@@ -1,6 +1,6 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
 link(rel="import", href="/static/common/bower/paper-input/paper-textarea.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-input")

public/app/dashboard-elements/crouton-simple-slider/crouton-simple-slider.jade → public/app/dashboard-elements/crouton-simple-slider/crouton-simple-slider.pug

@@ -1,6 +1,6 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
 link(rel="import", href="/static/common/bower/paper-slider/paper-slider.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-slider")

public/app/dashboard-elements/crouton-simple-text/crouton-simple-text.jade → public/app/dashboard-elements/crouton-simple-text/crouton-simple-text.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-text")

public/app/dashboard-elements/crouton-simple-toggle/crouton-simple-toggle.jade → public/app/dashboard-elements/crouton-simple-toggle/crouton-simple-toggle.pug

@@ -1,6 +1,6 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
 link(rel="import", href="/static/common/bower/paper-toggle-button/paper-toggle-button.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-simple-toggle")

public/app/dashboard-elements/crouton-video-youtube/crouton-video-youtube.jade → public/app/dashboard-elements/crouton-video-youtube/crouton-video-youtube.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-video-youtube")

public/app/framework/crouton-connect-mqtt/crouton-connect-mqtt.jade → public/app/framework/crouton-connect-mqtt/crouton-connect-mqtt.pug

@@ -4,7 +4,7 @@ link(rel="import", href="/static/common/bower/paper-button/paper-button.html")
 link(rel="import", href="/static/common/bower/paper-checkbox/paper-checkbox.html")
 link(rel="import", href="/static/common/bower/paper-toast/paper-toast.html")
 link(rel="import", href="/static/common/bower/iron-form/iron-form.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-connect-mqtt")

public/app/framework/crouton-dashboard/crouton-dashboard.jade → public/app/framework/crouton-dashboard/crouton-dashboard.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 dom-module(id="crouton-dashboard")
   template
@@ -77,7 +77,7 @@ dom-module(id="crouton-dashboard")
                   var path = "app-render/dashboard-elements/";
                   var elementImport = document.createElement("link");
                   elementImport.rel = "import";
-                  elementImport.href = path + elementName + "/" + elementName + ".jade";
+                  elementImport.href = path + elementName + "/" + elementName + ".pug";
                   elementImport.setAttribute("onload","handleLoad(event)");
 
                   document.head.appendChild(elementImport);

public/app/framework/crouton-devices/crouton-devices.jade → public/app/framework/crouton-devices/crouton-devices.pug

@@ -2,8 +2,8 @@ link(rel="import", href="/static/common/bower/polymer/polymer.html")
 link(rel="import", href="/static/common/bower/paper-input/paper-input.html")
 link(rel="import", href="/static/common/bower/paper-button/paper-button.html")
 link(rel="import", href="/static/common/bower/iron-form/iron-form.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
-link(rel="import", href="/app-render/framework/crouton-device-card/crouton-device-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
+link(rel="import", href="/app-render/framework/crouton-device-card/crouton-device-card.pug")
 
 
 dom-module(id="crouton-devices")

public/app/framework/crouton-frame/crouton-frame.jade → public/app/framework/crouton-frame/crouton-frame.pug

@@ -1,10 +1,10 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
-link(rel="import", href="/app-render/framework/crouton-connect-mqtt/crouton-connect-mqtt.jade")
-link(rel="import", href="/app-render/framework/crouton-devices/crouton-devices.jade")
-link(rel="import", href="/app-render/framework/crouton-dashboard/crouton-dashboard.jade")
-link(rel="import", href="/app-render/framework/crouton-navigation/crouton-navigation.jade")
-link(rel="import", href="/app-render/framework/crouton-getting-started/crouton-getting-started.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
+link(rel="import", href="/app-render/framework/crouton-connect-mqtt/crouton-connect-mqtt.pug")
+link(rel="import", href="/app-render/framework/crouton-devices/crouton-devices.pug")
+link(rel="import", href="/app-render/framework/crouton-dashboard/crouton-dashboard.pug")
+link(rel="import", href="/app-render/framework/crouton-navigation/crouton-navigation.pug")
+link(rel="import", href="/app-render/framework/crouton-getting-started/crouton-getting-started.pug")
 
 
 dom-module(id="crouton-frame")
@@ -85,6 +85,23 @@ dom-module(id="crouton-frame")
         },
         properties: {
         },
+        //Change navigation page
+        changePage: function(event){
+          if(typeof event == "string"){
+            var newPage = event;
+          } else if(event.target.attributes['data-page'] != null){
+            var newPage = event.target.attributes['data-page'].value;
+          } else {
+            return
+          }
+          if(newPage != this.currentPage){
+            this.currentPage = newPage;
+            // document.querySelector("paper-drawer-panel").scrollTop = 0;
+            $(document).scrollTop = 0;
+            window.history.pushState({"page": this.currentPage}, this.currentPage, "/crouton/" + this.currentPage);
+            this.fire("crouton-page-change", this.currentPage); //Unlike crouton-changePage which triggers a page change, this alerts that the page has been changed
+          }
+        },
         selectedPage: function(name, current, extra) {
           extra = extra ? ' ' + extra : ' ';
           if(name === current){

public/app/framework/crouton-getting-started/crouton-getting-started.jade → public/app/framework/crouton-getting-started/crouton-getting-started.pug

@@ -1,5 +1,5 @@
 link(rel="import", href="/static/common/bower/polymer/polymer.html")
-link(rel="import", href="/app-render/framework/crouton-card/crouton-card.jade")
+link(rel="import", href="/app-render/framework/crouton-card/crouton-card.pug")
 
 
 dom-module(id="crouton-getting-started")

public/app/index.jade → public/app/index.pug

@@ -8,7 +8,7 @@ html(lang="en")
     meta(http-equiv="Cache-control", content="public")
 
     //polymer imports
-    link(rel="import", href="/app-render/framework/crouton-frame/crouton-frame.jade")
+    link(rel="import", href="/app-render/framework/crouton-frame/crouton-frame.pug")
 
   body(ng-app='Crouton')
     crouton-frame#crouton-frame