lalala 4.1.0.dev.299 → 4.1.0.dev.305

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: aff21ad204eeefac76dc2d8cc0228cf471e7a652
-  data.tar.gz: 7b71c86c78f8f818846c1a215377a6e33be9c033
+  metadata.gz: 83d329a4a1b854f2fbc863f36e6836c8024612fa
+  data.tar.gz: fc2864e92a0e8c8120decfd8d5d4aacd0f5e2289
 SHA512:
-  metadata.gz: 2fd3c377829f45890a6e263e0138ca114ee6eaf58d902cbb1b5b3a3934ec119640a8c47d333e186b9997d7f36cb4bcaf002faf01168dfd259eb0ea3954e157e8
-  data.tar.gz: f8a5bd437f23d2de42367364659ba04b540d7da857acd17c9c44944d9d2f97e64eb6b618e680e2f852bca6c4f3b83bf674fb06c3142444516796e2dcce6a0c3e
+  metadata.gz: a02aa6edd51dee002d5d2ec2bea3c776346f4d1944429646f3d23ef8a7cd67bf3088c01e3f731a04e064d9d095332c51e855c68cfd618ec5355b0b06d759a3c3
+  data.tar.gz: e959c755eef717dc4f227d0b7c94ee585111e5d977b012aee85d864b503c7e640655179feddaef226dab28f836d25cd030f862dc165d7ea296385952ff224e33

data/app/assets/javascripts/lalala/base.js

@@ -1,16 +1,26 @@
 //= require active_admin/base
 //= require_tree ./lib
-
 //= require_tree ../browser
 //= require_tree ./modules
 //= require_tree ./initializers
 //= require_self
 
-var haraway = require("lalala/initializers/haraway");
-
 $(function() {
-  haraway.init();
-});
+  var initializers = [
+    "assets", "chosen"
+  ];
 
-// TODO - refactor
-require('lalala/modules/init');
+  var modules = [
+    "calendar", "editor", "locale_chooser",
+    "sorted_pages_tree", "login", "dashboard",
+    "collapsible_pages_tree"
+  ];
+
+  for (var i=0, j=initializers.length; i<j; ++i) {
+    require("lalala/initializers/" + initializers[i]).init();
+  }
+
+  for (var m=0, n=modules.length; m<n; ++m) {
+    require("lalala/modules/" + modules[m]).init();
+  }
+});

data/app/assets/javascripts/lalala/initializers/assets.module.js

@@ -0,0 +1,13 @@
+var MultipleFilesUploader = require("lalala/modules/multiple-files-uploader");
+var SingleFileUploader = require("lalala/modules/single-file-uploader");
+
+
+exports.init = function() {
+  $("x-files[multiple-files]").each(function() {
+    new MultipleFilesUploader(this);
+  });
+
+  $("x-files[single-file]").each(function() {
+    new SingleFileUploader(this);
+  });
+};

data/app/assets/javascripts/lalala/initializers/chosen.module.js

@@ -1,3 +1,3 @@
 exports.init = function() {
-  $('select').not(".bypass-chosen").chosen();
+  $("select").not(".bypass-chosen").chosen();
 };

data/app/assets/javascripts/lalala/modules/{file-uploader-metadata.module.js → file-metadata.module.js}

@@ -2,8 +2,8 @@ var Overlay = require("lalala/modules/overlay");
 
 
 
