abracadabra 1.1.4 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0f6be915a98686f681e12658208d1597ee3d0114
-  data.tar.gz: 048b658309331f1170ba7955dee5beca1bb5cbd8
+  metadata.gz: ce1d95226cb46bbaea1c88bf845f2eebf5f12259
+  data.tar.gz: e1fa8fc9ca8fcfe6e234ffe4e3e84371b1ddc097
 SHA512:
-  metadata.gz: 9193a97298456380a147ce104f474886a2e13f71dc4b57d035d2f799b0c98e693479094dfd6b8e08efc87c407406408ca0ca346237b4602b163ed537a0b29daf
-  data.tar.gz: 1679b17fb3bff3d262953b039708ba54086d32831cb95b0eee2c4120483435e2cde3dc0ce2b58de2a3a58ee373acee4c0e3cdb944933e6f258772fec33bf5662
+  metadata.gz: 02d2c22dea7363db85fb422b9d6d07623354d2ff47ba8d3248920c569f6d243490c87122f2bbae055f72593440d2d0366efff608312d04134efe4b63640b57e2
+  data.tar.gz: 1242c42a402cf3d3fe94f2df519535b35ff0fff89a9a061d929224ff3ac3e4a6d36f48393ea1ec9f9a09bb76ac95f1116191077b521b42285e2b67be399bcc2a

data/README.md

@@ -31,7 +31,13 @@ In your `application.css`, AFTER Bootstrap, include the css file:
  *= require abracadabra
 ```
 
-In your `application.js`, AFTER Jquery (required), include the javascript file:
+OR if you're using SASS/SCSS:
+
+```sass
+ @import "abracadabra-scss";
+```
+
+In your `application.js`, AFTER JQuery (required), include the javascript file:
 
 ```js
  //= require abracadabra
@@ -59,7 +65,7 @@ It accepts the following parameters:
 - `attribute: :name` - Specifies what attribute your text field will be updating.
 
 #### OPTIONAL
-- `class: "my-class"` - Class(es) to be added to the abracadabra link. The class "abracadabra" is added # either way. [*Default:* `"abracadabra"`]
+- `class: "my-class"` - Class(es) to be added to the abracadabra link. The class "abracadabra" is added either way. [*Default:* `"abracadabra"`]
 
 - `id: "my-id"` - ID to be added to the abracadabra link. [*Default:* `nil`]
 
@@ -67,7 +73,7 @@ It accepts the following parameters:
 
 - `method: "patch"` - HTTP REST method to use. Use anything but "get". [*Default:* `"patch"`]
 
-- `buttonless: true` - Removes submit and cancel buttons, submission and cancellation is then one through the Enter/Tab and Escape keys, respectively. [*Default:* `false`]
+- `buttonless: true` - Removes submit and cancel buttons. Submission and cancellation is then done through the Enter/Tab and Escape keys, respectively. [*Default:* `false`]
 
 - `remote: true` - Same as link_to's `remote: true`, form submits via AJAX. [*Default:* `true`]
 
