lalala 4.0.0.dev.94 → 4.0.0.dev.107

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b171c22c043ef118204cdd7464e4dfea865e2b63
-  data.tar.gz: 7945db4cb93ef5fba5fc7ebce23e2c48a2813445
+  metadata.gz: 9fe4870ded2cb186ece61a08491d8b046372cffd
+  data.tar.gz: 913c9d5ac334a19502db455822f510fc68ba262f
 SHA512:
-  metadata.gz: 2565e8749477a034ea8f823f8394570154f99ca8d780d533ba20cf944c9e995932460452f4ff58c9b0d6c9d5de455bd0d0dac27b2b3ef284a5d8bd2b188ff85f
-  data.tar.gz: 15572346f387cb324bb08812ef21fca0d4a197d28c9a17aef78dd854a2be352a15b2e7520535ac3017de08adbeb6564f50483d94e6d5e7a60103d29ef7109dc6
+  metadata.gz: d64647316d7f1866f3ce130846ddec5c61ae26c639cad037b7b6ebab2d3eeb10a96db44c15583e3c377598394d8e990b70e0cbceb1e6efec16db522450ce9438
+  data.tar.gz: 827eb682a5061fb19bc6bb53f49f880eb051715883f7470cd5ef0c80ad0c499d0bf48d1f10f3e305c0a607a26f41a33cafb44c9318151f9451e393cc0a147c82

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

@@ -15,19 +15,30 @@ Grid = (function() {
 
 
   function G(grid_element) {
+    this.selected_images = [];
+
     this.transform_html(grid_element);
     this.bind_mouse_events();
+    this.setup_mouse_selection();
   }
 
 
   G.prototype.transform_html = function(grid_element) {
-    var fragment, el, el_images, el_input, $grid;
+    var fragment, el, el_images, el_input, data_attr, $grid, $original_list;
+
+    // elements
+    $grid = $(grid_element);
+    $original_list = $grid.children("ul:first-child");
+
+    // data -> attributes
+    data_attr = "data-accessible-attributes";
+    data_attr = $original_list.attr(data_attr)
+    data_attr = data_attr ? data_attr.split(",") : [];
 
     // document fragment for the images
     fragment = document.createDocumentFragment();
 
     // transform images html
-    $grid = $(grid_element);
     $grid.find("li").not(":last-child").each(function() {
       var grid_piece = document.createElement("li");
       grid_piece.innerHTML = this.innerHTML.replace("<a", "<a class=\"image\"");
@@ -40,22 +51,47 @@ Grid = (function() {
     // create new container elements
     el = document.createElement("div");
     el.className = "mod-grid";
+
     el_images = document.createElement("ul");
     el_images.className = "images";
     el_images.appendChild(fragment);
-    el_input = document.createElement("div");
-    el_input.className = "input-fields";
-    el_input.innerHTML = $grid.find("li:last-child").html();
+
+    el_actions = document.createElement("div");
+    el_actions.className = "actions";
+    el_actions.innerHTML = "" +
+      $grid.find("li:last-child").html() +
+      '<a class="button" rel="choose-files">Choose files</a>' +
+      '<div class="files-description"></div>' +
+      '<a class="button unavailable" rel="edit">Edit selected</a>' +
+      '<a class="button unavailable" rel="destroy">destroy selected</a>';
 
     // merge
+    el.appendChild(el_actions);
     el.appendChild(el_images);
-    el.appendChild(el_input);
 
     // replace original with new
-    $grid.children("ul:first-child").replaceWith(el);
+    $original_list.replaceWith(el);
 
     // bind to instance
     this.$el = $(el);
+
+    // other layout stuff
+    this.$el.closest(".inputs").addClass("next");
+  };
+
+
+  G.prototype.check_edit_and_destroy_buttons = function() {
+    var grid = this;
+
+    this.$el.children(".actions").find('[rel="edit"], [rel="destroy"]').each(function() {
+      var $btn = $(this);
+
+      if (grid.selected_images.length === 0) {
+        $btn.addClass("unavailable");
+      } else {
+        $btn.removeClass("unavailable");
+      }
+    });
   };
 
 
@@ -68,7 +104,14 @@ Grid = (function() {
       .on("mouseleave", "li label", this.row_label_mouseleave)
       .on("mouseenter", "li label", this.row_label_mouseenter)
       .on("mouseenter", "li .image", this.row_image_mouseenter)
-      .on("click", "li .overlay", __bind(this.row_overlay_click, this));
+      .on("click", "li a", function(e) { e.preventDefault(); })
+      .on("click", "li .attributes .close-button", this.close_button_click);
+
+    this.$el.children(".actions")
+      .children("a[rel=\"choose-files\"]").on("click", this.choose_files_button_click).end()
+      .children("input[type=\"file\"]").on("change", this.file_input_change).trigger("change").end()
+      .children("a[rel=\"edit\"]").on("click", __bind(this.edit_or_destroy_selected_button_click, this)).end()
+      .children("a[rel=\"destroy\"]").on("click", __bind(this.edit_or_destroy_selected_button_click, this));
   };
 
   G.prototype.row_mouseleave = function(e) {
@@ -84,18 +127,108 @@ Grid = (function() {
   };
 
   G.prototype.row_image_mouseenter = function(e) {
-    $(this).parent().addClass("properties");
+    var $p = $(this).parent();
+    if ($p.hasClass("edit-block")) return;
+    $p.addClass("properties");
+  };
+
+  G.prototype.choose_files_button_click = function(e) {
+    $(this).parent().children("input[type=\"file\"]").trigger("click");
+  };
+
+  G.prototype.file_input_change = function(e) {
+    var val = this.files || $(this).val();
+    var $fd = $(this).parent().children(".files-description");
+
+    if (typeof val === "object") {
+      val = val.length;
+      $fd[0].innerHTML = val + " file" + (val === 1 ? "" : "s") + " chosen";
+      $fd.show();
+    }
+  };
+
+  G.prototype.edit_or_destroy_selected_button_click = function(e) {
+    var i = 0, j = this.selected_images.length,
+        $e = $(e.currentTarget), action = $e.attr("rel");
+
+    if ($e.hasClass("unavailable")) return;
+
+    for (; i<j; ++i) {
+      var id = this.selected_images[i];
+      var $row = $("#" + id).parent();
+      $row.removeClass("selected");
+      this["set_to_" + action]($row[0]);
+    }
+
+    this.selected_images.length = 0;
+    this.check_edit_and_destroy_buttons();
   };
 
-  G.prototype.row_overlay_click = function(e) {
-    e.preventDefault();
+  G.prototype.close_button_click = function(e) {
+    $(this).closest("li").removeClass("edit-block");
+  };
+
+
 
-    // $(this).parent().toggleClass("selected");
-    this.toggle_destroy( $(e.currentTarget).parent()[0] );
+  //
+  //  Mouse selection
+  //
+  G.prototype.setup_mouse_selection = function() {
+    var grid = this;
+
+    this.$el.selectable({
+      filter: "li",
+      cancel: ".actions,.button,input,textarea,button",
+      selecting: function(e, ui) {
+        $row = $(ui.selecting);
+        if (!$row.hasClass("will-destroy") && !$row.hasClass("edit-block")) {
+          $row.addClass("selected");
+        }
+      },
+      unselecting: function(e, ui) {
+        $(ui.unselecting).removeClass("selected");
+      },
+      stop: function(e, ui) {
+        var new_selected_images = [];
+        grid.$el.find(".images > li").each(function() {
+          var $t = $(this), id;
+          if ($t.hasClass("selected")) {
+            id = $t.children('input[type="hidden"]:first').attr("id");
+            new_selected_images.push(id + "");
+            id = null;
+          }
+        });
+        grid.selected_images = new_selected_images;
+        grid.check_edit_and_destroy_buttons();
+      }
+    });
   };
 
 
 
+  //
+  //  Edit
+  //
+  G.prototype.toggle_edit = function(row) {
+    if ($(row).hasClass("edit-block")) {
+      this.set_to_not_edit(row);
+    } else {
+      this.set_to_edit(row);
+    }
+  };
+
+
+  G.prototype.set_to_edit = function(row) {
+    $(row).addClass("edit-block");
+  };
+
+
+  G.prototype.set_to_not_edit = function(row) {
+    $(row).removeClass("edit-block");
+  }
+
+
+
   //
   //  Destroy
   //

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

@@ -9,6 +9,7 @@ $red:           rgb(225,70,62);
 $button_green:  rgb(162,218,137);
 $button_blue:   rgb(159,220,248);
 $button_red:    rgb(245,92,92);
+$button_yellow: $yellow;
 
 
 // fonts

data/app/assets/stylesheets/lalala/components/_buttons.css.scss

@@ -12,7 +12,7 @@
   $padding_btm:   10px;
 
   @include border-radius(4px);
-  @include single-text-shadow(rgba(0,0,0, .25), 1px, 1px, 0);
+  @include single-text-shadow(rgba(black, .25), 1px, 1px, 0);
   @include transition(background-color 300ms);
   @include user-select(none);
 
@@ -31,7 +31,7 @@
   text-transform: uppercase;
 
   &:active {
-    @include single-text-shadow(rgba(0,0,0, 0.1), 0, 0, 0);
+    @include single-text-shadow(rgba(black, 0.1), 0, 0, 0);
     color: white;
     text-decoration: none;
     padding-bottom: $padding_btm - 1;
@@ -39,7 +39,7 @@
   }
 
   &.disabled {
-    @include single-text-shadow(rgba(0,0,0, 0.1), 0, 0, 0);
+    @include single-text-shadow(rgba(black, 0.1), 0, 0, 0);
     color: white;
     text-decoration: none;
     padding-bottom: $padding_btm - 1;

data/app/assets/stylesheets/lalala/components/_forms.css.scss

@@ -7,6 +7,9 @@
 
 */
 
+$label_width: 20%;
+$input_width: 80%;
+
 form {
   margin: 0 0 1em 0;
 }
@@ -25,6 +28,11 @@ form > fieldset > legend {
   margin: 0 0 1em 0;
 }
 
+form > fieldset.next {
+  & > legend { float: left; width: $label_width; }
+  & > ol { float: right; width: $input_width; }
+}
+
 select {
   @include appearance(none);
 }
@@ -114,8 +122,6 @@ select:focus {
 
 // input line
 .input {
-  $label_width: 20%;
-  $input_width: 80%;
   position: relative;
 
   .label {
@@ -194,6 +200,25 @@ select:focus {
   clear: both;
 }
 
+// single file
+.input.single_file .file-description {
+  font-size: 12px;
+  margin-left: $label_width;
+  margin-top: 7px;
+  width: $input_width;
+
+  img {
+    display: inline-block;
+  }
+
+  span {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 8px;
+    vertical-align: top;
+  }
+}
+
 
 
 /*