Merge lp:~stephen-stewart/snapweb/install-as-behaviour into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

make install a behavior, use it in snaplist

[John Lenton (chipaca)]

review: Approve

[Snappy Tarmac (snappydevtarmac)]

The attempt to merge lp:~stephen-stewart/webdm/install-as-behaviour into lp:webdm failed. Below is the output from the failed tests.

Checking formatting
Installing godeps
Install golint

# we always run in a fresh dir in tarmac
export GOPATH=$(mktemp -d)
trap 'rm -rf "$GOPATH"' EXIT

# this is a hack, but not sure tarmac is golang friendly
mkdir -p $GOPATH/src/launchpad.net/webdm
cp -a . $GOPATH/src/launchpad.net/webdm/
cd $GOPATH/src/launchpad.net/webdm

./run-checks
# cd .; git clone https://go.googlesource.com/tools /tmp/tmp.NEcYIte9FM/src/golang.org/x/tools
Cloning into '/tmp/tmp.NEcYIte9FM/src/golang.org/x/tools'...
error: RPC failed; result=7, HTTP code = 0
fatal: The remote end hung up unexpectedly
package github.com/golang/lint/golint
 imports golang.org/x/tools/go/gcimporter: exit status 128
package github.com/golang/lint/golint
 imports golang.org/x/tools/go/types
 imports golang.org/x/tools/go/types
 imports golang.org/x/tools/go/types: cannot find package "golang.org/x/tools/go/types" in any of:
 /usr/lib/go/src/pkg/golang.org/x/tools/go/types (from $GOROOT)
 /tmp/tmp.NEcYIte9FM/src/golang.org/x/tools/go/types (from $GOPATH)

=== modified file 'www/src/css/installer.css'
--- www/src/css/installer.css	2015-05-05 15:17:29 +0000
+++ www/src/css/installer.css	2015-05-07 08:17:05 +0000
@@ -1,7 +1,6 @@
 .b-installer {
   position:relative;
   width:300px;
-  padding-bottom:9px;
 }
 
 .b-installer__button {
@@ -62,6 +61,6 @@
   transition: right 0.1s;
 }
 
-.b-installer--thinking .b-installer__progress {
+.b-installer--thinking.b-installer--install .b-installer__progress {
   display:block;
 }

=== modified file 'www/src/css/snaplist.css'
--- www/src/css/snaplist.css	2015-04-30 14:44:46 +0000
+++ www/src/css/snaplist.css	2015-05-07 08:17:05 +0000
@@ -25,14 +25,14 @@
   width:100%;
 }
 
-.b-snaplist--grid .b-snaplist__label {
+.b-snaplist--grid .b-snaplist__name {
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.b-snaplist--grid .b-snaplist__label ~ * {
+.b-snaplist--grid .b-snaplist__name ~ * {
   display:none;
 }
 
@@ -62,10 +62,10 @@
   height: 40px;
 }
 
-.b-snaplist--row .b-snaplist__label,
-.b-snaplist--row .b-snaplist__author,
-.b-snaplist--row .b-snaplist__title {
-  flex:2;
+.b-snaplist--row .b-snaplist__name,
+.b-snaplist--row .b-snaplist__type,
+.b-snaplist--row .b-snaplist__origin {
+  flex:1 1;
   margin:0 1em;
   white-space: nowrap;
   width: 100%;
@@ -73,50 +73,15 @@
   text-overflow: ellipsis;
 }
 
-.b-snaplist--row .b-snaplist__label {
-  min-width:100px;
-}
-
-.b-snaplist--row .b-snaplist__title {
-  flex:4 1;
-}
-
-.b-snaplist--row .b-snaplist__install {
-  flex:3;
-  margin:0 1em;
-  min-width:100px;
-}
-
-/**
-
-.b-snaplist__item a,
-.b-snaplist__item a:link,
-.b-snaplist__item a:hover,
-.b-snaplist__item a:visited {
-    color: #333333;
-}
-
-.b-snaplist__snap-icon {
-    text-align:center;
-}
-
-.b-snaplist__snap-icon img {
-  border-radius:5%;
-}
-
-.b-snaplist__snap-icon:hover {
-    background: #efefef;
-}
-
-.b-snaplist__snap-label {
-    font-weight: 400;
-    text-align: center;
-    display: block;
-    cursor: pointer;
-    font-size: 1em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-**/
+.b-snaplist--row .b-snaplist__version {
+  min-width:100px;
+}
+
+.b-snaplist--row .b-snaplist__type {
+  text-align:center;
+}
+
+.b-snaplist--row .b-installer__message {
+  /** XXX hmm **/
+  display:none;
+}

=== added directory 'www/src/js/behaviors'
=== added file 'www/src/js/behaviors/install.js'
--- www/src/js/behaviors/install.js	1970-01-01 00:00:00 +0000
+++ www/src/js/behaviors/install.js	2015-05-07 08:17:05 +0000
@@ -0,0 +1,100 @@
+// install behavior
+var _ = require('lodash');
+var Backbone = require('backbone');
+var Marionette = require('backbone.marionette');
+var CONF = require('../config.js');
+
+module.exports = Marionette.Behavior.extend({
+  events: {
+    'click @ui.installerButton': 'onInstallClick'
+  },
+
+  modelEvents: {
+    'change:installHTMLClass': 'onHTMLClassChange',
+    'change:status': 'onStatusChange',
+    'change:progress': 'onProgressChange'
+  },
+
+  ui: {
+    errorMessage: '.b-installer__error',
+    statusMessage: '.b-installer__message',
+    installer: '.b-installer',
+    installerButton: '.b-installer__button',
+    installerProgress: '.b-installer__value'
+  },
+
+  onHTMLClassChange: function(model) {
+    var installer = this.ui.installer;
+    installer.removeClass(model.previous('installHTMLClass'))
+    .addClass(model.get('installHTMLClass'));
+  },
+
+  onStatusChange: function(model) {
+    var oldState = model.previous('status');
+    var state = model.get('status');
+    var msg = model.get('installActionString');
+    var installer = this.ui.installer;
+    var installerButton = this.ui.installerButton;
+
+    // reset progress 
+    this.ui.installerProgress.css('right', '100%');
+
+    if (_.contains(CONF.INSTALL_STATE, state)) {
+      installerButton.text(msg);
+    } else {
+      // in the rare case that a status isn't one we're expecting,
+      // remove the install button
+      installer.remove();
+    }
+
+    if (
+      state === CONF.INSTALL_STATE.INSTALLED &&
+      oldState === CONF.INSTALL_STATE.INSTALLING
+    ) {
+      this.ui.statusMessage.text('Install successful!');
+    } else {
+      this.ui.statusMessage.text('');
+    }
+
+    if (
+      state === CONF.INSTALL_STATE.UNINSTALLED &&
+      oldState === CONF.INSTALL_STATE.UNINSTALLING
+    ) {
+      this.ui.statusMessage.text('Uninstall successful!');
+    }
+  },
+
+  onProgressChange: function(model) {
+    var state = model.get('status');
+    var progress;
+
+    if (state === CONF.INSTALL_STATE.INSTALLING) {
+      progress = (100 - (model.get('progress') | 0)) + '%';
+      this.ui.installerProgress.css('right', progress);
+    }
+  },
+
+  onInstallClick: function(e) {
+    var model = this.view.model;
+    var status = model.get('status');
+
+    if (status === CONF.INSTALL_STATE.INSTALLED) {
+      // uninstall
+      model.set({
+        status: CONF.INSTALL_STATE.UNINSTALLING
+      });
+      model.destroy({
+        dataType : 'html'
+      });
+    } else if (status === CONF.INSTALL_STATE.UNINSTALLED) {
+      // install
+      model.save({
+        status: CONF.INSTALL_STATE.INSTALLING
+      }, {
+        dataType : 'html'
+      });
+    } else {
+      e.preventDefault();
+    }
+  }
+});

=== modified file 'www/src/js/models/snap.js'
--- www/src/js/models/snap.js	2015-05-06 15:01:46 +0000
+++ www/src/js/models/snap.js	2015-05-07 08:17:05 +0000
@@ -50,15 +50,11 @@
       chan.command('alert:error', model);
     });
 
-    this.on('change:message', this.onMessageChange);
+    this.on('add change:message', this.onMessageChange);
 
     this.on('add change:status', this.handleStatusChange);
   },
 
-  onMessageChange: function(model) {
-    console.log('message:', model.get('message'));
-  },
-
   handleStatusChange: function(model) {
     this.setInstallActionString(model);
     this.setInstallHTMLClass(model);
@@ -116,15 +112,22 @@
   },
 
   parse: function(response) {
+
     if (response.hasOwnProperty('icon') && !response.icon.length) {
       response.icon = this.defaults.icon;
     }
+
+    if (response.hasOwnProperty('origin') && !response.origin.length) {
+      response.origin = this.defaults.origin;
+    }
+
     return response;
   },
 
   defaults: {
     icon: '/public/images/default-package-icon.svg',
-    installActionString: false
+    installActionString: false,
+    origin: '-'
   }
 
 });

