Embed customisation support plus https redirects

build/upgrade/3.28.0/ownership-embed.mysql.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `ownership` ADD COLUMN `embed` TEXT;
+

build/upgrade/3.28.0/ownership-embed.sqlite.sql

@@ -0,0 +1 @@
+ALTER TABLE `ownership` ADD COLUMN `embed` TEXT;

lib/app.js

@@ -151,9 +151,22 @@ if (options.url.runner) {
 
 app.set('views', 'views');
 app.set('view engine', 'html');
-app.engine('html', hbs.__express);
-app.engine('txt', hbs.__express); // used in email
 
+app.engine('html', hbs.express3({
+  extname: '.html',
+  defaultLayout: path.resolve(__dirname + '/../views/layout.html'),
+  partialsDir: [
+    path.resolve(__dirname + '/../views/partials')
+  ]
+}));
+
+app.engine('txt', hbs.express3({
+  extname: '.txt',
+  defaultLayout: false,
+  partialsDir: [
+    path.resolve(__dirname + '/../views/partials')
+  ]
+}));
 
 // Define some global template variables.
 var helpers = helpers.createHelpers(app);

lib/db/sql_templates.json

@@ -92,6 +92,7 @@
     "updated",
     "pro",
     "settings",
+    "embed",
     "// protected id",
     "dropbox_token",
     "domain",

lib/hbs.js

@@ -1,11 +1,11 @@
 'use strict';
-var hbs = require('hbs');
+var hbs = require('express-hbs');
 var features = require('./features');
 var moment = require('moment');
 var path = require('path');
 var config = require('./config');
 
-hbs.registerPartials(path.resolve(__dirname + '/../views/partials'));
+// hbs.registerPartials(path.resolve(__dirname + '/../views/partials'));
 
 if (config.env !== 'production') {
   var hbsutils = require('hbs-utils')(hbs);
@@ -85,8 +85,8 @@ hbs.registerHelper('if_null', function (a, opts) {
   }
 });
 
-hbs.registerHelper('dump', function(obj) {
-  return JSON.stringify(obj, null, 2);
+hbs.registerHelper('dump', function(obj, def) {
+  return JSON.stringify(obj || def || {}, null, 2);
 });
 
 hbs.registerPartial('welcome_panel', __dirname + '/../views/partials/welcome-panel.html');

lib/models/user.js

@@ -22,6 +22,14 @@ module.exports = Observable.extend({
             user.settings = {};
           }
         }
+
+        if (user && user.embed && typeof user.embed === 'string') {
+          try {
+            user.embed = JSON.parse(user.embed) || {};
+          } catch (e) {
+            user.embed = {};
+          }
+        }
       }
       fn(err, user);
     };

lib/routes.js

@@ -97,12 +97,21 @@ module.exports = function (app) {
     next('route');
   }
 
+  function redirectToOutput(req, res, next) {
+    var output = undefsafe(config, 'security.preview');
+    // redirect to output url (to prevent cross origin attacks)
+    if (output && req.headers.host.indexOf(config.url.host) === 0) {
+      return res.redirect((req.secure ? 'https://' : 'http://') + output + req.url);
+    }
+
+    next();
+  }
+
   function secureOutput(req, res, next) {
     // 1. check request is supposed to be on a vanity url
     // 2. if not, then check if the req.headers.host matches security.preview
     // 3. if not, redirect
     var metadata = undefsafe(req, 'bin.metadata');
-    var output = undefsafe(config, 'security.preview');
     var settings = {};
     var ssl = false;
     var url;
@@ -112,11 +121,6 @@ module.exports = function (app) {
       return next();
     }
 
-    // redirect to output url (to prevent cross origin attacks)
-    if (output && req.headers.host.indexOf(config.url.host) === 0) {
-      return res.redirect((req.secure ? 'https://' : 'http://') + output + req.url);
-    }
-
     if (!req.secure && features('sslForAll', req)) {
       var url = sandbox.helpers.url(req.url, true, true);
       return res.redirect(url);
@@ -356,12 +360,13 @@ module.exports = function (app) {
 
   // Account settings
   var renderAccountSettings = (function(){
-    var pages = ['editor', 'profile', 'delete', 'preferences', 'assets'];
+    var pages = ['editor', 'embed', 'profile', 'delete', 'preferences', 'assets'];
     var titles = {
       editor: 'Editor settings',
       profile: 'Profile',
       preferences: 'Preferences',
-      'delete': 'Delete your account'
+      embed: 'Embed Styles',
+      'delete': 'Delete your account',
     };
 
     return function renderAccountSettings (req, res) {
@@ -424,6 +429,33 @@ module.exports = function (app) {
     res.redirect('/account/editor');
   });
 
+  app.post('/account/embed', features.route('accountPages'), function(req, res) {
+    if (!req.session || !req.session.user) {
+      return res.send(400, 'Please log in');
+    }
+    var settings = {};
+    try {
+      settings = JSON.parse(req.body.settings);
+    } catch (e) {} // let's ignore for now
+
+    for (var prop in settings) {
+      if (settings[prop] === 'true' || settings[prop] === 'false') {
+        settings[prop] = settings[prop] === 'true' ? true : false;
+      }
+    }
+
+    sandbox.models.user.updateOwnershipData(req.session.user.name, {
+      embed: JSON.stringify(settings),
+    }, function (error) {
+      if (error) {
+        console.log(error.stack);
+        res.send(400, error);
+      }
+      req.session.user.embed = settings;
+      res.json(200, { all: 'ok'});
+    });
+  });
+
   app.post('/account/editor', features.route('accountPages'), function(req, res) {
     if (!req.session || !req.session.user) {
       return res.send(400, 'Please log in');
@@ -598,7 +630,7 @@ module.exports = function (app) {
   /** Bin based urls **/
 
   // tag those urls that are the editor view (useful for the 404s)
-  app.get(/\/(edit|watch)$/, redirectOffPreview, tag('editor'), nextRoute);
+  app.get(/\/(edit|watch)$/, redirectOffPreview, secureOutput, tag('editor'), nextRoute);
 
   // check whether a get request has a subdomain, and whether it should be
   // redirected back to the default host for jsbin
@@ -623,12 +655,12 @@ module.exports = function (app) {
   });
 
   // username shortcut routes
-  app.get('/:username/last(-:n)?/edit', binHandler.getLatestForUser, binHandler.getBin);
+  app.get('/:username/last(-:n)?/edit', secureOutput, binHandler.getLatestForUser, binHandler.getBin);
   app.get('/:username/last(-:n)?/watch', binHandler.getLatestForUser, binHandler.live, binHandler.getBin);
 
 
   // Edit
-  app.get('/:binname/:revision?/edit', binHandler.getBin);
+  app.get('/:binname/:revision?/edit', secureOutput, binHandler.getBin);
   app.get('/:bin/:rev?/watch', tag('live'), binHandler.getBin);
   app.get('/:binname/:revision?/embed', tag('embed'), function (req, res, next) {
     // special case for embed: if user has SSL, allow it, if bin has SSL allow it
@@ -691,7 +723,7 @@ module.exports = function (app) {
   app.get('/bin/start.js', function (req, res, next) {
     binParamFromReferer(req, res, function () {});
 
-    if (req.headers.referer.indexOf('/embed') !== -1) {
+    if ((req.headers.referer || '').indexOf('/embed') !== -1) {
       req.embed = true;
     }
 
@@ -717,19 +749,19 @@ module.exports = function (app) {
    */
   // Source
   app.all('*', middleware.cors(), nextRoute);
-  app.get('/:bin/:rev?/source', time('request.source'), binHandler.getBinSource);
+  app.get('/:bin/:rev?/source', redirectToOutput, time('request.source'), binHandler.getBinSource);
 
-  app.get('/:bin/:rev?.:format(' + Object.keys(processors.mime).join('|') + ')', secureOutput, sameoriginframes, time('request.source'), binHandler.getBinSourceFile);
-  app.get('/:bin/:rev?/:format(js)', secureOutput, sameoriginframes, function (req, res) {
+  app.get('/:bin/:rev?.:format(' + Object.keys(processors.mime).join('|') + ')',redirectToOutput, sameoriginframes, time('request.source'), binHandler.getBinSourceFile);
+  app.get('/:bin/:rev?/:format(js)', redirectToOutput, sameoriginframes, function (req, res) {
     // Redirect legacy /js suffix to the new .js extension.
     res.redirect(301, req.path.replace(/\/js$/, '.js'));
   });
 
   // Preview
-  app.get('/:username/last(-:n)?/:quiet(quiet)?', secureOutput, sameoriginframes, tag('keepLatest'), binHandler.getLatestForUser, spike.getStream, binHandler.getBinPreview);
-  app.get('/:bin/:quiet(quiet)?', secureOutput, featureByBinOwner('pro', sameoriginframes), binHandler.testPreviewAllowed, spike.getStream, binHandler.getBinPreview);
-  app.get('/:bin/:rev?/:quiet(quiet)?', ensureRevisionIsInt, secureOutput, featureByBinOwner('pro', sameoriginframes), binHandler.testPreviewAllowed, spike.getStream, binHandler.getBinPreview);
-  app.get('/:bin/:rev?/stats', tag('stats'), secureOutput, spike.getStream);
+  app.get('/:username/last(-:n)?/:quiet(quiet)?', redirectToOutput, sameoriginframes, tag('keepLatest'), binHandler.getLatestForUser, spike.getStream, binHandler.getBinPreview);
+  app.get('/:bin/:quiet(quiet)?', redirectToOutput, featureByBinOwner('pro', sameoriginframes), binHandler.testPreviewAllowed, spike.getStream, binHandler.getBinPreview);
+  app.get('/:bin/:rev?/:quiet(quiet)?', redirectToOutput, ensureRevisionIsInt, featureByBinOwner('pro', sameoriginframes), binHandler.testPreviewAllowed, spike.getStream, binHandler.getBinPreview);
+  app.get('/:bin/:rev?/stats', tag('stats'), spike.getStream);
 
   app.post('/:bin/:rev/settings', binHandler.ensureOwnership, binHandler.updateSettings);
   app.put('/:bin/:rev/settings', binHandler.ensureOwnership, binHandler.updateSettings);

package.json

@@ -36,11 +36,11 @@
     "dropbox": "~0.10.2",
     "express": "3.0.x",
     "express-cookie-blacklist": "~2.0.0",
+    "express-hbs": "^0.8.4",
     "feature-gateway": "0.0.4",
     "file-db": "0.0.2",
     "flatten.js": "0.1.0",
     "handlebars": "~2.0.0-alpha.2",
-    "hbs": "~2.7.0",
     "jade": "~1.4.2",
     "less": "~1.7.3",
     "lynx": "~0.1.1",

public/css/style.css

@@ -4514,7 +4514,7 @@ html * {
 }
 
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 680px) {
   .help .menu {
     display: none;
   }
@@ -5944,4 +5944,102 @@ div.loggedout {
 
 .embed .label .size {
   display: none !important;
+}
+
+/* nav */
+#control,
+.control {
+ background: rgb(237, 237, 237);
+ background: hsl(0, 0%, 93%);
+ border-bottom: rgb(191, 191, 191) solid 1px;
+ border-bottom: hsl(0, 0%, 75%) solid 1px;
+}
+#control *,
+.control * {
+ text-shadow: none;
+}
+
+/* toggles */
+.hasContent {
+ font-weight: bold;
+ background: none;
+ }
+.hasContent:after {
+ display: none;
+ }
+.hasContent.active {
+ font-weight: normal;
+ }
+
+/* thick line at the top of the panel */
+.panel:before,
+.focus.panel:before {
+ background: none !important;
+ }
+
+/*panel backgrounds*/
+.panel {
+ background: rgb(247, 247, 247);
+ background: rgb(247, 247, 247);
+ }
+.panel.focus {
+ background: #fff;
+ }
+/*panel borders*/
+.stretch.panelwrapper {
+ border-left-color: rgb(230, 230, 230) !important;
+ border-left-color: hsl(60, 0%, 90%) !important;
+ background: white !important;
+ }
+/* panel borders hovered */
+.resize:hover + .stretch.panelwrapper {
+ border-left-color: #39f !important;
+ border-left-style: dashed !important;
+ }
+.resize {
+ cursor:move !important;
+ }
+
+/* panel menus */
+.label.menu span strong a {
+ color: rgb(0, 170, 255);
+ color: hsla(200, 100%, 50%, 1);
+ font-weight: normal;
+ }
+.label .name {
+ color: rgba(0,0,0,0.5);
+ }
+
+/* avatar */
+.avatar img {
+  box-shadow: none;
+  vertical-align: middle;
+}
+#accountBtn img {
+  margin-top: -4px;
+}
+
+.open .avatar img,
+.avatar:hover img {
+  -webkit-filter: brightness(125%) saturate(125%);
+  -moz-filter: brightness(125%) saturate(125%);
+  -ms-filter: brightness(125%) saturate(125%);
+  filter: brightness(125%) saturate(125%);
+}
+
+.pro1 .dropdowncontent {
+  background: #FFFBDF;
+  color: white !important;
+}
+
+.pro1 .dropdowncontent:after {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  border-width: 0 0 40px 40px;
+  border-color: transparent transparent gold transparent;
+  bottom: 1px;
+  right: 1px;
+  content: '';
 }

public/js/account/editor-settings.js

@@ -88,10 +88,6 @@
   ];
   var $addons = {};
 
-  var $saveStatus = $('span.status');
-  var saveTimer = null;
-
-
   // setup variables;
   var $saveStatus = $('span.status');
   var saveTimer = null;