Merge pull request #4611 from luisramos0/taxonomies_js

Bring js code to make taxonomies admin work without spree_backend

app/assets/javascripts/admin/all.js

@@ -12,6 +12,8 @@
 //= require jquery.ui.all
 //= require jquery-ui-timepicker-addon
 //= require jquery.powertip
+//= require jquery.cookie
+//= require jquery.jstree/jquery.jstree
 //= require angular
 //= require angular-resource
 //= require angular-animate

app/assets/javascripts/admin/spree/taxons/taxon_tree_menu.js.coffee

@@ -0,0 +1,22 @@
+root = exports ? this
+
+root.taxon_tree_menu = (obj, context) ->
+
+  base_url = Spree.url(Spree.routes.taxonomy_taxons_path)
+  admin_base_url = Spree.url(Spree.routes.admin_taxonomy_taxons_path)
+  edit_url = admin_base_url.clone()
+  edit_url.setPath(edit_url.path() + '/' + obj.attr("id") + "/edit");
+
+  create:
+    label: "<i class='icon-plus'></i> " + Spree.translations.add,
+    action: (obj) -> context.create(obj)
+  rename:
+    label: "<i class='icon-pencil'></i> " + Spree.translations.rename,
+    action: (obj) -> context.rename(obj)
+  remove:
+    label: "<i class='icon-trash'></i> " + Spree.translations.remove,
+    action: (obj) -> context.remove(obj)
+  edit:
+    separator_before: true,
+    label: "<i class='icon-edit'></i> " + Spree.translations.edit,
+    action: (obj) -> window.location = edit_url.toString()

app/assets/javascripts/admin/spree/taxons/taxonomy.js.coffee

@@ -0,0 +1,127 @@
+handle_ajax_error = (XMLHttpRequest, textStatus, errorThrown) ->
+  $.jstree.rollback(last_rollback)
+  $("#ajax_error").show().html("<strong>" + server_error + "</strong><br />" + taxonomy_tree_error)
+
+handle_move = (e, data) ->
+  last_rollback = data.rlbk
+  position = data.rslt.cp
+  node = data.rslt.o
+  new_parent = data.rslt.np
+
+  url = Spree.url(base_url).clone()
+  url.setPath url.path() + '/' + node.attr("id")
+  $.ajax
+    type: "POST",
+    dataType: "json",
+    url: url.toString(),
+    data: ({_method: "put", "taxon[parent_id]": new_parent.attr("id"), "taxon[position]": position }),
+    error: handle_ajax_error
+
+  true
+
+handle_create = (e, data) ->
+  last_rollback = data.rlbk
+  node = data.rslt.obj
+  name = data.rslt.name
+  position = data.rslt.position
+  new_parent = data.rslt.parent
+
+  $.ajax
+    type: "POST",
+    dataType: "json",
+    url: base_url.toString(),
+    data: ({"taxon[name]": name, "taxon[parent_id]": new_parent.attr("id"), "taxon[position]": position }),
+    error: handle_ajax_error,
+    success: (data,result) ->
+      node.attr('id', data.id)
+
+handle_rename = (e, data) ->
+  last_rollback = data.rlbk
+  node = data.rslt.obj
+  name = data.rslt.new_name
+
+  url = Spree.url(base_url).clone()
+  url.setPath(url.path() + '/' + node.attr("id"))
+
+  $.ajax
+    type: "POST",
+    dataType: "json",
+    url: url.toString(),
+    data: {_method: "put", "taxon[name]": name },
+    error: handle_ajax_error
+
+handle_delete = (e, data) ->
+  last_rollback = data.rlbk
+  node = data.rslt.obj
+  delete_url = base_url.clone()
+  delete_url.setPath delete_url.path() + '/' + node.attr("id")
+  if confirm(Spree.translations.are_you_sure_delete)
+    $.ajax
+      type: "POST",
+      dataType: "json",
+      url: delete_url.toString(),
+      data: {_method: "delete"},
+      error: handle_ajax_error
+  else
+    $.jstree.rollback(last_rollback)
+    last_rollback = null
+
+root = exports ? this
+root.setup_taxonomy_tree = (taxonomy_id) ->
+  if taxonomy_id != undefined
+    # this is defined within admin/taxonomies/edit
+    root.base_url = Spree.url(Spree.routes.taxonomy_taxons_path)
+
+    $.ajax
+      url: base_url.path().replace("/taxons", "/jstree"),
+      success: (taxonomy) ->
+        last_rollback = null
+
+        conf =
+          json_data:
+            data: taxonomy,
+            ajax:
+              url: (e) ->
+                base_url.path() + '/' + e.attr('id') + '/jstree'
+          themes:
+            theme: "apple",
+            url: "/assets/jquery.jstree/themes/apple/style.css"
+          strings:
+            new_node: new_taxon,
+            loading: Spree.translations.loading + "..."
+          crrm:
+            move:
+              check_move: (m) ->
+                position = m.cp
+                node = m.o
+                new_parent = m.np
+
+                # no parent or cant drag and drop
+                if !new_parent || node.attr("rel") == "root"
+                  return false
+
+                # can't drop before root
+                if new_parent.attr("id") == "taxonomy_tree" && position == 0
+                  return false
+
+                true
+          contextmenu:
+            items: (obj) ->
+              taxon_tree_menu(obj, this)
+          plugins: ["themes", "json_data", "dnd", "crrm", "contextmenu"]
+
+        $("#taxonomy_tree").jstree(conf)
+          .bind("move_node.jstree", handle_move)
+          .bind("remove.jstree", handle_delete)
+          .bind("create.jstree", handle_create)
+          .bind("rename.jstree", handle_rename)
+          .bind "loaded.jstree", ->
+            $(this).jstree("core").toggle_node($('.jstree-icon').first())
+
+    $("#taxonomy_tree a").on "dblclick", (e) ->
+      $("#taxonomy_tree").jstree("rename", this)
+
+    # surpress form submit on enter/return
+    $(document).keypress (e) ->
+      if e.keyCode == 13
+        e.preventDefault()

app/assets/stylesheets/admin/all.scss

@@ -14,7 +14,14 @@
  *= require_self
 */
 
+
+//************************************************************************//
+//************************************************************************//
+@import 'globals/variables';
+@import 'globals/mixins';
+
 @import 'plugins/powertip';
+@import 'plugins/jstree';
 
 @import 'hacks/mozilla';
 @import 'hacks/opera';

app/assets/stylesheets/admin/plugins/jstree.scss

@@ -0,0 +1,135 @@
+@import 'admin/globals/variables';
+@import 'admin/globals/mixins';
+@import 'admin/plugins/font-awesome';
+
+#taxonomy_tree {
+  > ul, .jstree-icon {
+    background-image: none;
+  }
+  
+  .jstree-icon {
+    @extend [class^="icon-"]:before;
+  }
+
+  .jstree-open > .jstree-icon {    
+    @extend .icon-caret-down;
+  }
+  .jstree-closed > .jstree-icon {    
+    @extend .icon-caret-right;
+  }
+
+  li {
+    background-image: none;
+
+    a {
+      background-color: very-light($color-3);
+      border: 1px solid $color-border;
+      color: $color-body-text;
+      font-weight: $font-weight-bold;
+      text-shadow: none;
+      width: 90%;
+      height: auto;
+      line-height: inherit;
+      padding: 5px 0 5px 10px;
+      margin-bottom: 10px;
+
+      .jstree-icon {
+        padding-left: 0px;
+        @extend .icon-move;   
+      }
+    }
+  }
+}
+
+#vakata-dragged.jstree-apple .jstree-invalid, 
+#vakata-dragged.jstree-apple .jstree-ok,
+#jstree-marker {
+  background-image: none !important;
+  background-color: transparent !important;
+  @extend [class^="icon-"]:before;   
+}
+#vakata-dragged.jstree-apple .jstree-invalid {
+  @extend .icon-remove;  
+  color: $color-5;
+}
+#vakata-dragged.jstree-apple .jstree-ok {
+  @extend .icon-ok;
+  color: $color-2;
+}
+
+#jstree-marker {
+  @extend .icon-caret-right;
+  color: $color-body-text !important;
+  width: 4px !important;
+}
+
+#jstree-marker-line {
+  @include border-radius($border-radius !important);
+  height: 0px !important;
+  margin-left: 5px !important;
+  margin-top: -2px !important;
+  border: none !important;
+  border-bottom: 1px solid $color-body-text !important;
+  background-color:  very-light($color-3) !important;
+
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+  
+}
+
+#vakata-contextmenu {
+  background-color: $color-3 !important;
+  -moz-box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  border: none !important;
+  @include border-radius($border-radius !important);
+
+  &:before {
+    content: '';
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid $color-3;
+    top: 0px;
+    margin-top: -10px;
+    left: 25px;
+    z-index: 1;
+  }
+
+  a {
+    color: $color-1 !important;
+    line-height: inherit !important;
+    padding: 5px 10px !important;
+    margin: 0 !important;
+    font-size: 90% !important;
+
+    &:hover {
+      @include border-radius($border-radius !important);
+      background-color: $color-2 !important;
+      border: none !important;
+      -moz-box-shadow: none !important;
+      -webkit-box-shadow: none !important;
+      line-height: inherit !important;
+      padding: 5px 10px !important;
+      margin: 0 !important;      
+    }
+  }
+
+  li:first-child a:hover:before {
+    content: '';
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid $color-2;
+    top: 0px;
+    margin-top: -10px;
+    left: 25px;
+    z-index: 1;
+  }
+
+  li.vakata-separator {
+    display: none;
+  }
+}

vendor/assets/javascripts/jquery.cookie.js

@@ -0,0 +1,41 @@
+/**
+ * jQuery Cookie plugin
+ *
+ * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+jQuery.cookie = function (key, value, options) {
+
+    // key and at least value given, set cookie...
+    if (arguments.length > 1 && String(value) !== "[object Object]") {
+        options = jQuery.extend({}, options);
+
+        if (value === null || value === undefined) {
+            options.expires = -1;
+        }
+
+        if (typeof options.expires === 'number') {
+            var days = options.expires, t = options.expires = new Date();
+            t.setDate(t.getDate() + days);
+        }
+
+        value = String(value);
+
+        return (document.cookie = [
+            encodeURIComponent(key), '=',
+            options.raw ? value : encodeURIComponent(value),
+            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+            options.path ? '; path=' + options.path : '',
+            options.domain ? '; domain=' + options.domain : '',
+            options.secure ? '; secure' : ''
+        ].join(''));
+    }
+
+    // key and possibly options given, get cookie...
+    options = value || {};
+    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
+    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
+};

vendor/assets/javascripts/jquery.jstree/themes/apple/style.css

@@ -0,0 +1,61 @@
+/*
+ * jsTree apple theme 1.0
+ * Supported features: dots/no-dots, icons/no-icons, focused, loading
+ * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
+ */
+
+.jstree-apple > ul { background:url("bg.jpg") left top repeat; }
+.jstree-apple li, 
+.jstree-apple ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
+.jstree-apple li { background-position:-90px 0; background-repeat:repeat-y;  }
+.jstree-apple li.jstree-last { background:transparent; }
+.jstree-apple .jstree-open > ins { background-position:-72px 0; }
+.jstree-apple .jstree-closed > ins { background-position:-54px 0; }
+.jstree-apple .jstree-leaf > ins { background-position:-36px 0; }
+
+.jstree-apple a { border-radius:4px; -webkit-border-radius:4px; text-shadow:1px 1px 1px white; }
+.jstree-apple .jstree-hovered { background:#e7f4f9; border:1px solid #d8f0fa; padding:0 3px 0 1px; text-shadow:1px 1px 1px silver; }
+.jstree-apple .jstree-clicked { background:#beebff; border:1px solid #99defd; padding:0 3px 0 1px; }
+.jstree-apple a .jstree-icon { background-position:-56px -20px; }
+.jstree-apple a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
+
+.jstree-apple.jstree-focused { background:white; }
+
+.jstree-apple .jstree-no-dots li, 
+.jstree-apple .jstree-no-dots .jstree-leaf > ins { background:transparent; }
+.jstree-apple .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
+.jstree-apple .jstree-no-dots .jstree-closed > ins { background-position:0 0; }
+
+.jstree-apple .jstree-no-icons a .jstree-icon { display:none; }
+
+.jstree-apple .jstree-search { font-style:italic; }
+
+.jstree-apple .jstree-no-icons .jstree-checkbox { display:inline-block; }
+.jstree-apple .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
+.jstree-apple .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
+.jstree-apple .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
+.jstree-apple .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
+.jstree-apple .jstree-checked > a > .checkbox:hover { background-position:-38px -37px; }
+.jstree-apple .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
+.jstree-apple .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }
+
+#vakata-dragged.jstree-apple ins { background:transparent !important; }
+/*#vakata-dragged.jstree-apple .jstree-ok { background:url("d.png") -2px -53px no-repeat !important; }*/
+/*#vakata-dragged.jstree-apple .jstree-invalid { background:url("d.png") -18px -53px no-repeat !important; }*/
+/*#jstree-marker.jstree-apple { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }*/
+
+.jstree-apple a.jstree-search { color:aqua; }
+.jstree-apple .jstree-locked a { color:silver; cursor:default; }
+
+#vakata-contextmenu.jstree-apple-context, 
+#vakata-contextmenu.jstree-apple-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
+#vakata-contextmenu.jstree-apple-context li { }
+#vakata-contextmenu.jstree-apple-context a { color:black; }
+#vakata-contextmenu.jstree-apple-context a:hover, 
+#vakata-contextmenu.jstree-apple-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -webkit-border-radius:2px; border-radius:2px; }
+#vakata-contextmenu.jstree-apple-context li.jstree-contextmenu-disabled a, 
+#vakata-contextmenu.jstree-apple-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
+#vakata-contextmenu.jstree-apple-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
+#vakata-contextmenu.jstree-apple-context li ul { margin-left:-4px; }
+
+/* TODO: IE6 support - the `>` selectors */