=== modified file 'www/src/js/templates/snap-layout.hbs'
--- www/src/js/templates/snap-layout.hbs	2015-05-05 15:17:29 +0000
+++ www/src/js/templates/snap-layout.hbs	2015-05-07 08:17:05 +0000
@@ -18,9 +18,5 @@
     </div>
   </div>
 </div>
-<div class="b-installer__error">{{ message }}</div>
-
 <div class="region-menu"></div>
-
-
 <div class="region-tab"></div>

=== modified file 'www/src/js/templates/snaplist-item.hbs'
--- www/src/js/templates/snaplist-item.hbs	2015-05-04 16:44:28 +0000
+++ www/src/js/templates/snaplist-item.hbs	2015-05-07 08:17:05 +0000
@@ -1,6 +1,19 @@
 <div class="b-snaplist__icon">
   <img src="{{ icon }}" alt="{{ name }} icon">
 </div>
-<div class="b-snaplist__label">{{ name }}</div>
-<div class="b-snaplist__title">{{ version }}</div>
-<div class="b-snaplist__author">{{ origin }}</div>
+<div class="b-snaplist__name">{{ name }}</div>
+{{!-- only name is shown in grid view, everything after is hidden --}}
+<div class="b-snaplist__version">{{ version }}</div>
+<div class="b-snaplist__origin">{{ origin }}</div>
+<div class="b-snaplist__type">{{ type }}</div>
+<div class="b-snaplist__actions">
+  <div class="b-installer {{ installHTMLClass }}">
+    {{#if installActionString}}
+    <div class="b-installer__button">{{ installActionString }}</div>
+    <div class="b-installer__progress" title="download progress">
+      <div class="b-installer__value"></div>
+    </div>
+    {{/if}}
+    <div class="b-installer__message"></div>
+  </div>
+</div>

=== modified file 'www/src/js/views/snap-layout.js'
--- www/src/js/views/snap-layout.js	2015-05-06 15:01:46 +0000
+++ www/src/js/views/snap-layout.js	2015-05-07 08:17:05 +0000
@@ -6,89 +6,29 @@
 var SnapDetailView = require('./snap-detail.js');
 var SnapReviewsView = require('./snap-reviews.js');
 var SnapSettingsView = require('./snap-settings.js');
+var InstallBehavior = require('../behaviors/install.js');
 var template = require('../templates/snap-layout.hbs');
 var CONF = require('../config.js');
 
 module.exports = Marionette.LayoutView.extend({
 
-  initialize: function() {
-    this.listenTo(
-      this.model, 'change:installHTMLClass', this.onModelHTMLClassChange
-    );
-    this.listenTo(
-      this.model, 'change:status', this.onModelStatusChange
-    );
-    this.listenTo(
-      this.model, 'change:progress', this.onProgressChange
-    );
+  behaviors: {
+    InstallBehavior: {
+      behaviorClass: InstallBehavior
+    }
   },
 
   onShow: function() {
     window.scrollTo(0, 0);
   },
 
-  onProgressChange: function(model) {
-    var state = model.get('status');
-    var progress;
-
-    if (state === CONF.INSTALL_STATE.INSTALLING) {
-      progress = (100 - (model.get('progress') | 0)) + '%';
-      this.ui.installerProgress.css('right', progress);
-    }
-  },
-
-  onModelHTMLClassChange: function(model) {
-    var installer = this.ui.installer;
-    installer.removeClass(model.previous('installHTMLClass'))
-    .addClass(model.get('installHTMLClass'));
-  },
-
-  onModelStatusChange: function(model) {
-    var oldState = model.previous('status');
-    var state = model.get('status');
-    var msg = model.get('installActionString');
-    var installer = this.ui.installer;
-    var installerButton = this.ui.installerButton;
-
-    // reset progress
-    this.ui.installerProgress.css('right', '100%');
-
-    if (_.contains(CONF.INSTALL_STATE, state)) {
-      installerButton.text(msg);
-    } else {
-      // in the rare case that a status isn't one we're expecting,
-      // remove the install button
-      installer.remove();
-    }
-
-    if (
-      state === CONF.INSTALL_STATE.INSTALLED &&
-      oldState === CONF.INSTALL_STATE.INSTALLING
-    ) {
-      this.ui.statusMessage.text('Install successful!');
-    }
-
-    if (
-      state === CONF.INSTALL_STATE.UNINSTALLED &&
-      oldState === CONF.INSTALL_STATE.UNINSTALLING
-    ) {
-      this.ui.statusMessage.text('Uninstall successful!');
-    }
-  },
-
   className: 'b-snap',
 
   ui: {
-    errorMessage: '.b-installer__error',
-    statusMessage: '.b-installer__message',
-    installer: '.b-installer',
-    installerButton: '.b-installer__button',
-    installerProgress: '.b-installer__value',
     menu: '.b-snap__nav-item'
   },
 
   events: {
-    'click @ui.installerButton': 'install',
     'click @ui.menu': 'section'
   },
 
@@ -117,25 +57,6 @@
     tabRegion: '.region-tab'
   },
 
-  install: function(e) {
-    var status = this.model.get('status');
-
-    if (status === CONF.INSTALL_STATE.INSTALLED) {
-      // uninstall
-      this.model.set({
-        status: CONF.INSTALL_STATE.UNINSTALLING
-      });
-      this.model.destroy();
-    } else if (status === CONF.INSTALL_STATE.UNINSTALLED) {
-      // install
-      this.model.save({
-        status: CONF.INSTALL_STATE.INSTALLING
-      });
-    } else {
-      e.preventDefault();
-    }
-  },
-
   _getSectionView: function(section) {
     var view;
     switch (section) {

=== modified file 'www/src/js/views/snaplist-item.js'
--- www/src/js/views/snaplist-item.js	2015-04-24 11:15:41 +0000
+++ www/src/js/views/snaplist-item.js	2015-05-07 08:17:05 +0000
@@ -1,7 +1,10 @@
 // snap item view
+var $ = require('jquery');
 var Backbone = require('backbone');
+Backbone.$ = $;
 var Marionette = require('backbone.marionette');
 var Radio = require('backbone.radio');
+var InstallBehavior = require('../behaviors/install.js');
 var template = require('../templates/snaplist-item.hbs');
 var snapChannel = Radio.channel('snap');
 
@@ -17,8 +20,16 @@
     'click': 'showSnap'
   },
 
+  behaviors: {
+    InstallBehavior: {
+      behaviorClass: InstallBehavior
+    }
+  },
+
   showSnap: function(e) {
     e.preventDefault();
-    snapChannel.command('show', this.model);
+    if (!$(e.target).is('.b-installer__button')) {
+      snapChannel.command('show', this.model);
+    }
   }
 });

=== modified file 'www/tests/snapLayoutViewSpec.js'
--- www/tests/snapLayoutViewSpec.js	2015-05-05 14:40:14 +0000
+++ www/tests/snapLayoutViewSpec.js	2015-05-07 08:17:05 +0000
@@ -14,6 +14,8 @@
       model: this.model
     });
     this.view.render();
+
+    this.uiInstaller = this.view.$el.find('.b-installer'); 
   });
 
   afterEach(function() {
@@ -29,27 +31,27 @@
 
   it('should be thinking when installing', function() {
     this.model.set('status', CONF.INSTALL_STATE.INSTALLING);
-    expect(this.view.ui.installer.hasClass('b-installer--thinking')).toBeTruthy();
+    expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeTruthy();
   });
 
   it('should be thinking when uninstalling', function() {
     this.model.set('status', CONF.INSTALL_STATE.UNINSTALLING);
-    expect(this.view.ui.installer.hasClass('b-installer--thinking')).toBeTruthy();
+    expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeTruthy();
   });
 
   it('should not be thinking when installed', function() {
     this.model.set('status', CONF.INSTALL_STATE.INSTALLED);
-    expect(this.view.ui.installer.hasClass('b-installer--thinking')).toBeFalsy();
+    expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeFalsy();
   });
 
   it('should not be thinking when uninstalled', function() {
     this.model.set('status', CONF.INSTALL_STATE.UNINSTALLED);
-    expect(this.view.ui.installer.hasClass('b-installer--thinking')).toBeFalsy();
+    expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeFalsy();
   });
 
   it('should deactivate install button if model has unrecognised status', function() {
     this.model.set('status', '');
-    expect(this.view.ui.installer).not.toBe();
+    expect(this.uiInstaller).not.toBe();
   });
 
   xit('should inform user when install succeeds', function() {