password now using a template

app/js/modules/events.js

@@ -47,7 +47,7 @@ let EventView = Backbone.View.extend({
       this.$myEvent.empty().append(str);
     },
     initView: function () {
-        let html = `<div class='mui-col-xs-3 mui-col-md-3' id="${this.id}"></div>`;
+        let html = `<div class='mui-col-xs-12 mui-col-md-3' id="${this.id}"></div>`;
         this.$html = $(html);
         this.$events.append(this.$html);
         this.$myEvent = $(`#${this.id}`);

app/js/modules/password.js

@@ -1,72 +1,81 @@
 /**
  * Created by mdonnel on 20/04/2017.
  */
+_.templateSettings = {
+  interpolate: /\{\{(.+?)\}\}/g
+};
+
 Array.prototype.random = function () {
   return this[Math.floor((Math.random() * this.length))];
 };
 
 let PasswordView = Backbone.View.extend({
-  el: $('#passwords'),
-
-  initialize: function () {
+  el:'#passwords',
+  passwordTemplate: _.template($('#password-template').html()),
+  initialize: function() {
     this.alpha = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-    this.whitespace = ['.', '~', '#', '!', '$', '+', '-', '+'];
-    this.numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-    this.left = ['Alabama',
-      'Alaska',
-      'Arizona',
-      'Maryland',
-      'Nevada',
-      'Mexico',
-      'Texas',
-      'Utah',
-      'Glasgow',
-      'Inverness',
-      'Edinburgh',
-      'Dumbarton',
-      'Balloch',
-      'Renton',
-      'Cardross',
-      'Dundee',
-      'Paisley',
-      'Hamilton',
-      'Greenock',
-      'Falkirk',
-      'Irvine',
-      'Renfrew',
-      'Erskine',
-      'London',
-      'Hammersmith',
-      'Islington',
-      'Silver', 'Black', 'Yellow', 'Purple', 'White', 'Pink', 'Red', 'Orange', 'Brown', 'Green', 'Blue', 'Amber', 'Aqua', 'Azure', 'Bronze', 'Coral', 'Copper', 'Crimson', 'Cyan', 'Ginger', 'Gold', 'Indigo', 'Jade'
+this.whitespace = ['.', '~', '#', '!', '$', '+', '-', '+'];
+this.numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+this.left = ['Alabama',
+  'Alaska',
+  'Arizona',
+  'Maryland',
+  'Nevada',
+  'Mexico',
+  'Texas',
+  'Utah',
+  'Glasgow',
+  'Inverness',
+  'Edinburgh',
+  'Dumbarton',
+  'Balloch',
+  'Renton',
+  'Cardross',
+  'Dundee',
+  'Paisley',
+  'Hamilton',
+  'Greenock',
+  'Falkirk',
+  'Irvine',
+  'Renfrew',
+  'Erskine',
+  'London',
+  'Hammersmith',
+  'Islington',
+  'Silver', 'Black', 'Yellow', 'Purple', 'White', 'Pink', 'Red', 'Orange', 'Brown', 'Green', 'Blue', 'Amber', 'Aqua', 'Azure', 'Bronze', 'Coral', 'Copper', 'Crimson', 'Cyan', 'Ginger', 'Gold', 'Indigo', 'Jade'
 
-    ];
+];
 
-    this.right = ['Aganju', 'Cygni', 'Akeron', 'Antares', 'Aragoth', 'Ardus', 'Carpenter', 'Cooper', 'Dahin', 'Capella', 'Endriago', 'Gallina', 'Fenris', 'Freya', 'Glenn', 'Grissom', 'Jotunheim', 'Kailaasa', 'Lagarto', 'Muspelheim', 'Nifleheim', 'Primus', 'Vega', 'Ragnarok', 'Shepard', 'Slayton', 'Tarsis', 'Mercury', 'Venus', 'Mars', 'Earth', 'Terra', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto', 'Europa', 'Ganymede', 'Callisto', 'Titan', 'Juno', 'Eridanus', 'Scorpius', 'Crux', 'Cancer', 'Taurus', 'Lyra', 'Andromeda', 'Virgo', 'Aquarius', 'Cygnus', 'Corvus', 'Taurus', 'Draco', 'Perseus', 'Pegasus', 'Gemini', 'Columbia', 'Bootes', 'Orion', 'Deneb', 'Merope', 'Agate', 'Amber', 'Beryl', 'Calcite', 'Citrine', 'Coral', 'Diamond', 'Emerald', 'Garnet', 'Jade', 'Lapis', 'Moonstone', 'Obsidian', 'Onyx', 'Opal', 'Pearl', 'Quartz', 'Ruby', 'Sapphire', 'Topaz', 'Iron', 'Lead', 'Nickel', 'Copper', 'Zinc', 'Tin', 'Manes', 'Argon', 'Neon', 'Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliett', 'Kilo', 'Lima', 'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra', 'Tango', 'Uniform', 'Victor', 'Whisky', 'Xray', 'Yankee', 'Zulu'];
-    _.bindAll(this, 'newClick');
+  this.right = ['Aganju', 'Cygni', 'Akeron', 'Antares', 'Aragoth', 'Ardus', 'Carpenter', 'Cooper', 'Dahin', 'Capella', 'Endriago', 'Gallina', 'Fenris', 'Freya', 'Glenn', 'Grissom', 'Jotunheim', 'Kailaasa', 'Lagarto', 'Muspelheim', 'Nifleheim', 'Primus', 'Vega', 'Ragnarok', 'Shepard', 'Slayton', 'Tarsis', 'Mercury', 'Venus', 'Mars', 'Earth', 'Terra', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto', 'Europa', 'Ganymede', 'Callisto', 'Titan', 'Juno', 'Eridanus', 'Scorpius', 'Crux', 'Cancer', 'Taurus', 'Lyra', 'Andromeda', 'Virgo', 'Aquarius', 'Cygnus', 'Corvus', 'Taurus', 'Draco', 'Perseus', 'Pegasus', 'Gemini', 'Columbia', 'Bootes', 'Orion', 'Deneb', 'Merope', 'Agate', 'Amber', 'Beryl', 'Calcite', 'Citrine', 'Coral', 'Diamond', 'Emerald', 'Garnet', 'Jade', 'Lapis', 'Moonstone', 'Obsidian', 'Onyx', 'Opal', 'Pearl', 'Quartz', 'Ruby', 'Sapphire', 'Topaz', 'Iron', 'Lead', 'Nickel', 'Copper', 'Zinc', 'Tin', 'Manes', 'Argon', 'Neon', 'Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliett', 'Kilo', 'Lima', 'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra', 'Tango', 'Uniform', 'Victor', 'Whisky', 'Xray', 'Yankee', 'Zulu'];
+
+
+  this.passwordOut = this.$('#passwordOut');
+    _.bindAll(this, "newClick");
   },
   events: {
-    'click #newPassword': 'newClick'
+    "click #newPassword" : "newClick"
   },
   numberCluster: function () {
     return this.numbers.random() + this.numbers.random() + this.numbers.random();
   },
   randomAmount: function (i) {
-    let str = '';
+  let str = '';
 
-    for (let t = 0; t < i; t++) {
-      str = str + this.alpha.random();
-    }
+  for (let t = 0; t < i; t++) {
+    str = str + this.alpha.random();
+  }
 
-    return str;
-  },
-  newClick: function () {
-    let $passwordOut = $('#passwordOut');
-    let long = (this.left.random() + ' ' + this.right.random() + ' ' + this.numberCluster()).split(' ').join(this.whitespace.random());
+  return str;
+},
+  newClick: function(e) {
+    let long= (this.left.random() + ' ' + this.right.random() + ' ' + this.numberCluster()).split(' ').join(this.whitespace.random());
     let short = (this.randomAmount(5) + ' ' + this.randomAmount(5)).split(' ').join(this.whitespace.random());
 
-    let template = `<div>Long: ${long}</div><div>Short: ${short}</div>`;
-    $passwordOut.empty().append(template).removeClass('mui--hide');
+    this.passwordOut.removeClass('mui--hide');
+    this.passwordOut.empty().append(this.passwordTemplate({
+      long: long,
+      short: short
+    }));
   }
 });
 

views/pages/slackV2-min.ejs

@@ -364,7 +364,9 @@
     <div id='weather' class="mui-panel"></div>
 </div>
 
-
+<script type="text/template" id="password-template">
+      <div>Long: {{ long }}</div><div>Short: {{ short }}</div>
+	  </script>
 </body>
 <script src="live/js/vendor.js"></script>
 <script src="live/js/app.js"></script>

views/pages/slackV2.ejs

@@ -371,7 +371,9 @@
     <div id='weather' class="mui-panel"></div>
 </div>
 
-
+<script type="text/template" id="password-template">
+      <div>Long: {{= long }}</div><div>Short: {{= short }}</div>
+	  </script>
 </body>
 <script src="libs/ejs.js"></script>
 <script src="libs/moment.js"></script>