Merge pull request #43 from agoravoting/release-17-04

Release 17 04

Gruntfile.js

@@ -19,7 +19,7 @@
 'use strict';
 
 var pkg = require('./package.json');
-var AV_CONFIG_VERSION = '3.4.0';
+var AV_CONFIG_VERSION = '17.04';
 
 //Using exclusion patterns slows down Grunt significantly
 //instead of creating a set of patterns like '**/*.js' and '!**/node_modules/**'
@@ -204,13 +204,13 @@ module.exports = function (grunt) {
           remove: ['script[data-remove!="false"]','link[data-remove!="false"]'],
           append: [
             {selector:'body',html:'<%= variables.booth_html_body_include %>'},
-            {selector:'body',html:'<!--[if lte IE 8]><script src="/booth/libcompat-v3.4.0.min.js"></script><![endif]--><!--[if gte IE 9]><script src="/booth/libnocompat-v3.4.0.min.js"></script><![endif]--><!--[if !IE]><!--><script src="/booth/libnocompat-v3.4.0.min.js"></script><!--<![endif]-->'},
+            {selector:'body',html:'<!--[if lte IE 8]><script src="/booth/libcompat-v17.04.min.js"></script><![endif]--><!--[if gte IE 9]><script src="/booth/libnocompat-v17.04.min.js"></script><![endif]--><!--[if !IE]><!--><script src="/booth/libnocompat-v17.04.min.js"></script><!--<![endif]-->'},
             {selector:'body',html:'<!--All the source code of this program under copyright. Take a look at the license details at https://github.com/agoravoting/agora-core-view/blob/master/README.md -->'},
-            {selector:'body',html:'<script src="/booth/lib-v3.4.0.min.js"></script>'},
-            {selector:'body',html:'<script src="/booth/avConfig-v3.4.0.js"></script>'},
-            {selector:'body',html:'<script src="/booth/avThemes-v3.4.0.js"></script>'},
-            {selector:'body',html:'<script src="/booth/app-v3.4.0.min.js"></script>'},
-            {selector:'body',html:'<script src="/booth/avPlugins-v3.4.0.js"></script>'},
+            {selector:'body',html:'<script src="/booth/lib-v17.04.min.js"></script>'},
+            {selector:'body',html:'<script src="/booth/avConfig-v17.04.js"></script>'},
+            {selector:'body',html:'<script src="/booth/avThemes-v17.04.js"></script>'},
+            {selector:'body',html:'<script src="/booth/app-v17.04.min.js"></script>'},
+            {selector:'body',html:'<script src="/booth/avPlugins-v17.04.js"></script>'},
             {selector:'head',html:'<link rel="stylesheet" id="theme" data-base="/booth/" href="/booth/themes/default/app.min.css">'}
           ]
         },
@@ -243,9 +243,9 @@ module.exports = function (grunt) {
           ],
           'temp/lib.js': ['<%= dom_munger.data.libjs %>'],
           'temp/app.js': ['<%= dom_munger.data.appjs %>','<%= ngtemplates.main.dest %>'],
-          'dist/avConfig-v3.4.0.js': ['avConfig.js'],
-          'dist/avThemes-v3.4.0.js': ['bower_components/avCommon/dist/avThemes-v3.4.0.js'],
-          'dist/avPlugins-v3.4.0.js': ['plugins/**/*.js']
+          'dist/avConfig-v17.04.js': ['avConfig.js'],
+          'dist/avThemes-v17.04.js': ['bower_components/avCommon/dist/avThemes-v17.04.js'],
+          'dist/avPlugins-v17.04.js': ['plugins/**/*.js']
         }
       }
     },
@@ -277,10 +277,10 @@ module.exports = function (grunt) {
           beautify: true
         },
         files: {
-          'dist/app-v3.4.0.min.js': 'temp/app.js',
-          'dist/lib-v3.4.0.min.js': 'temp/lib.js',
-          'dist/libnocompat-v3.4.0.min.js': 'temp/libnocompat.js',
-          'dist/libcompat-v3.4.0.min.js': 'temp/libcompat.js',
+          'dist/app-v17.04.min.js': 'temp/app.js',
+          'dist/lib-v17.04.min.js': 'temp/lib.js',
+          'dist/libnocompat-v17.04.min.js': 'temp/libnocompat.js',
+          'dist/libcompat-v17.04.min.js': 'temp/libcompat.js',
           'dist/avWidgets.min.js': 'avWidgets.js',
 
           "dist/locales/moment/en.js": "bower_components/moment/lang/en-gb.js",

app.js

@@ -35,6 +35,7 @@ angular.module(
   'avBooth',
   'avTest',
   'avCrypto',
+  'is-js',
   'angularFileUpload',
   'dndLists',
   'angularLoad',

app.less

@@ -38,6 +38,7 @@
 @import "avBooth/pairwise-beta-directive/pairwise-beta-directive.less";
 @import "avBooth/multi-question-directive/multi-question-directive.less";
 @import "avBooth/selected-options-directive/selected-options-directive.less";
+@import "avBooth/too-few-answers-controller/too-few-answers-controller.less";
 @import "avBooth/simultaneous-questions-screen-directive/simultaneous-questions-screen-directive.less";
 @import "avBooth/start-screen-directive/start-screen-directive.less";
 @import "avBooth/circle-option-directive/circle-option-directive.less";

avBooth/accordion-option-directive/accordion-option-directive.html

@@ -6,12 +6,14 @@
     'preset': isPreset}"
   ng-click="!isPreset && toggleSelectItem(option)">
 
-  <span class="label label-default" ng-if="showCategory && !!option.category">
+  <span
+    class="label label-default"
+    ng-if="showCategory && !!option.category">
     {{option.category}}
   </span>
 
   <div
-    ng-if="!!isYoutube(option)"
+    ng-if="!!isYoutube(option) && !isTouchDevice"
     class="videoWrapper">
     <iframe
       width="560"
@@ -21,11 +23,12 @@
       allowfullscreen>
     </iframe>
   </div>
-  <div class="vertilize">
+  <div
+    class="vertilize">
     <div class="vertilize-col vert-align-top">
       <img
         parent
-        ng-if="!isYoutube(option) && !!urls['Image URL']"
+        ng-if="!isTouchDevice && !isYoutube(option) && !!urls['Image URL']"
         ng-src="{{urls['Image URL']}}"
         alt="{{option.text}}" />
     </div>
@@ -45,23 +48,84 @@
             </span>
           </span>
         </strong>
-        <p class="details" ng-if="option.details && option.details.length > 1" ng-bind-html="option.details">
+        <p class="details visible-lg" ng-if="(dnd_disable || !selectedOptions || (!!selectedOptions && !isTouchDevice)) && option.details && option.details.length > 1" ng-bind-html="option.details">
+        <p class="details hidden-lg" ng-if="!selectedOptions && option.details && option.details.length > 1" ng-bind-html="option.details">
         </p>
       </div>
     </div>
   </div>
 
   <!-- remove action -->
-  <div class="show-remove">
-    <div class="vertilize-wrapper">
-      <div class="vertilize">
-        <div class="vertilize-col">
-          <span ng-i18next="avBooth.removeSelectedItem"></span>
-          <span class="glyphicon glyphicon-remove"></span>
+  <div class="visible-lg">
+    <div
+      class="show-remove"
+      ng-if="!selectedOptions || !!dnd_disable">
+      <div class="vertilize-wrapper">
+        <div class="vertilize">
+          <div class="vertilize-col ">
+            <span ng-i18next="avBooth.removeSelectedItem"></span>
+            <span class="glyphicon glyphicon-remove"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="show-remove gray-bg"
+      ng-if="!!selectedOptions && !dnd_disable">
+      <div class="vertilize-wrapper">
+        <div class="vertilize">
+          <div class="vertilize-col">
+            <div class="pull-left margin-left">
+              <span ng-i18next="avBooth.removeSelectedItem"></span>
+              <span class="glyphicon glyphicon-remove"></span>
+            </div>
+          </div>
+          <div class="vertilize-col">
+            <div class="pull-right margin-right">
+              <span class="glyphicon glyphicon-random"></span>
+              <span ng-i18next="avBooth.dragSelectedItem"></span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
+
+  <div class="hidden-lg">
+    <div
+      class="show-remove"
+      ng-if="!selectedOptions || !!dnd_disable">
+      <div class="vertilize-wrapper">
+        <div class="vertilize">
+          <div class="vertilize-col ">
+            <span ng-i18next="avBooth.removeSelectedItemShort"></span>
+            <span class="glyphicon glyphicon-remove"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="show-remove gray-bg"
+      ng-if="!!selectedOptions && !dnd_disable">
+      <div class="vertilize-wrapper">
+        <div class="vertilize">
+          <div class="vertilize-col">
+            <div class="pull-left margin-left">
+              <span ng-i18next="avBooth.removeSelectedItemShort"></span>
+              <span class="glyphicon glyphicon-remove"></span>
+            </div>
+          </div>
+          <div class="vertilize-col">
+            <div class="pull-right margin-right">
+              <span class="glyphicon glyphicon-random"></span>
+              <span ng-i18next="avBooth.dragSelectedItemShort"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </div>
 
 <!-- show the link if needed -->

avBooth/accordion-option-directive/accordion-option-directive.js

@@ -22,6 +22,7 @@ angular.module('avBooth')
   .directive('avbAccordionOption', function($sce) {
 
     var link = function(scope, element, attrs) {
+
       scope.urls = _.object(_.map(scope.option.urls, function(url) {
         return [url.title, url.url];
       }));
@@ -105,6 +106,10 @@ angular.module('avBooth')
           "pairwise-beta": function()
           {
             return;
+          },
+          "desborda": function()
+          {
+            return 80 - scope.option.selected;
           }
         }[scope.question.tally_type]();
       };

avBooth/accordion-option-directive/accordion-option-directive.less

@@ -102,9 +102,8 @@
   a.btn-right {
     display: block;
     position: absolute;
-    right: 0;
+    right: 15px;
     top: 5px;
-    width: 50px;
     padding: 5px;
     margin-right: 5px;
     background-color: transparent;
@@ -117,6 +116,12 @@
     .view-link-text {
       padding-left: 4px;
     }
+
+    &:hover {
+      .glyphicon, .view-link-text {
+        color: @av-primary;
+      }
+    }
   }
 
   .show-remove {
@@ -133,9 +138,21 @@
     .vertilize-wrapper {
       width: 100%;
       height: 100%;
+
+      .margin-right {
+        margin-right: 15px;
+      }
+
+      .margin-left {
+        margin-left: 15px;
+      }
     }
   }
 
+  .show-remove.gray-bg {
+    background-color: fade(@av-secondary, 80%);
+  }
+
   &.selected.highlight-selected {
     color: @av-primary;
     background-color: @av-secondary;

avBooth/accordion-options-directive/accordion-options-directive.html

@@ -9,19 +9,41 @@
     <div accordion-group ng-repeat="category in nonEmptyCategories" is-open="category.isOpen"
         ng-class="{'in': category.isOpen}">
       <div accordion-heading>
-        <span class="heading-cat-title">{{category.title}}</span>
-        <span
-          class="pull-right glyphicon"
-          ng-class="{'glyphicon-chevron-down': category.isOpen, 'glyphicon-chevron-right': !category.isOpen}">
+        <span class="pull-right">
+          <span
+            class="accordion-num-label label label-primary"
+            ng-if="(category.options | avbSelectedOptions).length > 0">
+            {{(category.options | avbSelectedOptions).length }}
+          </span>
+          <span
+            ng-if="enable_select_categories_1click && canSelect(category)"
+            ng-click="toggleCategory(category, $event)">
+            <span
+              class="accordion-plancha-label label label-primary"
+              ng-if="!category.isSelected">
+              <span class="glyphicon glyphicon-check"></span>
+              <span ng-i18next="avBooth.planchaSelect"></span>
+            </span>
+            <span
+              class="accordion-plancha-label label label-primary"
+              ng-if="category.isSelected">
+              <span class="glyphicon glyphicon-remove"></span>
+              <span ng-i18next="avBooth.planchaDeselect"></span>
+            </span>
+          </span>
+          <span
+            class="glyphicon"
+            ng-class="{'glyphicon-chevron-down': category.isOpen, 'glyphicon-chevron-right': !category.isOpen}">
+          </span>
         </span>
-        <span class="accordion-num-label pull-right label label-primary"
-          ng-if="(category.options | avbSelectedOptions).length > 0">
-          {{(category.options | avbSelectedOptions).length }}
+        <span class="heading-cat-title">
+          {{category.title}}
         </span>
       </div>
       <div avb-accordion-option
         ng-repeat="option in category.options"
         class="animate-repeat highlight-selected"
+        ng-click="updateSelectionCategories()"
         ng-class="{selected: option.selected > -1}">
       </div>
     </div>

avBooth/accordion-options-directive/accordion-options-directive.js

@@ -25,6 +25,51 @@ angular.module('avBooth')
   .directive('avbAccordionOptions', function() {
 
     var link = function(scope, element, attrs) {
+      // enable selecting and deselecting a category with a single click
+      scope.enable_select_categories_1click = false;
+
+      if (angular.isDefined(scope.question.extra_options)) {
+        scope.enable_select_categories_1click = !!scope.question.extra_options.select_categories_1click;
+      }
+
+      scope.numSelectedByCategory = function (category) {
+        return _.filter(
+                 category.options,
+                 function (element) {
+                   return -1 < element.selected || true === element.isSelected;
+                 }
+               ).length;
+      };
+
+      scope.canSelect = function (category) {
+          var selectedOptions = scope.numSelectedOptions();
+          var selectedOnThisCat = scope.numSelectedByCategory(category);
+          var newSelectedOptions = 
+            selectedOptions - selectedOnThisCat + category.options.length;
+          return scope.question.max >= newSelectedOptions;
+      };
+
+      scope.toggleCategory = function (category, $event) {
+        $event.stopPropagation();
+        category.isSelected = scope.categoryIsSelected(category);
+        if (category.isSelected) {
+          // deselect
+          _.each(category.options, function (el) {
+            if (-1 < el.selected || true === element.isSelected) {
+              scope.toggleSelectItem(el);
+            }
+          });
+        } else {
+          // select
+          _.each(category.options, function (el) {
+            if (-1 === el.selected || false === element.isSelected) {
+              scope.toggleSelectItem(el);
+            }
+          });
+        }
+        category.isSelected = scope.categoryIsSelected(category);
+      };
+
       // group by category
       var categories = _.groupBy(scope.options, "category");
       scope.folding_policy = undefined;
@@ -43,10 +88,17 @@ angular.module('avBooth')
         return {
           title: title,
           options: answers,
-          isOpen: (scope.folding_policy === "unfold-all")
+          isOpen: (scope.folding_policy === "unfold-all"),
+          isSelected: false
         };
       });
 
+      scope.updateSelectionCategories = function () {
+        _.each(scope.categories, function(category) {
+          category.isSelected = scope.categoryIsSelected(category);
+        });
+      };
+
       // apply shuffling policy
       if (angular.isDefined(scope.question.extra_options)) {
         if(!!scope.question.extra_options.shuffle_categories) {
@@ -86,14 +138,6 @@ angular.module('avBooth')
         }).length === category.options.length;
       };
 
-      scope.deselectAll = function(category) {
-        _.each(category.options, function(el) {
-          if (el.selected > -1) {
-            scope.toggleSelectItem2(el);
-          }
-        });
-      };
-
       scope.numSelectedOptions = function () {
         return _.filter(
           scope.options,