lalala 4.0.0.dev.416 → 4.1.0.dev.299

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

@@ -0,0 +1,250 @@
+var Overlay = require("./overlay");
+
+
+function MediaSelector() {
+  this.$el = $('<div class="mod-media-selector" />');
+
+  // settings
+  this.settings = {
+    selected_class: "selected",
+    selected_data: "SELF"
+  };
+
+  // data
+  this.selected_ids = [];
+  this.last_rendered_data = [];
+
+  // exec
+  this.collect_data_and_render();
+  this.bind_events();
+}
+
+
+
+//
+//  Data & Render
+//
+MediaSelector.prototype.collect_data_and_render = function() {
+  var data;
+
+  // fetch arguments
+  switch (this.settings.selected_data) {
+    case "SELF":
+      data = this.collect_data_from_self();
+      break;
+
+    case "ALL":
+      data = [];
+      break;
+  }
+
+  // render
+  this.render(data);
+
+  // versions
+  this.setup_version_option();
+};
+
+
+MediaSelector.prototype.collect_data_from_self = function() {
+  var data = [];
+
+  $("x-files[accept*=\"image\"]").each(function() {
+    var $xfiles = $(this);
+    var versions;
+
+    versions = $xfiles.find(".meta-versions .version").map(function() {
+      return $(this).attr("data-name");
+    }).toArray();
+
+    $xfiles.find("x-file").each(function() {
+      var $xfile = $(this);
+
+      data.push({
+        id: $xfile.find("[name$=\"[id]\"]").attr("value"),
+        thumb_url: $xfile.attr("data-src-original").replace(/original$/, "thumb"),
+        versions: versions
+      });
+    });
+  });
+
+  return data;
+};
+
+
+MediaSelector.prototype.render = function(data) {
+  var html, assets;
+
+  // store data
+  this.last_rendered_data = data;
+
+  // assets
+  assets = "";
+
+  for (var i=0, j=data.length; i<j; ++i) {
+    var asset = data[i];
+    assets = assets + '<div class="asset" rel="' + asset.id + '">' +
+      '<div class="image" style="background-image: url(\'' + asset.thumb_url + '\');"></div>' +
+    '</div>';
+  }
+
+  // compose
+  html = this.templates.main;
+  html = html.replace("{{ASSETS}}", assets);
+
+  // add to dom
+  this.$el.html(html);
+};
+
+
+
+//
+//  Templates
+//
+MediaSelector.prototype.templates = {
+
+  main: (function() {
+    return [
+      '<header>',
+        '<div class="data-selection">Insert image</div>',
+        '<a class="close">✕</a>',
+      '</header>',
+
+      '<section>',
+        '<div class="asset-container">{{ASSETS}}</div>',
+      '</section>',
+
+      '<aside>',
+        '<div class="actions">',
+          '<a class="button large commit">Add media to post</a>',
+          '<a class="button large cancel close">Cancel</a>',
+        '</div>',
+
+        '<div class="options">',
+          '<div class="options-title">Options</div>',
+          '<div class="version"></div>',
+        '</div>',
+      '</aside>'
+    ].join('');
+  })()
+
+};
+
+
+
+//
+//  Events
+//
+MediaSelector.prototype.bind_events = function() {
+  this.$el.on("click", ".asset", $.proxy(this.asset_click_handler, this));
+  this.$el.on("click", ".actions .commit", $.proxy(this.commit_click_handler, this));
+};
+
+
+MediaSelector.prototype.asset_click_handler = function(e) {
+  var $asset = $(e.currentTarget);
+
+  if ($asset.hasClass(this.settings.selected_class)) {
+    this.unselect_asset($asset);
+  } else {
+    this.select_asset($asset);
+  }
+};
+
+
+MediaSelector.prototype.commit_click_handler = function(e) {
+  this.add_selected_to_editor_textarea();
+};
+
+
+
+//
+//  Selecting assets
+//
+MediaSelector.prototype.select_asset = function($asset) {
+  var id = $asset.attr("rel");
+
+  // add to 'selected' array
+  this.selected_ids.push(id);
+
+  // visual
+  $asset.addClass(this.settings.selected_class);
+};
+
+
+MediaSelector.prototype.unselect_asset = function($asset) {
+  var id = $asset.attr("rel");
+  var index = this.selected_ids.indexOf(id);
+
+  // remove from 'selected' array
+  if (index !== -1) {
+    this.selected_ids.splice(index, 1);
+  }
+
+  // visual
+  $asset.removeClass(this.settings.selected_class);
+};
+
+
+MediaSelector.prototype.add_selected_to_editor_textarea = function() {
+  var selected = this.selected_ids;
+  var version = this.$el.find(".options .version select option:selected").val() || "original";
+  var markdown = "";
+  var $textarea;
+
+  // build markdown text
+  for (var i=0, j=selected.length; i<j; ++i) {
+    markdown = markdown + "![](asset://" + selected[i] + "/" + version + ")  \n";
+  }
+
+  // add to textarea
+  // TODO: save cursor position before opening overlay,
+  //       then apply it again here
+  $textarea = this.$markitup_container.find("textarea");
+  $textarea.val($textarea.val() + markdown);
+
+  // hide overlay
+  Overlay.get_instance().hide();
+};
+
+
+
+//
+//  Options
+//
+MediaSelector.prototype.setup_version_option = function() {
+  var versions = [];
+  var select_element;
+
+  // collect all versions
+  for (var i=0, j=this.last_rendered_data.length; i<j; ++i) {
+    var data_piece = this.last_rendered_data[i];
+
+    for (var k=0, l=data_piece.versions.length; k<l; ++k) {
+      var version = data_piece.versions[k];
+      if (versions.indexOf(version) === -1) {
+        versions.push(version)
+      }
+    }
+  }
+
+  // make option element
+  select_element = document.createElement("select");
+  select_element.innerHTML = $.map(["original"].concat(versions), function(v) {
+    return "<option value=\"" + v + "\">" + v + "</option>";
+  }).join("");
+
+  // add to dom & apply chosen
+  this.$el.find(".options .version")
+    .empty()
+    .append(select_element)
+    .children("select")
+    .chosen({ width: "100%" });
+};
+
+
+
+//
+//  -> EXPORT
+//
+module.exports = MediaSelector;

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

@@ -0,0 +1,33 @@
+var overlay, fn_template;
+
+
+fn_template = function() {
+  return [
+    '<div class="overlay-outer-wrapper">',
+      '<div class="overlay-inner-wrapper"></div>',
+    '</div>'
+  ].join('');
+};
+
+
+
+function create_new_instance() {
+  overlay = new Overlay(false, {
+    content_class_name: "overlay-inner-wrapper",
+    template_function: fn_template
+  });
+}
+
+
+
+//
+//  -> EXPORT
+//
+module.exports = {
+
+  get_instance: function() {
+    if (!overlay) create_new_instance();
+    return overlay;
+  }
+
+};

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

@@ -10,6 +10,7 @@
 @import "lalala/lib/jquery-ui";
 @import "lalala/lib/chosen";
 @import "lalala/lib/pikaday";
+@import "lalala/lib/overlay";
 
 @import "lalala/components/icons";
 @import "lalala/components/forms";
@@ -30,12 +31,14 @@
 @import "lalala/modules/dropdown-menu";
 @import "lalala/modules/index-footer";
 @import "lalala/modules/table-tools";
-@import "lalala/modules/index-as-sortable";
 @import "lalala/modules/index-as-table";
 @import "lalala/modules/index-as-tree-table";
 @import "lalala/modules/editor";
 @import "lalala/modules/editor-cheatsheet";
-@import "lalala/modules/grid";
 @import "lalala/modules/scopes";
 @import "lalala/modules/dashboard";
 @import "lalala/modules/panel";
+
+@import "lalala/modules/file-uploader";
+@import "lalala/modules/file-uploader-metadata";
+@import "lalala/modules/media-selector";

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

@@ -52,9 +52,12 @@
     padding-left: 29px;
   }
 