@@ -107,6 +113,14 @@ click_to_edit @friend,
     submit_on_blur: true
 ```
 
+#### REBINDING
+
+Simply call abracadabra's jQuery function:
+
+```javascript
+    $.abracadabra();
+```
+
 ## Configuration
 
 Abracadabra allows some customization. If you would like to change what icon classes are used for the `submit`, `cancel`, and `delete` icons, you can change them globally. 

data/app/assets/javascripts/abracadabra.js

@@ -1,233 +1,247 @@
 $(function() {
-  abracadabraSubmissionInProgress = false;
-  abracadabraButtonMousedown = false;
-  abracadabraEscapeKeydown = false;
-
-  function closeAbracadabra(element, destroy, valueChanged) {
-    $element = $(element);
-    if($element.hasClass("abracadabra-container")) {
-      container = $element;
-    } else {
-      container = $element.parents(".abracadabra-container");
-    }
-
-    if(destroy) {
-      container.siblings(".abracadabra").remove();
-    } else {
-      if(valueChanged == true) {
-        value = container.find(".abracadabra-input").val();        
-      } else {
-        value = container.find(".abracadabra-input").data("original-value");
-      }
-      container.siblings(".abracadabra").text(value).show();
-    }
-
-    try {
-      container.remove();
-    } catch (error) {}
-  }
-
-  function tabToNextAbracadabra(element, selector) {
-    if(selector != undefined) {
-      nextAbracadabra = $(selector);
 
-      /* If selector isn't an ID, find the element with the class AFTER the current element */
-      if (selector.indexOf("#") == -1) {
-        abracadabra = $(element).parents(".abracadabra-container").siblings(".abracadabra");
-        indexOfAbracadabra = $(selector).index(abracadabra);
-        nextAbracadabra = $($(selector)[indexOfAbracadabra + 1]);
+  $.extend({
+    abracadabra: function() {
+      abracadabraSubmissionInProgress = false;
+      abracadabraButtonMousedown = false;
+      abracadabraEscapeKeydown = false;
+
+      function closeAbracadabra(element, destroy, valueChanged) {
+        $element = $(element);
+        if($element.hasClass("abracadabra-container")) {
+          container = $element;
+        } else {
+          container = $element.parents(".abracadabra-container");
+        }
+
+        if(destroy) {
+          container.siblings(".abracadabra").remove();
+        } else {
+          if(valueChanged == true) {
+            value = container.find(".abracadabra-input").val();        
+          } else {
+            value = container.find(".abracadabra-input").data("original-value");
+          }
+          container.siblings(".abracadabra").text(value).show();
+        }
+
+        try {
+          container.remove();
+        } catch (error) {}
       }
-      /* /If selector isn't an ID, find the element with the class AFTER the current element */
-
-      closeAbracadabra(element, false, true);
-      nextAbracadabra.click();
-    } else {
-      closeAbracadabra(element, false, true);
-    }
-  }
-
-  $("body").on("submit", ".abracadabra-form", function(e) {
-    if(abracadabraSubmissionInProgress == true || abracadabraEscapeKeydown == true) {
-      e.preventDefault();
-      return false;
-    }
-    abracadabraSubmissionInProgress = true;
-  });
-
-  $("body").on("ajax:before", ".abracadabra-delete", function() {
-    if(abracadabraSubmissionInProgress == true) {
-      e.preventDefault();
-      return false;
-    }
-    abracadabraSubmissionInProgress = true;
-  });
-
-  $("body").on("mousedown", ".abracadabra-delete, .abracadabra-submit, .abracadabra-cancel", function() {
-    abracadabraButtonMousedown = true;
-  });
-
-  $("body").on("ajax:success", ".abracadabra-form", function(e) {
-    target = $(e.target);
-    abracadabraButtonMousedown = false;
-
-    /* If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */
-    if(target.hasClass("abracadabra-delete")) {
-      closeAbracadabra(target, true, true);
-    } else {
-      input = $(target).find(".abracadabra-input");
-      tabToNextSelector = input.data("tab-to-next-selector");
-      tabToNextAbracadabra(target, tabToNextSelector);
-    }
-    /* /If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */
 
-    abracadabraSubmissionInProgress = false;
-  });
-
-  $("body").on("click", ".abracadabra-cancel", function() {
-    if(abracadabraSubmissionInProgress == false) {
-      closeAbracadabra(this, false, false);
-    }
-  });
-
-  $("body").on("blur", ".abracadabra-input", function() {
-    if(abracadabraSubmissionInProgress == false && abracadabraButtonMousedown == false) {
-      if($(this).data("submit-on-blur") == true) {
-        $(this.form).submit();
-      } else {
-        closeAbracadabra(this, false, false);
+      function tabToNextAbracadabra(element, selector) {
+        if(selector != undefined) {
+          nextAbracadabra = $(selector);
+
+          /* If selector isn't an ID, find the element with the class AFTER the current element */
+          if (selector.indexOf("#") == -1) {
+            abracadabra = $(element).parents(".abracadabra-container").siblings(".abracadabra");
+            indexOfAbracadabra = $(selector).index(abracadabra);
+            nextAbracadabra = $($(selector)[indexOfAbracadabra + 1]);
+          }
+          /* /If selector isn't an ID, find the element with the class AFTER the current element */
+
+          closeAbracadabra(element, false, true);
+          nextAbracadabra.click();
+        } else {
+          closeAbracadabra(element, false, true);
+        }
       }
-    }
-  });
 
-  $("body").on("keydown", ".abracadabra-input", function(e) {
-    /* Press Tab to submit (same function as Enter key) */
-    if (e.keyCode == 9)
-    {
-      e.preventDefault();
-      if(abracadabraSubmissionInProgress == false) {
-        $(this.form).submit();
-      }
-    }
-    /* /Press Tab to submit (same function as Enter key) */
-
-    /* Press Escape to cancel */
-    if (e.keyCode == 27)
-    {
-      abracadabraEscapeKeydown = true;
-      e.preventDefault();
-      if(abracadabraSubmissionInProgress == false) {
+      $("body").unbind(".abracadabra-binding")
+
+      $("body").on("submit.abracadabra-binding", ".abracadabra-form", function(e) {
+        if(abracadabraSubmissionInProgress == true || abracadabraEscapeKeydown == true) {
+          e.preventDefault();
+          return false;
+        }
+        abracadabraSubmissionInProgress = true;
+      });
+
+      $("body").on("ajax:before.abracadabra-binding", ".abracadabra-delete", function() {
+        if(abracadabraSubmissionInProgress == true) {
+          e.preventDefault();
+          return false;
+        }
+        abracadabraSubmissionInProgress = true;
+      });
+
+      $("body").on("mousedown.abracadabra-binding", ".abracadabra-delete, .abracadabra-submit, .abracadabra-cancel", function() {
+        abracadabraButtonMousedown = true;
+      });
+
+      $("body").on("ajax:success.abracadabra-binding", ".abracadabra-form", function(e) {
+        target = $(e.target);
+        abracadabraButtonMousedown = false;
+
+        /* If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */
+        if(target.hasClass("abracadabra-delete")) {
+          closeAbracadabra(target, true, true);
+        } else {
+          input = $(target).find(".abracadabra-input");
+          tabToNextSelector = input.data("tab-to-next-selector");
+          tabToNextAbracadabra(target, tabToNextSelector);
+        }
+        /* /If form is a DELETE, remove abracadabra instance, if not, call tabToNextSelector */
+
+        abracadabraSubmissionInProgress = false;
+      });
+
+      $("body").on("ajax:error.abracadabra-binding", ".abracadabra-form", function() {
         closeAbracadabra(this, false, false);
-        abracadabraEscapeKeydown = false;
-      }
-    }
-    /* /Press Escape to cancel */
-  });
-
-
-  $("body").on("confirm:complete", ".abracadabra-delete", function(e, response) {
-    /* If cancel is clicked in the deletable_confirm dialog, focus on the input */
-    if(response == false) {
-      input = $(this).parents(".abracadabra-delete-container").siblings();
-      inputValue = input.val();
-      input.focus().val("").val(inputValue);
+        $.abracadabra();
+      });
+
+      $("body").on("click.abracadabra-binding", ".abracadabra-cancel", function() {
+        if(abracadabraSubmissionInProgress == false) {
+          closeAbracadabra(this, false, false);
+        }
+      });
+
+      $("body").on("blur.abracadabra-binding", ".abracadabra-input", function() {
+        if(abracadabraSubmissionInProgress == false && abracadabraButtonMousedown == false) {
+          if($(this).data("submit-on-blur") == true) {
+            $(this.form).submit();
+          } else {
+            closeAbracadabra(this, false, false);
+          }
+        }
+      });
+
+      $("body").on("keydown.abracadabra-binding", ".abracadabra-input", function(e) {
+        /* Press Tab to submit (same function as Enter key) */
+        if (e.keyCode == 9)
+        {
+          e.preventDefault();
+          if(abracadabraSubmissionInProgress == false) {
+            $(this.form).submit();
+          }
+        }
+        /* /Press Tab to submit (same function as Enter key) */
+
+        /* Press Escape to cancel */
+        if (e.keyCode == 27)
+        {
+          abracadabraEscapeKeydown = true;
+          e.preventDefault();
+          if(abracadabraSubmissionInProgress == false) {
+            closeAbracadabra(this, false, false);
+            abracadabraEscapeKeydown = false;
+          }
+        }
+        /* /Press Escape to cancel */
+      });
+
+
+      $("body").on("confirm:complete.abracadabra-binding", ".abracadabra-delete", function(e, response) {
+        /* If cancel is clicked in the deletable_confirm dialog, focus on the input */
+        if(response == false) {
+          input = $(this).parents(".abracadabra-delete-container").siblings();
+          inputValue = input.val();
+          input.focus().val("").val(inputValue);
+        }
+        /* /If cancel is clicked in the deletable_confirm dialog, focus on the input */
+      });
+
+      $(".abracadabra").on("click", function() {
+        if($(".abracadabra-container:visible").length) {
+          return false;
+        }
+
+        link = $(this);
+        link.hide();
+        path = link.data("path");
+        attribute = link.data("attribute");
+        formMethod = link.data("method");
+        remote = ((link.data("remote") == true) ? " data-remote=\"true\"" : "");
+
+        /* Check if button classes have been manually overridden elsewhere */
+        if(typeof abracadabraSubmitIcon == "undefined") {
+          abracadabraSubmitIcon = "fa fa-check";
+        }
+
+        if(typeof abracadabraCancelIcon == "undefined") {
+          abracadabraCancelIcon = "fa fa-times";
+        }
+
+        if(typeof abracadabraDeleteIcon == "undefined") {
+          abracadabraDeleteIcon = "fa fa-times-circle-o";
+        }
+        /* /Check if button classes have been manually overridden elsewhere */
+
+        /* AJAX? */
+        if(remote == "") {
+          authToken = "<input name=\"authenticity_token\" type=\"hidden\" value=\"" + $("meta[name=\"csrf-token\"]").attr("content") + "\">";
+          type = "";
+          deletableType = "";
+        } else {
+          authToken = "";
+          type = " data-type=\"" + link.data("type") + "\"";
+          deletableType = " data-type=\"" + link.data("deletable-type") + "\"";
+        }
+        /* /AJAX? */
+
+        /* Deletable? */
+        if(link.data("deletable") !== false) {
+          deletablePath = link.data("deletable-path");
+          deletableConfirm = link.data("deletable");
+          if(deletableConfirm === true) {
+            deletableConfirm = "";
+          } else {
+            deletableConfirm = " data-confirm=\"" + deletableConfirm + "\"";
+          }
+          deletable = "<span class=\"abracadabra-delete-container\"><a href=\"" + deletablePath + "\" class=\"abracadabra-delete\" data-method=\"delete\"" + deletableConfirm + remote + deletableType + " rel=\"nofollow\"><i class=\"" + abracadabraDeleteIcon + "\"></i></a></span>";
+        } else {
+          deletable = "";
+        }
+        /* /Deletable? */
+
+        /* Tab to next? */
+        tabToNextSelector = link.data("tab-to-next");
+        if(tabToNextSelector !== false) {
+          tabToNextSelector = link.data("tab-to-next");
+          tabToNextSelector = " data-tab-to-next-selector=\"" + tabToNextSelector + "\"";
+        } else {
+          tabToNextSelector = "";
+        }
+        /* /Tab to next? */
+
+        /* Submit on blur? */
+        submitOnBlur = link.data("submit-on-blur");
+        if(submitOnBlur == true) {
+          submitOnBlur = " data-submit-on-blur=\"true\"";
+        } else {
+          submitOnBlur = "";
+        }
+        /* /Submit on blur? */
+
+        /* Show buttons? */
+        if(link.data("buttonless") == true) {
+          buttons = "";
+        } else {
+          buttons = "<button type=\"submit\" class=\"btn btn-primary abracadabra-submit\"><i class=\"" + abracadabraSubmitIcon + "\"></i></button><button type=\"button\" class=\"btn abracadabra-cancel\"><i class=\"" + abracadabraCancelIcon + "\"></i></button>";
+        }
+        /* /Show buttons? */
+
+        instanceClass = link.data("class");
+        inputValue = link.text().replace(/"|\\"/g, "&quot;");
+        inputId = instanceClass + "_" + attribute;
+        inputName = instanceClass + "[" + attribute + "]";
+
+        openFormTag = "<form accept-charset=\"UTF-8\" action=\"" + path + "\"" + remote + type + " class=\"form-inline abracadabra-form\" method=\"post\">";
+        hiddenMethodTags = "<div style=\"display:none;\"><input name=\"utf8\" type=\"hidden\" value=\"&#10003;\"><input name=\"_method\" type=\"hidden\" value=\"" + formMethod + "\">" + authToken + "</div>";
+        input = "<input type=\"text\" class=\"form-control abracadabra-input\" id=\"" + inputId + "\" name=\"" + inputName + "\" value=\"" + inputValue + "\" data-original-value=\"" + inputValue + "\"" + tabToNextSelector + submitOnBlur + ">";
+        
+        html = "<span class=\"abracadabra-container\">" + openFormTag + hiddenMethodTags;
+        html += "<div class=\"control-group\"><div class=\"abracadabra-input-and-button-wrapper\"><div class=\"abracadabra-input-container\">" + input + deletable + "</div>";
+        html += "<div class=\"abracadabra-buttons\">" + buttons + "</div></div></form></span>";
+
+        link.after(html);
+        link.siblings(".abracadabra-container").find(".abracadabra-input").focus().val("").val(inputValue);
+      });
     }
-    /* /If cancel is clicked in the deletable_confirm dialog, focus on the input */
   });
-  
-  $(".abracadabra").on("click", function() {
-    if($(".abracadabra-container:visible").length) {
-      return false;
-    }
-
-    link = $(this);
-    link.hide();
-    path = link.data("path");
-    attribute = link.data("attribute");
-    formMethod = link.data("method");
-    remote = ((link.data("remote") == true) ? " data-remote=\"true\"" : "");
-
-    /* Check if button classes have been manually overridden elsewhere */
-    if(typeof abracadabraSubmitIcon == "undefined") {
-      abracadabraSubmitIcon = "fa fa-check";
-    }
-
-    if(typeof abracadabraCancelIcon == "undefined") {
-      abracadabraCancelIcon = "fa fa-times";
-    }
-
-    if(typeof abracadabraDeleteIcon == "undefined") {
-      abracadabraDeleteIcon = "fa fa-times-circle-o";
-    }
-    /* /Check if button classes have been manually overridden elsewhere */
-
-    /* AJAX? */
-    if(remote == "") {
-      authToken = "<input name=\"authenticity_token\" type=\"hidden\" value=\"" + $("meta[name=\"csrf-token\"]").attr("content") + "\">";
-      type = "";
-      deletableType = "";
-    } else {
-      authToken = "";
-      type = " data-type=\"" + link.data("type") + "\"";
-      deletableType = " data-type=\"" + link.data("deletable-type") + "\"";
-    }
-    /* /AJAX? */
-
-    /* Deletable? */
-    if(link.data("deletable") !== false) {
-      deletablePath = link.data("deletable-path");
-      deletableConfirm = link.data("deletable");
-      if(deletableConfirm === true) {
-        deletableConfirm = "";
-      } else {
-        deletableConfirm = " data-confirm=\"" + deletableConfirm + "\"";
-      }
-      deletable = "<span class=\"abracadabra-delete-container\"><a href=\"" + deletablePath + "\" class=\"abracadabra-delete\" data-method=\"delete\"" + deletableConfirm + remote + deletableType + " rel=\"nofollow\"><i class=\"" + abracadabraDeleteIcon + "\"></i></a></span>";
-    } else {
-      deletable = "";
-    }
-    /* /Deletable? */
-
-    /* Tab to next? */
-    tabToNextSelector = link.data("tab-to-next");
-    if(tabToNextSelector !== false) {
-      tabToNextSelector = link.data("tab-to-next");
-      tabToNextSelector = " data-tab-to-next-selector=\"" + tabToNextSelector + "\"";
-    } else {
-      tabToNextSelector = "";
-    }
-    /* /Tab to next? */
-
-    /* Submit on blur? */
-    submitOnBlur = link.data("submit-on-blur");
-    if(submitOnBlur == true) {
-      submitOnBlur = " data-submit-on-blur=\"true\"";
-    } else {
-      submitOnBlur = "";
-    }
-    /* /Submit on blur? */
 
-    /* Show buttons? */
-    if(link.data("buttonless") == true) {
-      buttons = "";
-    } else {
-      buttons = "<button type=\"submit\" class=\"btn btn-primary abracadabra-submit\"><i class=\"" + abracadabraSubmitIcon + "\"></i></button><button type=\"button\" class=\"btn abracadabra-cancel\"><i class=\"" + abracadabraCancelIcon + "\"></i></button>";
-    }
-    /* /Show buttons? */
-
-    instanceClass = link.data("class");
-    inputValue = link.text().replace(/"|\\"/g, "&quot;");
-    inputId = instanceClass + "_" + attribute;
-    inputName = instanceClass + "[" + attribute + "]";
-
-    openFormTag = "<form accept-charset=\"UTF-8\" action=\"" + path + "\"" + remote + type + " class=\"form-inline abracadabra-form\" method=\"post\">";
-    hiddenMethodTags = "<div style=\"display:none;\"><input name=\"utf8\" type=\"hidden\" value=\"&#10003;\"><input name=\"_method\" type=\"hidden\" value=\"" + formMethod + "\">" + authToken + "</div>";
-    input = "<input type=\"text\" class=\"form-control abracadabra-input\" id=\"" + inputId + "\" name=\"" + inputName + "\" value=\"" + inputValue + "\" data-original-value=\"" + inputValue + "\"" + tabToNextSelector + submitOnBlur + ">";
-    
-    html = "<span class=\"abracadabra-container\">" + openFormTag + hiddenMethodTags;
-    html += "<div class=\"control-group\"><div class=\"abracadabra-input-and-button-wrapper\"><div class=\"abracadabra-input-container\">" + input + deletable + "</div>";
-    html += "<div class=\"abracadabra-buttons\">" + buttons + "</div></div></form></span>";
-
-    link.after(html);
-    link.siblings(".abracadabra-container").find(".abracadabra-input").focus().val("").val(inputValue);
-  });
+  $.abracadabra();
 });

data/lib/abracadabra/version.rb

@@ -1,5 +1,5 @@
 module Abracadabra
   module Rails
-    VERSION = "1.1.4"
+    VERSION = "1.2.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: abracadabra
 version: !ruby/object:Gem::Version
-  version: 1.1.4
+  version: 1.2.0
 platform: ruby
 authors:
 - Trevor Hinesley
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-18 00:00:00.000000000 Z
+date: 2014-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails