SrBuj 0.4.0 → 0.5.0

data/README.md

@@ -3,24 +3,41 @@ SrBuj
 
 Better Unobtrusive JavaScript Request (for Rails and jquery_ujs, twitter/bootstrap modal.js)
 
- - Do you need render a partial in your web with out reload?, and make a modal out of it?(depends on twitter/Bootstrap modal.js)
- - Do you need remove an element from a list?
- - Do you need replace an element after update?
-
+SrBuj comes to cure a common illness in a life of every Rails developer (maybe other kind too):
+  - write the same code to rise up a modal
+  - render a partial on it.
+  - change an element in a view without reload the entire web page
+  - replace content of an element (GET)
+  - add an element (POST)
+  - remove an element (DELETE)
+  - replace an specific element (PUT/PATCH)
+  - bind a callback to run specific js function.
+
+every time, we end up with a lot of code, ugly code, messy code...
+
+And every time we end up doing an old and known .js.rb file, with the same 4 lines... Well enough it's enough!
+
+This is the cure...  and comes with a simple treatment too!
+Steps:
+ 1. Bundle the gem
+ 2. required in your manifest
+ 3. add the magic data attributes to the element
+ 4. Enjoy de js-less ! :-)
 
 This unobtrusive scripting support file is developed for the Ruby on Rails framework, but is not strictly tied to any specific backend. You can drop this into any application to:
 
 - get modals out of the box, via js
 - make non-GET requests from hyperlinks
-- make forms or hyperlinks submit data asynchronously with Ajax and handle the response in a dry way;
+- make any submit data asynchronously with Ajax and handle the response in a dry way.
 
 These features are achieved by adding certain ["data" attributes][data] to your HTML markup. In Rails, they are added by the framework's template helpers.
 
 Requirements
 ------------
 