-function FileUploaderMetadata($xfile, fileuploader) {
-  this.$el = $('<div class="mod-file-uploader-metadata" />');
+function FileMetadata($xfile, fileuploader) {
+  this.$el = $('<div class="mod-file-metadata" />');
   this.$xfile = $xfile;
   this.fileuploader = fileuploader;
 
@@ -13,7 +13,7 @@ function FileUploaderMetadata($xfile, fileuploader) {
 
 
 
-FileUploaderMetadata.prototype.render = function() {
+FileMetadata.prototype.render = function() {
   var tmpl, main_tmpl, sidebar_tmpl, img_tmpl, meta_tmpl;
   var that = this;
 
@@ -30,7 +30,7 @@ FileUploaderMetadata.prototype.render = function() {
 
   if (this.$xfile.hasClass("saved-to-db")) {
     img_tmpl = '<div class="image cover" style="background-image: url(' +
-               this.$xfile.attr("data-src-original").replace("original", "cover") + ');"></div>';
+               this.$xfile.attr("data-src-original").replace("original", "thumb") + ');"></div>';
 
     meta_tmpl = this.$xfile.find(".meta").html();
 
@@ -92,9 +92,9 @@ FileUploaderMetadata.prototype.render = function() {
 //
 //  Templates
 //
-FileUploaderMetadata.prototype.template = (function() {
+FileMetadata.prototype.template = (function() {
   return [
-    '<div class="mod-file-uploader-metadata">',
+    '<div class="mod-file-metadata">',
       '<div class="main">{{MAIN}}</div>',
       '<div class="sidebar">{{SIDEBAR}}</div>',
     '</div>'
@@ -102,7 +102,7 @@ FileUploaderMetadata.prototype.template = (function() {
 })();
 
 
-FileUploaderMetadata.prototype.main_template = (function() {
+FileMetadata.prototype.main_template = (function() {
   return [
     '<div class="fields">',
       '{{FIELDS}}',
@@ -111,7 +111,7 @@ FileUploaderMetadata.prototype.main_template = (function() {
 })();
 
 
-FileUploaderMetadata.prototype.sidebar_template = (function() {
+FileMetadata.prototype.sidebar_template = (function() {
   return [
     '{{IMAGE}}',
     '<div class="meta">{{META}}</div>',
@@ -123,7 +123,7 @@ FileUploaderMetadata.prototype.sidebar_template = (function() {
 })();
 
 
-FileUploaderMetadata.prototype.get_form_template = function() {
+FileMetadata.prototype.get_form_template = function() {
   var $x = this.fileuploader.$el.find("template.form-template");
   var x = $x.get(0);
   var wrapper = document.createElement("div");
@@ -142,13 +142,13 @@ FileUploaderMetadata.prototype.get_form_template = function() {
 //
 //  Events (General)
 //
-FileUploaderMetadata.prototype.bind_events = function() {
+FileMetadata.prototype.bind_events = function() {
   this.$el.on("click", "a.button.commit", $.proxy(this.commit_click_handler, this));
   this.$el.on("click", "a.button.cancel", $.proxy(this.cancel_click_handler, this));
 };
 
 
-FileUploaderMetadata.prototype.unbind_events = function() {
+FileMetadata.prototype.unbind_events = function() {
   this.$el.off("click");
 };
 
@@ -157,13 +157,13 @@ FileUploaderMetadata.prototype.unbind_events = function() {
 //
 //  Actions
 //
-FileUploaderMetadata.prototype.commit_click_handler = function() {
+FileMetadata.prototype.commit_click_handler = function() {
   this.copy_attributes_to_xfile();
   this.hide();
 };
 
 
-FileUploaderMetadata.prototype.cancel_click_handler = function() {
+FileMetadata.prototype.cancel_click_handler = function() {
   this.hide();
 };
 
@@ -172,7 +172,7 @@ FileUploaderMetadata.prototype.cancel_click_handler = function() {
 //
 //  Attributes
 //
-FileUploaderMetadata.prototype.copy_attributes_to_xfile = function() {
+FileMetadata.prototype.copy_attributes_to_xfile = function() {
   var $xattr = this.$xfile.find(".attributes");
   var new_attributes_container;
 
@@ -235,7 +235,7 @@ FileUploaderMetadata.prototype.copy_attributes_to_xfile = function() {
 //
 //  Other
 //
-FileUploaderMetadata.prototype.hide = function() {
+FileMetadata.prototype.hide = function() {
   this.unbind_events();
   Overlay.get_instance().hide();
 };
@@ -245,4 +245,4 @@ FileUploaderMetadata.prototype.hide = function() {
 //
 //  -> EXPORT
 //
-module.exports = FileUploaderMetadata;
+module.exports = FileMetadata;

data/app/assets/javascripts/lalala/modules/media_selector.module.js

@@ -57,7 +57,7 @@ MediaSelector.prototype.collect_data_from_self = function() {
       return $(this).attr("data-name");
     }).toArray();
 
-    $xfiles.find("x-file").each(function() {
+    $xfiles.find("x-file[data-src-original]").each(function() {
       var $xfile = $(this);
 
       data.push({

data/app/assets/javascripts/lalala/modules/{file-uploader.module.js → multiple-files-uploader.module.js}

@@ -1,9 +1,9 @@
-var FileUploaderMetadata = require("lalala/modules/file-uploader-metadata"),
+var FileMetadata = require("lalala/modules/file-metadata"),
     Overlay = require("lalala/modules/overlay");
 
 
 
-function FileUploader(xfiles_element) {
+function MultipleFilesUploader(xfiles_element) {
   this.$el = $(xfiles_element);
   this.$file_container = this.$el.find(".file-container");
   this.$form = this.$el.closest("form");
@@ -26,7 +26,7 @@ function FileUploader(xfiles_element) {
 //
 //  Templates, views, etc.
 //
-FileUploader.prototype.make_xfile_template = function() {
+MultipleFilesUploader.prototype.make_xfile_template = function() {
   var $template = this.$el.find("template.x-file-template");
   var template = $template.get(0);
   var $wrapper = $("<x-file />");
@@ -51,7 +51,7 @@ FileUploader.prototype.make_xfile_template = function() {
 };
 
 
-FileUploader.prototype.render_isempty_message_if_needed = function() {
+MultipleFilesUploader.prototype.render_isempty_message_if_needed = function() {
   if (this.$file_container.find("x-file").length === 0) {
     this.$file_container[0].innerHTML = [
       "<div class=\"is-empty\">",
@@ -66,18 +66,18 @@ FileUploader.prototype.render_isempty_message_if_needed = function() {
 };
 
 
-FileUploader.prototype.set_data_inspection_html = function(html) {
+MultipleFilesUploader.prototype.set_data_inspection_html = function(html) {
   this.$el.find("header .data-inspection").html(html);
 };
 
 
-FileUploader.prototype.clear_file_container = function() {
+MultipleFilesUploader.prototype.clear_file_container = function() {
   this.$file_container.empty();
   this.$file_container.append("<div class=\"inner-wrapper\" />");
 };
 
 
-FileUploader.prototype.show_amount_of_files = function() {
+MultipleFilesUploader.prototype.show_amount_of_files = function() {
   var amount_of_files = this.$file_container.find("x-file").length;
   var word = (amount_of_files === 1 ? "file" : "files");
 
@@ -87,7 +87,7 @@ FileUploader.prototype.show_amount_of_files = function() {
 };
 
 
-FileUploader.prototype.remove_hidden_fields_from_checkboxes = function($element) {
+MultipleFilesUploader.prototype.remove_hidden_fields_from_checkboxes = function($element) {
   $element.find("input[type=\"checkbox\"]").each(function() {
     var name = $(this).attr("name");
     $element.find('[name="' + name + '"][type="hidden"]').remove();
@@ -99,7 +99,7 @@ FileUploader.prototype.remove_hidden_fields_from_checkboxes = function($element)
 //
 //  Handle file
 //
-FileUploader.prototype.handle_file = function(file) {
+MultipleFilesUploader.prototype.handle_file = function(file) {
   this.state.files_counter++;
   this.state.files[this.state.files_counter.toString()] = file;
 
@@ -153,13 +153,13 @@ FileUploader.prototype.handle_file = function(file) {
 //
 //  -> this = file
 //
-FileUploader.prototype.file_start_handler = function(e) {
+MultipleFilesUploader.prototype.file_start_handler = function(e) {
   this.$el.removeClass("waiting");
   this.$el.addClass("uploading");
 };
 
 
-FileUploader.prototype.file_progess_handler = function(e) {
+MultipleFilesUploader.prototype.file_progess_handler = function(e) {
   if (this.$el.hasClass("error")) return;
 
   // if there are no transform -> upload percentage
@@ -174,7 +174,7 @@ FileUploader.prototype.file_progess_handler = function(e) {
 };
 
 
-FileUploader.prototype.file_err_handler = function(e) {
+MultipleFilesUploader.prototype.file_err_handler = function(e) {
   console.error("Error", this);
 
   this.$el.addClass("error");
@@ -183,19 +183,19 @@ FileUploader.prototype.file_err_handler = function(e) {
 };
 
 
-FileUploader.prototype.file_done_uploading_handler = function(e) {
+MultipleFilesUploader.prototype.file_done_uploading_handler = function(e) {
   this.$el.find(".upload-bar").addClass("done");
   this.$el.removeClass("uploading");
   this.$el.addClass("processing");
 };
 
 
-FileUploader.prototype.file_done_processing_handler = function(e) {
+MultipleFilesUploader.prototype.file_done_processing_handler = function(e) {
   this.$el.find(".process-bar").addClass("done");
 };
 
 
-FileUploader.prototype.file_done_handler = function(e) {
+MultipleFilesUploader.prototype.file_done_handler = function(e) {
   var name = this.$el.closest("x-files").attr("name");
   var pairs = format_asset_metadata(this.metadata, name + "[]");
 
@@ -209,6 +209,10 @@ FileUploader.prototype.file_done_handler = function(e) {
 
   this.$el.removeClass("processing");
   this.$el.addClass("uploaded");
+
+  // attr
+  var id = this.$el.find("input[name$=\"[id]\"]").val();
+  if (id) this.$el.attr("data-src-original", "//c.assets.sh/" + id + "/thumb");
 };
 
 
@@ -216,7 +220,7 @@ FileUploader.prototype.file_done_handler = function(e) {
 //
 //  Events - General
 //
-FileUploader.prototype.bind_events = function() {
+MultipleFilesUploader.prototype.bind_events = function() {
   var choose_handler  = $.proxy(this.choose_click_handler, this);
   var delete_handler  = $.proxy(this.xfile_btn_delete_click_handler, this);
   var meta_handler    = $.proxy(this.xfile_btn_meta_click_handler, this);
@@ -237,7 +241,7 @@ FileUploader.prototype.bind_events = function() {
 };
 
 
-FileUploader.prototype.choose_click_handler = function(e) {
+MultipleFilesUploader.prototype.choose_click_handler = function(e) {
   var accept = this.$el.attr("accept").split(",");
   var profile = this.$el.attr("profile");
 
@@ -249,7 +253,7 @@ FileUploader.prototype.choose_click_handler = function(e) {
 };
 
 
-FileUploader.prototype.defer_submit = function(e) {
+MultipleFilesUploader.prototype.defer_submit = function(e) {
   var $form = $(e.currentTarget);
 
   // prevent default behaviour
@@ -267,13 +271,13 @@ FileUploader.prototype.defer_submit = function(e) {
 };
 
 
-FileUploader.prototype.xfile_btn_delete_click_handler = function(e) {
+MultipleFilesUploader.prototype.xfile_btn_delete_click_handler = function(e) {
   var $xfile = $(e.currentTarget).closest("x-file");
   if ($xfile.length) this.toggle_destroy($xfile);
 };
 
 
-FileUploader.prototype.xfile_btn_meta_click_handler = function(e) {
+MultipleFilesUploader.prototype.xfile_btn_meta_click_handler = function(e) {
   var $xfile = $(e.currentTarget).closest("x-file"), fum;
   var main_overlay = Overlay.get_instance();
 
@@ -281,10 +285,10 @@ FileUploader.prototype.xfile_btn_meta_click_handler = function(e) {
   if (!$xfile.hasClass("uploaded")) return;
 
   // new metadata overlay-content block
-  fum = new FileUploaderMetadata($xfile, this);
+  fum = new FileMetadata($xfile, this);
   main_overlay.append_content(fum.$el);
   main_overlay.$el.find("select").chosen({ width: "80%" });
-  main_overlay.show("file-uploader-metadata");
+  main_overlay.show("file-metadata");
 };
 
 
@@ -292,7 +296,7 @@ FileUploader.prototype.xfile_btn_meta_click_handler = function(e) {
 //
 //  Destroy
 //
-FileUploader.prototype.toggle_destroy = function($xfile) {
+MultipleFilesUploader.prototype.toggle_destroy = function($xfile) {
   if ($xfile.hasClass("about-to-destroy")) {
     this.set_to_not_destroy($xfile);
   } else {
@@ -301,7 +305,7 @@ FileUploader.prototype.toggle_destroy = function($xfile) {
 };
 
 
-FileUploader.prototype.set_to_destroy = function($xfile) {
+MultipleFilesUploader.prototype.set_to_destroy = function($xfile) {
   var $destroy, $id;
 
   // add class
@@ -323,7 +327,7 @@ FileUploader.prototype.set_to_destroy = function($xfile) {
 };
 
 
-FileUploader.prototype.set_to_not_destroy = function($xfile) {
+MultipleFilesUploader.prototype.set_to_not_destroy = function($xfile) {
   $xfile.removeClass("about-to-destroy");
   $xfile.find("[name$=\"_destroy]\"]").attr("value", "0");
 };
@@ -333,7 +337,7 @@ FileUploader.prototype.set_to_not_destroy = function($xfile) {
 //
 //  Sortable
 //
-FileUploader.prototype.make_items_sortable = function() {
+MultipleFilesUploader.prototype.make_items_sortable = function() {
   this.$el.sortable({
     containment: "parent",
     items: "x-file",
@@ -373,4 +377,4 @@ function format_asset_metadata(value, prefix) {
 //
 //  -> EXPORT
 //
-module.exports = FileUploader;
+module.exports = MultipleFilesUploader;

data/app/assets/javascripts/lalala/modules/single-file-uploader.module.js

@@ -0,0 +1,197 @@
+function SingleFileUploader(xfile_element) {
+  this.$el = $(xfile_element);
+  this.$form = this.$el.closest("form");
+
+  this.bind_events();
+}
+
+
+
+//
+//  Handle file
+//
+SingleFileUploader.prototype.handle_file = function(file) {
+  var $image;
+
+  file.$el = this.$el;
+  file.el = file.$el.get(0);
+
+  // make & add thumbnail
+  image = file.$el.find(".content .image").get(0);
+  image.innerHTML = "";
+
+  if (file.type.indexOf("image") == -1) {
+    var fake_thumb = document.createElement("div");
+    fake_thumb.className = "thumb no-image";
+    image.appendChild(fake_thumb);
+
+  } else {
+    file.readThumbnailData(58, 38, function(canvas) {
+      image.appendChild(canvas);
+    });
+
+  }
+
+  // bind events
+  file.on("start", this.file_start_handler);
+  file.on("progress", this.file_progess_handler);
+  file.on("err", this.file_err_handler);
+  file.on("done:uploading", this.file_done_uploading_handler);
+  file.on("done:processing", this.file_done_processing_handler);
+  file.on("done", this.file_done_handler);
+};
+
+
+
+//
+//  Events - File handlers
+//
+//  -> this = file
+//
+SingleFileUploader.prototype.file_start_handler = function(e) {
+  this.$el.removeClass("waiting");
+  this.$el.addClass("uploading");
+};
+
+
+SingleFileUploader.prototype.file_progess_handler = function(e) {
+  var $el = this.$el;
+
+  // check
+  if ($el.hasClass("error")) {
+    return;
+  }
+
+  // if there are no transform -> upload percentage
+  if (this.transforms === 0) {
+    $el.find(".upload-bar").css("width", this.upload_percentage + "%");
+
+  // if there are -> transform percentage
+  } else {
+    $el.find(".process-bar").css("width", this.transforms_percentage + "%");
+
+  }
+};
+
+
+SingleFileUploader.prototype.file_err_handler = function(e) {
+  console.error("Error", this);
+
+  this.$el.addClass("error");
+  this.$el.find(".upload-bar").css("width", "100%");
+  this.$el.find(".process-bar").css("width", "100%");
+};
+
+
+SingleFileUploader.prototype.file_done_uploading_handler = function(e) {
+  this.$el.find(".upload-bar").addClass("done");
+  this.$el.removeClass("uploading");
+  this.$el.addClass("processing");
+};
+
+
+SingleFileUploader.prototype.file_done_processing_handler = function(e) {
+  this.$el.find(".process-bar").addClass("done");
+};
+
+
+SingleFileUploader.prototype.file_done_handler = function(e) {
+  var name = this.$el.closest("x-files").attr("name");
+  var pairs = format_asset_metadata(this.metadata, name);
+
+  for (var i in pairs) {
+    var input = document.createElement("input");
+    input.type = "hidden";
+    input.name = pairs[i].name;
+    input.value = pairs[i].value;
+    this.el.appendChild(input);
+  }
+
+  this.$el.removeClass("processing");
+  this.$el.addClass("uploaded");
+};
+
+
+
+//
+//  Events - General
+//
+SingleFileUploader.prototype.bind_events = function() {
+  var choose_handler = $.proxy(this.choose_click_handler, this);
+
+  this.$el.on("click", ".choose", choose_handler);
+
+  // when processing/uploading files -> disable form
+  Haraway.on("busy", $.proxy(function() {
+    this.$form.on("submit", this.defer_submit);
+  }, this));
+
+  // when not processing/uploading files -> resume default behaviour
+  Haraway.on("idle", $.proxy(function() {
+    this.$form.off("submit", this.defer_submit);
+  }, this));
+};
+
+
+SingleFileUploader.prototype.choose_click_handler = function(e) {
+  var accept = this.$el.attr("accept").split(",");
+  var profile = this.$el.attr("profile");
+
+  // prevent default
+  e.preventDefault();
+
+  // show choose dialog
+  Haraway.choose(accept, false, profile, $.proxy(this.handle_file, this));
+};
+
+
+SingleFileUploader.prototype.defer_submit = function(e) {
+  var $form = $(e.currentTarget);
+
+  // prevent default behaviour
+  e.preventDefault();
+
+  // disable submit button
+  $form.find("input[type=\"submit\"]").attr("disabled", "disabled");
+
+  // once processing/uploading is complete
+  // enable submit button and submit form
+  Haraway.once("idle", function() {
+    $form.find("input[type=submit]").attr("disabled", null);
+    $form.submit();
+  });
+};
+
+
+
+//
+//  Extra's
+//
+function format_asset_metadata(value, prefix) {
+  var results = [], i;
+
+  if (value instanceof Array) {
+    for (i in value) {
+      results = results.concat(format_asset_metadata(value[i], prefix + "[]"));
+    }
+    return results;
+  }
+
+  if (value === Object(value)) {
+    for (i in value) {
+      if (value.hasOwnProperty(i)) {
+        results = results.concat(format_asset_metadata(value[i], prefix + "[" + i + "]"));
+      }
+    }
+    return results;
+  }
+
+  return [{ name: prefix, value: value }];
+}
+
+
+
+//
+//  -> EXPORT
+//
+module.exports = SingleFileUploader;

data/app/assets/stylesheets/lalala/_base.css.scss

@@ -39,6 +39,7 @@
 @import "lalala/modules/dashboard";
 @import "lalala/modules/panel";
 
-@import "lalala/modules/file-uploader";
-@import "lalala/modules/file-uploader-metadata";
+@import "lalala/modules/file-metadata";
 @import "lalala/modules/media-selector";
+@import "lalala/modules/multiple-file-uploader";
+@import "lalala/modules/single-file-uploader";

data/app/assets/stylesheets/lalala/base/_mixins.css.scss

@@ -74,3 +74,14 @@
   &::-moz-placeholder { @content }
   &:-ms-input-placeholder { @content }
 }
+
+
+//
+// Calc
+//
+@mixin calc($property, $expression) {
+  #{$property}: -moz-calc(#{$expression});
+  #{$property}: -o-calc(#{$expression});
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}

data/app/assets/stylesheets/lalala/modules/{_file-uploader-metadata.css.scss → _file-metadata.css.scss}

@@ -1,10 +1,10 @@
 /*
 
-  Modules / File uploader metadata
+  Modules / File metadata
 
 */
 
-.mod-file-uploader-metadata {
+.mod-file-metadata {
   background: white;
   height: 100%;
   position: relative;

data/app/assets/stylesheets/lalala/modules/{_file-uploader.css.scss → _multiple-file-uploader.css.scss}

@@ -1,10 +1,10 @@
 /*
 
-  Modules / File uploader
+  Modules / Multiple file uploader
 
 */
 
-x-files {
+x-files[multiple-files] {
   color: #6F6F71;
   display: block;
   font-size: 12px;
@@ -122,7 +122,6 @@ x-files {
   //  X-file -- General
   //
   x-file .thumb {
-    background-color: #F3F3F3;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -131,6 +130,7 @@ x-files {
   }
 
   x-file .thumb.no-image {
+    background-color: #F3F3F3;
     background-image: icon-url("page_white");
     background-size: auto;
   }

data/app/assets/stylesheets/lalala/modules/_single-file-uploader.css.scss

@@ -0,0 +1,130 @@
+/*
+
+  Modules / Single file uploader
+
+*/
+
+x-files[single-file] {
+  color: #6F6F71;
+  display: block;
+  font-size: 12px;
+  height: 38px;
+  line-height: 38px;
+  margin: 31px 0 45px;
+  position: relative;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  .buttons,
+  .content {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+
+  //
+  //  Association
+  //
+  .association {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-left: 2px;
+    position: relative;
+    top: -1px;
+    vertical-align: middle;
+    width: 20%;
+  }
+
+
+  //
+  //  Buttons
+  //
+  .buttons {
+    border-right: 1px solid #E2E2E2;
+    bottom: 0;
+    left: 20%;
+    padding-right: 14px;
+    position: absolute;
+    text-align: right;
+    top: 0;
+
+    @media screen and (min-width: $min_width_large) {
+      // right: 511px;
+    }
+  }
+
+  .buttons .choose {
+    @include icon("folder_add");
+    background-position: left center;
+    color: #CDCDCD;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 24px;
+    padding-left: 22px;
+    padding-top: 2px;
+    white-space: nowrap;
+  }
+
+  .buttons .choose:hover {
+    color: #6F6F71;
+  }
+
+
+  //
+  //  Content
+  //
+  .content {
+    @include calc(width, "80% - 101px - 26px");
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .image {
+    float: left;
+    height: 38px;
+    width: 58px;
+  }
+
+  .image .thumb {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  .image .thumb.no-image {
+    background-color: #F3F3F3;
+    background-image: icon-url("page_white");
+    background-size: auto;
+  }
+
+  .image img,
+  .image canvas {
+    display: block;
+    height: auto;
+    opacity: 0.5;
+    width: 100%;
+
+    @include transition(
+      opacity 450ms
+    );
+  }
+
+
+  //
+  //  Statusses
+  //
+  &.uploaded .image canvas,
+  &.uploaded .image img {
+    opacity: 1;
+  }
+
+
+}

data/lib/formtastic/inputs/{haraway_input.rb → multiple_files_input.rb}

@@ -1,22 +1,27 @@
-class Formtastic::Inputs::HarawayInput
+class Formtastic::Inputs::MultipleFilesInput
   include Formtastic::Inputs::Base
 
   def to_html
     object = builder.object
-    klass = Formtastic::Inputs::HarawayInput
+
+    klass = Formtastic::Inputs::MultipleFilesInput
     param_key = "#{object.class.table_name.singularize}[#{method}]"
     title = method.to_s.pluralize.titleize
     assets = object.send(method)
-    accepts = Haraway.configuration.profiles[method.to_s].try(:accepted_file_types)
+
+    profile_name = object.class.haraway_assets[method.to_s]
+    profile = Haraway.configuration.profiles[profile_name]
+    accepts = profile.try(:accepted_file_types)
     accepts = accepts.join(", ") if accepts
+    versions = compile_versions_array(profile)
 
     sorted_assets = klass.sorted_assets(assets.clone).map do |asset|
-      klass.xfile_html(self, template, param_key, asset)
+      klass.xfile_html(self, template, param_key, asset, versions)
     end
 
-    <<-EOT
+    <<-HTML
 
-    <x-files profile="#{method}" accept="#{accepts}" name="#{param_key}">
+    <x-files multiple-files profile="#{profile_name}" accept="#{accepts}" name="#{param_key}">
       <header>
         <div class="col-a">
           <span class="name">#{title}</span>
@@ -49,11 +54,11 @@ class Formtastic::Inputs::HarawayInput
       </div>
 
       <div class="meta-versions">
-        #{ versions(method) }
+        #{ versions_html(profile) }
       </div>
     </x-files>
 
-    EOT
+    HTML
   end
 
 
@@ -72,10 +77,7 @@ class Formtastic::Inputs::HarawayInput
   end
 
 
-  def versions(profile)
-    profile = Haraway.configuration.profiles[profile.to_s]
-
-    # collect data
+  def compile_versions_array(profile)
     if profile
       versions = profile.versions.keys.map do |key|
         version = profile.versions[key.to_s]
@@ -91,13 +93,18 @@ class Formtastic::Inputs::HarawayInput
 
     end
 
-    # make html
-    versions.map do |version|
-      <<-EOS
+    # return
+    versions
+  end
+
+
+  def versions_html(profile)
+    compile_versions_array(profile).map do |version|
+      <<-HTML
         <script class="version" data-name="#{version.name}" type="application/json">
           #{version.params.to_json}
         </script>
-      EOS
+      HTML
     end.join("")
   end
 
@@ -110,16 +117,28 @@ class Formtastic::Inputs::HarawayInput
   end
 
 
-  def self.xfile_html(input, template, param_key, asset)
-    asset_url_original = (asset.url(:original) rescue "")
-    asset_url_thumb = (asset.url(:thumb) rescue "")
+  def self.xfile_html(input, template, param_key, asset, versions)
+    asset_url_original = asset.url(:original)
 
-    <<-EOT
+    # thumb
+    if versions.select { |v| v.name == "thumb" }.length >= 1
+      asset_url_thumb = asset.url(:thumb)
+    end
+
+    if asset_url_thumb
+      thumb_html = "<div class=\"thumb\" style=\"background-image: " +
+                   "url(#{ asset_url_thumb });\"></div>"
+    else
+      thumb_html = "<div class=\"thumb no-image\"></div>"
+    end
+
+    # return
+    <<-HTML
 
     <x-file class="uploaded saved-to-db" data-src-original="#{ asset_url_original }">
-      <div class="thumb" style="background-image: url(#{ asset_url_thumb });"></div>
+      #{ thumb_html }
 
-      #{ Formtastic::Inputs::HarawayInput.menu_html }
+      #{ Formtastic::Inputs::MultipleFilesInput.menu_html }
       #{ template.hidden_field_tag(param_key + "[][id]", asset.id) }
       #{ template.hidden_field_tag(param_key + "[][_destroy]", "") }
 
@@ -132,12 +151,12 @@ class Formtastic::Inputs::HarawayInput
       </div>
     </x-file>
 
-    EOT
+    HTML
   end
 
 
   def self.menu_html
-    <<-EOT
+    <<-HTML
 
     <div class="menu">
       <a data-action="delete"></a>
@@ -145,7 +164,7 @@ class Formtastic::Inputs::HarawayInput
       <a data-action="move"></a>
     </div>
 
-    EOT
+    HTML
   end
 
 end

data/lib/formtastic/inputs/single_file_input.rb

@@ -0,0 +1,78 @@
+class Formtastic::Inputs::SingleFileInput
+  include Formtastic::Inputs::Base
+
+  def to_html
+    object = builder.object
+    param_key = "#{object.class.table_name.singularize}[#{method}]"
+    title = method.to_s.titleize
+    asset = object.send(method)
+
+    profile_name = object.class.haraway_assets[method.to_s]
+    profile = Haraway.configuration.profiles[profile_name]
+    accepts = profile.try(:accepted_file_types)
+    accepts = accepts.join(", ") if accepts
+    versions = compile_versions_array(profile)
+
+    <<-HTML
+
+    <x-files single-file profile="#{profile_name}" accept="#{accepts}" name="#{param_key}">
+      <div class="association">#{ title }</div>
+
+      <div class="buttons">
+        <a class="choose">Browse file</a>
+      </div>
+
+      <div class="content">
+        <div class="image">#{ asset ? image_html(asset, versions) : "" }</div>
+        <div class="status">
+          <div class="status-title"></div>
+          <div class="status-bar">
+            <div class="upload-bar"></div>
+            <div class="process-bar"></div>
+          </div>
+        </div>
+        <div class="name"></div>
+      </div>
+    </x-files>
+
+    HTML
+  end
+
+
+  def compile_versions_array(profile)
+    if profile
+      versions = profile.versions.keys.map do |key|
+        version = profile.versions[key.to_s]
+
+        OpenStruct.new(
+          name: version.name,
+          params: version.steps.first.try(:[], "params")
+        )
+      end.compact
+
+    else
+      versions = []
+
+    end
+
+    # return
+    versions
+  end
+
+
+  def image_html(asset, versions)
+    if versions.select { |v| v.name == "thumb" }.length >= 1
+      asset_url_thumb = asset.url(:thumb)
+    end
+
+    if asset_url_thumb
+      html = "<div class=\"thumb\" style=\"background-image: " +
+                   "url(#{ asset_url_thumb });\"></div>"
+    else
+      html = "<div class=\"thumb no-image\"></div>"
+    end
+
+    html
+  end
+
+end

data/lib/lalala/version.rb

@@ -1,6 +1,6 @@
 module Lalala
   VERSION = "4.1.0"
-  BUILD   = "299"
+  BUILD   = "305"
 
   if BUILD != ("{{BUILD_NUMBER" + "}}") # prevent sed replacement (see script/ci)
     BUILD_VERSION = "#{VERSION}.dev.#{BUILD}"

data/lib/lalala.rb

@@ -37,7 +37,8 @@ module Lalala
     require 'lalala/test'
   end
 
-  require 'formtastic/inputs/haraway_input'
+  require 'formtastic/inputs/single_file_input'
+  require 'formtastic/inputs/multiple_files_input'
   require 'formtastic/form_builder_ext'
 
   autoload :ExtActionDispatch

data/test/dummy/app/admin/articles.rb

@@ -13,15 +13,16 @@ ActiveAdmin.register Article do
       f.input :body
       f.input :tags
       f.input :category, as: :select, collection: %w(A B C)
+      f.input :poster_image, as: :single_file
 
-      f.input :images, as: :haraway do |h|
+      f.input :images, as: :multiple_files do |h|
         h.inputs do
           h.input :title, as: :string
           h.input :caption, as: :text
         end
       end
 
-      f.input :downloads, as: :haraway do |h|
+      f.input :downloads, as: :multiple_files do |h|
         h.inputs do
           h.input :title, as: :string
           h.input :category, as: :select, collection: %w(X Y Z)

data/test/dummy/app/models/article.rb

@@ -1,5 +1,6 @@
 class Article < ActiveRecord::Base
-  attr_accessible :body, :title, :category, :tag_ids, :images, :downloads
+  attr_accessible :body, :title, :category, :tag_ids,
+                  :images, :downloads, :poster_image
 
   # Translations
   translates :title, :body
@@ -8,6 +9,7 @@ class Article < ActiveRecord::Base
   markdown :body
 
   # Assets
+  has_one_asset :poster_image, :images
   has_many_assets :images, :images
   has_many_assets :downloads, :downloads
 

data/test/dummy/app/pages/media_page.rb

@@ -8,7 +8,7 @@ class MediaPage < BasicPage
     f.inputs do
       f.input :title
       f.input :body
-      f.input :images, as: :haraway do |h|
+      f.input :images, as: :multiple_files do |h|
         h.inputs do
           h.input :title, as: :string
           h.input :choice, as: :select, collection: %w(A B C)

data/test/dummy/config/initializers/haraway.rb

@@ -12,10 +12,6 @@ Haraway.configure do |c|
     p.accept "image/*"
 
     p.version("thumb") do |v|
-      v.resize_to_fill(158, 110)
-    end
-
-    p.version("cover") do |v|
       v.resize_to_fill(220, 153)
     end
 
@@ -24,6 +20,8 @@ Haraway.configure do |c|
     end
   end
 
-  c.profile("downloads")
+  c.profile("downloads") do |p|
+    p.accept "*"
+  end
 
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lalala
 version: !ruby/object:Gem::Version
-  version: 4.1.0.dev.299
+  version: 4.1.0.dev.305
 platform: ruby
 authors:
 - Simon Menke
@@ -1295,8 +1295,8 @@ files:
 - app/assets/javascripts/browser/screen.module.js
 - app/assets/javascripts/browser/window.module.js
 - app/assets/javascripts/lalala/base.js
+- app/assets/javascripts/lalala/initializers/assets.module.js
 - app/assets/javascripts/lalala/initializers/chosen.module.js
-- app/assets/javascripts/lalala/initializers/haraway.module.js
 - app/assets/javascripts/lalala/lib/jquery-chosen.js
 - app/assets/javascripts/lalala/lib/jquery-markitup.js
 - app/assets/javascripts/lalala/lib/moment.js
@@ -1306,14 +1306,14 @@ files:
 - app/assets/javascripts/lalala/modules/collapsible_pages_tree.module.js
 - app/assets/javascripts/lalala/modules/dashboard.module.js
 - app/assets/javascripts/lalala/modules/editor.module.js
-- app/assets/javascripts/lalala/modules/file-uploader-metadata.module.js
-- app/assets/javascripts/lalala/modules/file-uploader.module.js
+- app/assets/javascripts/lalala/modules/file-metadata.module.js
 - app/assets/javascripts/lalala/modules/helpers.module.js
-- app/assets/javascripts/lalala/modules/init.module.js
 - app/assets/javascripts/lalala/modules/locale_chooser.module.js
 - app/assets/javascripts/lalala/modules/login.module.js
 - app/assets/javascripts/lalala/modules/media_selector.module.js
+- app/assets/javascripts/lalala/modules/multiple-files-uploader.module.js
 - app/assets/javascripts/lalala/modules/overlay.module.js
+- app/assets/javascripts/lalala/modules/single-file-uploader.module.js
 - app/assets/javascripts/lalala/modules/sorted_pages_tree.module.js
 - app/assets/javascripts/lalala/modules/storage.module.js
 - app/assets/stylesheets/lalala/_base.css.scss
@@ -1339,8 +1339,7 @@ files:
 - app/assets/stylesheets/lalala/modules/_editor-cheatsheet.css.scss
 - app/assets/stylesheets/lalala/modules/_editor-preview.css.scss
 - app/assets/stylesheets/lalala/modules/_editor.css.scss
-- app/assets/stylesheets/lalala/modules/_file-uploader-metadata.css.scss
-- app/assets/stylesheets/lalala/modules/_file-uploader.css.scss
+- app/assets/stylesheets/lalala/modules/_file-metadata.css.scss
 - app/assets/stylesheets/lalala/modules/_filter-form.css.scss
 - app/assets/stylesheets/lalala/modules/_flashes.css.scss
 - app/assets/stylesheets/lalala/modules/_footer.css.scss
@@ -1350,9 +1349,11 @@ files:
 - app/assets/stylesheets/lalala/modules/_index-footer.css.scss
 - app/assets/stylesheets/lalala/modules/_login.css.scss
 - app/assets/stylesheets/lalala/modules/_media-selector.css.scss
+- app/assets/stylesheets/lalala/modules/_multiple-file-uploader.css.scss
 - app/assets/stylesheets/lalala/modules/_panel.css.scss
 - app/assets/stylesheets/lalala/modules/_scopes.css.scss
 - app/assets/stylesheets/lalala/modules/_sidebar-section.css.scss
+- app/assets/stylesheets/lalala/modules/_single-file-uploader.css.scss
 - app/assets/stylesheets/lalala/modules/_table-tools.css.scss
 - app/assets/stylesheets/lalala/modules/_title-bar.css.scss
 - app/assets/stylesheets/lalala/modules/_utility-nav.css.scss
@@ -1387,7 +1388,8 @@ files:
 - lalala-test.gemspec
 - lalala.gemspec
 - lib/formtastic/form_builder_ext.rb
-- lib/formtastic/inputs/haraway_input.rb
+- lib/formtastic/inputs/multiple_files_input.rb
+- lib/formtastic/inputs/single_file_input.rb
 - lib/generators/lalala/assets/assets_generator.rb
 - lib/generators/lalala/assets/templates/.bowerrc
 - lib/generators/lalala/assets/templates/.jshintrc

data/app/assets/javascripts/lalala/initializers/haraway.module.js

@@ -1,8 +0,0 @@
-var FileUploader = require("lalala/modules/file-uploader");
-
-
-exports.init = function() {
-  $("x-files").each(function() {
-    new FileUploader(this);
-  });
-};

data/app/assets/javascripts/lalala/modules/init.module.js

@@ -1,20 +0,0 @@
-var console = require('browser/console'),
-    calendar = require('lalala/modules/calendar'),
-    editor = require('lalala/modules/editor'),
-    locale_chooser = require("lalala/modules/locale_chooser"),
-    sorted_pages_tree = require("lalala/modules/sorted_pages_tree"),
-    login = require("lalala/modules/login"),
-    dashboard = require("lalala/modules/dashboard"),
-    collapsible_pages_tree = require("lalala/modules/collapsible_pages_tree");
-
-$(function() {
-  login.init();
-  locale_chooser.init();
-  editor.init();
-  calendar.init();
-  sorted_pages_tree.init();
-  dashboard.init();
-  collapsible_pages_tree.init();
-
-  $('select').not(".bypass-chosen").chosen();
-});