-  // TODO: gray button
-  &.gray {
-    background-color: gray(200);
+  // large button
+  &.large {
+    height: 40px;
+    line-height: 42px;
+    padding-bottom: 0;
+    padding-top: 0;
   }
 
   // green button
@@ -136,3 +139,8 @@ a.button.destroy {
   @extend %btn.red;
   @include icon('delete', 'button');
 }
+
+a.button.cancel {
+  @extend %btn;
+  @include icon("bullet_orange", "button");
+}

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

@@ -108,7 +108,7 @@ select:focus {
 // groups
 .inputs,
 .actions {
-  // @extend .inner;
+  @extend .inner;
 
   ul, ol {
     list-style: none;
@@ -230,42 +230,26 @@ select:focus {
 }
 
 // single file
-.input.single_file  {
-  .delete-button {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    width: 60px;
-
-    input {
-      width: auto;
-      padding: 0;
-      margin: 0 0 0 5px;
-    }
-  }
-
-  .file-description {
-    font-size: 12px;
-    margin-left: $label_width;
-    margin-top: 7px;
-    width: $input_width;
+.input.single_file .file-description {
+  font-size: 12px;
+  margin-left: $label_width;
+  margin-top: 7px;
+  width: $input_width;
 
-    img {
-      display: inline-block;
-    }
+  img {
+    display: inline-block;
+  }
 
-    span {
-      display: inline-block;
-      font-size: 13px;
-      margin-left: 8px;
-      vertical-align: top;
-    }
+  span {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 8px;
+    vertical-align: top;
   }
 }
 
 
 
-
 /*
 
   FORMS / CHOSEN
@@ -276,37 +260,3 @@ select:focus {
 .chosen-container {
   margin-top: 4px;
 }
-
-.input-group {
-  display: inline-block;
-  position: relative;
-  width: $input_width;
-
-  input {
-    width: 100%;
-  }
-
-  .input-prepend,
-  .input-append {
-    background-color: rgb(220, 220, 220);
-    color: rgb(110, 110, 110);
-    bottom: 0;
-    line-height: 2.875;
-    padding: 0 15px;
-    position: absolute;
-    text-shadow: 0 1px 0 rgb(240, 240, 240);
-    top: 0;
-  }
-
-  .input-prepend {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    left: 0;
-  }
-
-  .input-append {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    right: 0;
-  }
-}

data/app/assets/stylesheets/lalala/lib/_overlay.css.scss

@@ -0,0 +1,66 @@
+.mod-overlay-background,
+.mod-overlay {
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+
+/*
+
+  Background
+
+*/
+.mod-overlay-background {
+  @include single-transition(background-color, 750ms);
+  background-color: rgba($yellow, 0);
+  z-index: 1000;
+
+  &.visible {
+    background-color: rgba($yellow, 0.9);
+  }
+}
+
+
+/*
+
+  Content
+
+*/
+.mod-overlay {
+  @include single-transition(opacity, 750ms);
+  opacity: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  z-index: 1010;
+
+  -webkit-overflow-scrolling: touch;
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
+.mod-overlay .overlay-outer-wrapper {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.mod-overlay .overlay-inner-wrapper {
+  display: table-cell;
+  height: 100%;
+  padding: 60px;
+  vertical-align: middle;
+}
+
+.mod-overlay .overlay-header {
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1020;
+}

data/app/assets/stylesheets/lalala/modules/_dashboard.css.scss

@@ -21,49 +21,17 @@
         float: left;
         margin: 0;
         padding: 20px 0;
-        position: relative;
         text-align: center;
 
-        // default shows the values
-        .default {
-
-          .val {
-            font-size: 30px;
-            font-weight: bold;
-            margin: 0 0 5px 0;
-          }
-          .title {
-            @include mono-font;
-            color: gray(200);
-          }
+        .val {
+          font-size: 30px;
+          font-weight: bold;
+          margin: 0 0 5px 0;
         }
-
-        // hover has the action to create a new instance
-        .hover {
-          position: absolute;
-          height: 100%;
-          top: 0;
-          left: 0;
-          width: 100%;
-
-          a.button {
-            @include transition(all 150ms);
-            @include icon('add', 'button');
-            background-position: -20px center;
-            display: block;
-            height: 100%;
-            text-indent: -9999px;
-          }
-        }
-
-        &:hover {
-          .hover {
-            a {
-              background-position: 30px center;
-            }
-          }
+        .title {
+          @include mono-font;
+          color: gray(200);
         }
-
       }
 
     }
@@ -83,7 +51,7 @@
     &.count_3 {
       ul {
         li {
-          width: 33%;
+          width: 32.333333%;
         }
       }
     }
@@ -97,14 +65,14 @@
     &.count_5 {
       ul {
         li {
-          width: 19.8%;
+          width: 19.999999%;
         }
       }
     }
     &.count_6 {
       ul {
         li {
-          width: 16.5%;
+          width: 15.66666666%;
         }
       }
     }
@@ -148,15 +116,6 @@ body.lalala_dashboard {
       .panel {
         @extend %pnl;
 
-        // overwrite default link behaviour on panel
-        a {
-          color: $blue !important;
-
-          &:hover {
-            color: $blue !important;
-          }
-        }
-
       }
 
     }

data/app/assets/stylesheets/lalala/modules/_editor-cheatsheet.css.scss

@@ -1,6 +1,6 @@
 #markdown-cheatsheet {
   @include box-shadow(0 0 10px gray(100));
-  background-color: #fff;
+  background-color: rgba(255,255,255, 0.95);
   bottom: 0;
   overflow: auto;
   padding: 15px;
@@ -42,20 +42,4 @@
 
   }
 
-  .markdown-cheatsheet-close {
-    @include transition(color 220ms ease-in-out);
-    font-size: 20px;
-    font-weight: 100;
-    text-decoration: none;
-    color: rgba(0, 0, 0, 0.45);
-    position: absolute;
-    right: 10px;
-    padding: 10px;
-    top: 10px;
-
-    &:hover {
-      color: rgba(0, 0, 0, 1);
-    }
-  }
-
 }