-- [jQuery 1.7.x or higher][jquery];
-- [twitter/bootstrap modal.js plugin]
+- [jQuery 1.7.x or higher](http://jquery.com/);
+- [jquery_ujs](https://github.com/rails/jquery-ujs)
+- [twitter/bootstrap modal.js plugin](http://twitter.github.com/bootstrap/javascript.html#modals) or any .modal()/.modal('toggle') function attached to the jquery element.
 - HTML5 doctype (optional).
 
 If you don't use HTML5, adding "data" attributes to your HTML4 or XHTML pages might make them fail [W3C markup validation][validator]. However, this shouldn't create any issues for web browsers or other user agents.
@@ -48,19 +65,26 @@ a. For Rails 3.1, add these lines to the top of your app/assets/javascripts/appl
 //= require SrBuj
 ```
 
-Use
+Use and Options
 ---
-data[target] = id Element in to render the response before success
-data[modal] = true|false if you wish that repsonse execute in modal (default false)
-data[error] = id Element In a form data[error] is the holder in witch de form re renders to show the errors
-data[replace] = true|false if you wish replace de data[target] element with the response content on success (default false)
-data[remote] && data[target] = combined the success response execute a remove() over the target element
-
+  - target( data[target] ):  depending on the type of request(GET/PUT/POST/DELETE) is used to alter the Dom. it represent the element that we want to alter in the view after an succceded request (needed)
+  - modal( data[modal] ): if you wish that the response ends up in a modal. value: true|false (default false)
+  - error (data[error]): id Element In a form data[error] is the holder in witch de form re renders to show the errors
+  - replace(data[replace]):  if you wish to replace de data[target] element with the response content on success. represent the PUT/PATCH action for SrBuj. value: true|false (default false)
+  - remove (data[method:delete] && data[target]): if these are combined the success response execute a remove() over the data[target] element.
+  - nochange (data[nochange]): do all but don't change the document in any way.
+  - callback(data[callback]) = after a successeded request, call this function.
+  - data[custom] = just proxy the response to my custom function in callback, nothing more.
+  - jqueryselector(data[jqueryselector]): Change the data[target] & data[error] for selectors in jquery and find the element!
+
+You can use it with any element available. (links forms tables divs anything).
 
 Example
----
+=======
 
-in your view (example with a link)
+modal
+----
+in your view (example with a link and haml)
 
 ````haml
  = link_to 'add Element' elements_path, remote: true, data: {target: 'partial-id', modal: true}
@@ -75,7 +99,8 @@ in your controller
 ```` ruby
   def new
     @element= Element.new
-    render partial: 'new', content_type: 'text/html'
+    render partial: 'new', content_type: 'text/html' #=> the content_type stands for telling the js request that everything ends up
+fine.
   end
 ````
 

data/lib/SrBuj/version.rb

@@ -1,3 +1,3 @@
 module SrBuj
-  VERSION = '0.4.0'
+  VERSION = '0.5.0'
 end

data/lib/assets/javascripts/SrBuj.js

@@ -8,9 +8,26 @@
  * Released under the MIT license
  *
  */
+  $.fn.present = function(){
+    return this.length === 1 && this
+  };
   var SrBuj;
   $.SrBuj = SrBuj = {
     selector: '[data-remote][data-target]',
+    defaults: {
+        '$el': undefined,
+        target: undefined,
+        onError: undefined,
+        wrapper: undefined,
+        method: 'GET',
+        modal: false,
+        custom: false,
+        change: true,
+        custom: false,
+        replace: false,
+        callback: false,
+        jqueryselector: false
+    },
     changeDom: function(method,$target,data){
       switch(method){
         case 'POST':
@@ -30,42 +47,65 @@
     },
     getVerb: function($el){
         var dataVerb = $el.data('method'),
-            replace = $el.data('replace') || false,
-            proto = $el.attr('method') || 'GET';
+            replace = $el.data('replace'),
+            proto = $el.attr('method');
       if( dataVerb )
-          return dataVerb.toUpperCase()
+          return dataVerb.toUpperCase();
       else
-        return ( replace && proto.toUpperCase() == 'POST' ) ? 'PUT' : proto.toUpperCase();
+        if (proto) return replace ? 'PUT' : proto.toUpperCase();
+    },
+    getOptions: function(el, user_options){
+      var options = {},
+          $el =  $( user_options['el'] || el  ).present(),
+          el_options = {
+            '$el': $el,
+            'target': $el.data('target'),
+            'method': $.SrBuj.getVerb($el),
+            'onError': $el.data('error'),
+            'callback': $el.data('callback'),
+            'change': ! ( $el.data('nochange') || false ),
+            'jqueryselector': $el.data('jqueryselector'),
+            'modal': $el.data('modal'),
+            'wrapper': $el.data('error'),
+            'custom': $el.data('custom'),
+            'replace': $el.data('replace')
+          };
+          for(var attr in this.defaults){
+            options[attr] = user_options[attr] || el_options[attr] || this.defaults[attr];
+          }
+      return options;
     },
-    success: function(e, data){
-      var $el = $(e.target),
-          isModal = $el.data('modal') || false,
-          method = $.SrBuj.getVerb($el),
-          change = ! ( $el.data('nochange') || false ),
-          fn = $el.data('callback'),
-          custom = $el.data('custom') || false,
-          callback = (typeof  fn == 'function') ? fn : window[fn],
-          target = document.getElementById($el.data('target')),
-          wrapper = document.getElementById($el.data('error')),
-          $target = $(target);
+    success: function(e, data,status,user_options){
+      var options = $.SrBuj.getOptions(e.target, user_options),
+              $el = options['$el'],
+              $target =  options['jqueryselector'] ? $(options['target']).present() : $(document.getElementById(options['target'])) ,
+              $wrapper = options['jqueryselector'] ? $(options['wrapper']) : $(document.getElementById(options['wrapper']));
 
-      if( !custom ){
-        if(change) $.SrBuj.changeDom(method,$target,data);
-        if(isModal) wrapper ? $(wrapper).modal('toggle') : $target.modal('toggle');
+      if(!options['custom']){
+        if(options['change'])
+          $.SrBuj.changeDom(options['method'],$target,data);
+        if(options['modal'])
+            options['wrapper'] ? $wrapper.modal('toggle') : $target.modal('toggle');
       }
-      if(callback) callback.apply(this,[e, data]);
+      if(options['callback'])
+        callback = (typeof options['callback'] == 'function') ? options['callback'] : window[options['callback']],
+        callback.apply(this,[e, data, status]);
     },
-    fail: function(e, data){
-      var $el = $(e.target),
-      error = document.getElementById($el.data('error'));
-      if( error )
-        $.SrBuj.changeDom('ERROR', $(error), data.responseText);
+    fail: function(e, data, status, user_options){
+          var $el = $(e.target).present(),
+          error = $el.data('error'),
+          jqueryselector = $el.data('jqueryselector'),
+          $error = jqueryselector ? $(error) :$(document.getElementById(error));
+      if( error ){
+        $.SrBuj.changeDom('ERROR', $error, data.responseText);
+      }
       else
-        throw 'cant find data-error target on element';
+        throw 'cant find data-error on element';
     },
-    bind: function(){
-      $(document).on('ajax:success', this.selector, this.success);
-      $(document).on('ajax:error', this.selector, this.fail);
+    bind: function(selector){
+      var selector = selector || this.selector;
+      $(document).on('ajax:success', selector, this.success);
+      $(document).on('ajax:error', selector, this.fail);
     }
   }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: SrBuj
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-04 00:00:00.000000000 Z
+date: 2013-03-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &70331793353320 !ruby/object:Gem::Requirement
+  requirement: &70140467388800 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -21,10 +21,10 @@ dependencies:
         version: '1.3'
   type: :development
   prerelease: false
-  version_requirements: *70331793353320
+  version_requirements: *70140467388800
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &70331793352560 !ruby/object:Gem::Requirement
+  requirement: &70140467388300 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -32,10 +32,10 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70331793352560
+  version_requirements: *70140467388300
 - !ruby/object:Gem::Dependency
   name: rake
-  requirement: &70331793352180 !ruby/object:Gem::Requirement
+  requirement: &70140467387880 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,7 +43,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70331793352180
+  version_requirements: *70140467387880
 description: Better Unobtrusive JavaScript Request in asset pipeline
 email:
 - xeroice@gmail.com