fixing bootstrap 3 styles and adding tests to patterns

plone · Jan 28, 2014 · 62cd240 · 62cd240 · mister-roboto · Jan 28, 2014
1 parent 376de58
commit 62cd240
Show file tree

Hide file tree

Showing 38 changed files with 1,116 additions and 451 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -27,6 +27,7 @@ module.exports = function(grunt) {
   }
 
   karmaFiles.push({pattern: 'tests/example-resource*', included: false});
+  karmaFiles.push({pattern: 'tests/json/*.json', included: false});
   karmaFiles.push({pattern: 'tests/fakeserver*', included: false});
   karmaFiles.push({pattern: 'tests/*-test.js', included: false});
   karmaFiles.push({pattern: 'tests/**/*-test.js', included: false});

diff --git a/js/bundles/docs.js b/js/bundles/docs.js
@@ -3,7 +3,8 @@ require([
   'text!docs-getting-started',
   'text!docs-tutorial',
   'text!docs-about',
-  'bootstrap-collapse'
+  'bootstrap-collapse',
+  'mockup-fakeserver'
 ], function(Docs, GETTING_STARTED, TUTORIAL, ABOUT) {
   new Docs({
     pages: [

diff --git a/js/bundles/toolbar.js b/js/bundles/toolbar.js
@@ -160,6 +160,10 @@ define([
         .addClass('pat-modal')
         .patternModal(loginOptions);
 
+      $('#plone-action-syndication > a', self.$el)
+        .addClass('pat-modal')
+        .patternModal(loginOptions);
+
       /*** Contact form ***/
       $('#siteaction-contact > a', self.$el)
         .addClass('pat-modal')
@@ -513,7 +517,8 @@ define([
         },
         routerOptions: {
           id: 'edit',
-          pathExp: '/edit$'
+          pathExp: '/edit$',
+          expReplace: '/view'
         }
       };
       var addOptions = editOptions;
@@ -609,6 +614,43 @@ define([
 
   });
 
+
+  /* maybe hackish fix here, but.....  let's get these in and out widgets working in overlays
+   * TODO: Override all in and out widgets in python to use select2 */
+  var updateValues = function(id, $to){
+    var $container = $('#' + id + '-toDataContainer');
+    $container.empty();
+    var name = id.replace('-', '.').replace('-', '.') + ':list';
+    $to.find('option').each(function(){
+      $container.append('<input name="' + name + '" type="hidden" value="' + $(this).val() + '" />');
+    });
+  };
+
+  window.from2to = function(id){
+    var $el = $('#' + id);
+    var $selects = $el.find('select');
+    var $from = $selects.eq(0);
+    var $to = $selects.eq(1);
+    $from.find('option').each(function(){
+      if(this.selected){
+        $to.append($(this));
+      }
+    });
+    updateValues(id, $to);
+  };
+  window.to2from = function(id){
+    var $el = $('#' + id);
+    var $selects = $el.find('select');
+    var $from = $selects.eq(0);
+    var $to = $selects.eq(1);
+    $to.find('option').each(function(){
+      if(this.selected){
+        $from.append($(this));
+      }
+    });
+    updateValues(id, $to);
+  };
+
   // initialize only if we are not in top frame (we are in toolbar's iframe)
   if (window.parent !== window) {
     $('body').addClass('pat-plone-toolbar');

diff --git a/js/patterns/dropzone.js b/js/patterns/dropzone.js
@@ -76,8 +76,9 @@
 define([
   'jquery',
   'mockup-patterns-base',
-  'dropzone'
-], function($, Base, Dropzone) {
+  'dropzone',
+  'underscore'
+], function($, Base, Dropzone, _) {
   "use strict";
 
   /* we do not want this plugin to auto discover */
@@ -92,11 +93,14 @@ define([
       uploadMultiple: false,
       clickable: false,
       wrap: false,
+      addRemoveLinks: false,
       wrapperTemplate: '<div class="dropzone-container"/>',
-      resultTemplate: '<div class="dz-notice">' +
-          '<p>Drop files here...</p></div><div class="dropzone-previews"/>',
       autoCleanResults: false,
-      previewsContainer: '.dropzone-previews'
+      previewsContainer: '.dropzone-previews',
+      previewsTemplate: '<div class="dropzone-previews"></div>',
+      fileaddedClassName: 'dropping',
+      useTus: false,
+      maxFilesize: 99999999 // let's not have a max by default...
     },
     init: function() {
       var self = this;
@@ -117,7 +121,6 @@ define([
       }
       var $el = self.$el;
       if(self.options.wrap){
-        var wrapFunc = $el.wrap;
         if(self.options.wrap === 'inner'){
           $el.wrapInner(self.options.wrapperTemplate);
           $el = $el.children().eq(0);
@@ -128,18 +131,23 @@ define([
       }
       $el.append('<div class="dz-notice"><p>Drop files here...</p></div>');
       if(self.options.previewsContainer === '.dropzone-previews'){
-        $el.append('<div class="dropzone-previews"/>');
+        $el.append(self.options.previewsTemplate);
       }
 
       var autoClean = self.options.autoCleanResults;
       $el.addClass(self.options.className);
+      var fileaddedClassName = self.options.fileaddedClassName;
+      var useTus = self.options.useTus;
 
       // clean up options
       var options = $.extend({}, self.options);
       delete options.wrap;
       delete options.wrapperTemplate;
       delete options.resultTemplate;
       delete options.autoCleanResults;
+      delete options.previewsTemplate;
+      delete options.fileaddedClassName;
+      delete options.useTus;
 
       if(self.options.previewsContainer){
         /*
@@ -152,21 +160,80 @@ define([
         }
       }
 
+      options.autoProcessQueue = false;
       self.dropzone = new Dropzone($el[0], options);
       self.$dropzone = $el;
 
+
       if(autoClean){
         self.dropzone.on('complete', function(file){
           setTimeout(function(){
             $(file.previewElement).fadeOut();
           }, 3000);
         });
       }
+
+      /* customize file processing */
+      var processing = false;
+      function process(){
+        processing = true;
+        if(self.dropzone.files.length === 0){
+          processing = false;
+          self.$dropzone.removeClass(fileaddedClassName);
+          return;
+        }
+        var file = self.dropzone.files[0];
+        var $preview = $(file.previewElement);
+        if([Dropzone.SUCCESS, Dropzone.ERROR,
+                              Dropzone.CANCELED].indexOf(file.status) !== -1){
+          // remove it
+          self.dropzone.removeFile(file);
+          process();
+        }else if(file.status !== Dropzone.UPLOADING){
+          // start processing file
+          if(useTus && window.tus){
+            // use tus upload if installed
+            var $progress = $preview.find("[data-dz-uploadprogress]");
+            file.status = Dropzone.UPLOADING;
+            window.tus.upload(file, {
+              endpoint: self.options.url,
+              headers: {
+                'FILENAME': file.name
+              },
+              chunkSize: 1024 * 1024 * 5 // 5mb chunk size
+            }).fail(function(){
+              alert('Error uploading with TUS resumable uploads');
+              file.status = Dropzone.ERROR;
+            }).progress(function(e, bytesUploaded, bytesTotal){
+              var percentage = (bytesUploaded / bytesTotal * 100);
+              $progress.css('width', percentage + '%');
+              $progress.parent().css('display', 'block');
+            }).done(function(url, file){
+              file.status = Dropzone.SUCCESS;
+              self.dropzone.emit('success', file);
+              self.dropzone.emit('complete', file);
+            });
+          }else{
+            // otherwise, just use dropzone to process
+            self.dropzone.processFile(file);
+          }
+          setTimeout(process, 100);
+        }else{
+          // currently processing
+          setTimeout(process, 100);
+        }
+      }
+      self.dropzone.on('addedfile', function(){
+        self.$dropzone.addClass(fileaddedClassName);
+        setTimeout(function(){
+          if(!processing){
+            process();
+          }
+        }, 100);
+      });
     }
   });
 
   return DropzonePattern;
 
 });
-
-
diff --git a/js/patterns/modal.js b/js/patterns/modal.js
@@ -22,7 +22,9 @@
  *    # Example
  *
  *    {{ example-basic }}
+ *
  *    {{ example-long }}
+ *
  *    {{ example-tinymce }}
  *
  *
@@ -34,7 +36,6 @@
  *      <p>Indeed. Whoa whoa whoa whoa. Wait.</p>
  *    </div>
  *
- *
  * Example: example-long
  *    <a href="#modal2" class="btn btn-large btn-primary pat-modal"
  *                      data-pat-modal="width: 500">Modal long scrolling</a>

diff --git a/js/patterns/queryhelper.js b/js/patterns/queryhelper.js
@@ -149,14 +149,7 @@ define([
         dataType: 'JSON',
         quietMillis: 100,
         data: function(term, page) {
-          var opts = {
-            query: JSON.stringify({
-              criteria: self.getCriterias(term)
-            }),
-            batch: JSON.stringify(self.getBatch(page)),
-            attributes: JSON.stringify(self.options.attributes)
-          };
-          return opts;
+          return self.getQueryData(term, page);
         },
         results: function (data, page) {
           var more = (page * 10) < data.total; // whether or not there are more results available
@@ -165,7 +158,29 @@ define([
         }
       };
     },
-
+    getUrl: function(){
+      var self = this;
+      var url = self.options.vocabularyUrl;
+      if(url.indexOf('?') === -1){
+        url += '?';
+      }else{
+        url += '&';
+      }
+      return url + $.param(self.getQueryData());
+    },
+    getQueryData: function(term, page){
+      var self = this;
+      var data = {
+        query: JSON.stringify({
+          criteria: self.getCriterias(term)
+        }),
+        attributes: JSON.stringify(self.options.attributes)
+      };
+      if(page){
+        data.batch = JSON.stringify(self.getBatch(page));
+      }
+      return data;
+    },
     search: function(term, operation, value, callback, useBaseCriteria){
       if(useBaseCriteria === undefined){
         useBaseCriteria = true;