Add 1.0.1-envato version to public repo

bensmithett · Oct 21, 2014 · fd357d1 · fd357d1
1 parent da1086c
commit fd357d1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,49 +1,18 @@
-viewloader is a tiny little framework-agnostic JS bootstrapping thing that lets you attach JS behaviour to a HTML element using data attributes.
+A slightly tweaked version of https://github.com/bensmithett/viewloader/tree/1.x-master to help us
+incrementally update to v2.
 
-## How to use it
-
-Add `data-view` attributes to your HTML:
+With this HTML:
 
 ```html
-<div data-view="dropdown">
-  ...
-</div>
+<div data-view="someThing"></div>
 ```
 
-Create an object for your app that lists setup functions for each type of view.
+and this JS:
 
 ```javascript
-MyApp.Views = {
-  dropdown: function( $el ) { $el.fancyDropdown(); },
-  chatWindow: function( $el, el ) { new ChatWindowView({ el: el }); },
-  // ... etc etc
-};
+viewloader.execute(SomeNamespace);
 ```
 
-Once the DOM is ready, run:
-
-```javascript
-viewloader.execute( MyApp.Views );
-```
-
-viewloader will find every element on the page with a `data-view` attribute and check to see if a function with that name exists on the supplied object.
-
-If such a function exists, it will be called 2 arguments:
-
-- `$el`: the jQuery-wrapped DOM element (i.e. `$(el)`)
-- `el`: the DOM element
-
-`viewloader.execute` takes an optional second argument so you can scope execution to a particular element/set of elements. This is useful if you've updated the DOM and need to re-bind behaviour to new elements.
-
-```javascript
-viewloader.execute( myApp.views, $("#updated-dom-container") );
-```
-
-## Dependencies
-viewloader needs either [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/). If you're not using either of those, it's 13 whole lines of JavaScript... I'm sure you can rewrite it to suit your needs :)
-
-## License
-viewloader is released under the [MIT License](http://ben.mit-license.org/)
+viewloader will automagically call `new SomeNamespace.SomeThing($el, el)`
 
-## Shoutout
-viewloader is just a slightly-tweaked and bower-componentized version of an idea that [Toby](https://github.com/tobico) showed me.
+(Transforming the first letter to lowercase is a specific requirement of our use case)
diff --git a/bower.json b/bower.json
@@ -1,8 +1,8 @@
 {
-  "name": "viewloader",
+  "name": "viewloader-envato",
   "main": "viewloader.js",
-  "version": "1.0.1",
-  "homepage": "https://github.com/bensmithett/viewloader",
+  "version": "1.0.1-envato",
+  "homepage": "https://github.com/envato/viewloader",
   "authors": [
     "Ben Smithett <[email protected]>"
   ],

diff --git a/test.html b/test.html
@@ -5,10 +5,12 @@
     <title>Super Awesome Test Runner</title>
   </head>
   <body>
-    <div data-view="single" id="single"></div>
+    <div data-view="singleThing" id="single"></div>
 
-    <div data-view="multiple" id="first"></div>
-    <div data-view="multiple" id="second"></div>
+    <div data-view="multipleThing" id="first"></div>
+    <div data-view="multipleThing" id="second"></div>
+
+    <div data-view="doesntExist" id="doesnt-exist"></div>
 
     <div id="test-results"></div>
 
@@ -20,18 +22,57 @@
       var results = document.getElementById( "test-results" );
 
       // When an object is supplied as the first argument
-      // It calls setup functions from that object 
-      viewloader.execute({
-        single: function ( $el, el ) {
-          $el.addClass("single-ready");
-        },
-        multiple: function ( $el, el ) {
-          $el.addClass("multiple-ready");
-        }
-      });
+      // It calls setup functions from that object with the `new` keyword
+
+
+      var views = {
+
+        // Generated from this coffee:
+
+        // class SingleThing
+        //   constructor: ($el, el) ->
+        //     @do($el);
+
+        //   do: ($el) ->
+        //     $el.addClass("single-ready");
+
+        SingleThing: (function() {
+          function SingleThing($el, el) {
+            this["do"]($el);
+          }
+          SingleThing.prototype["do"] = function($el) {
+            return $el.addClass("single-ready");
+          };
+          return SingleThing;
+        })(),
+
+
+
+        // Generated from this coffee:
+
+        // class MultipleThing
+        //   constructor: ($el, el) ->
+        //     @do($el);
+
+        //   do: ($el) ->
+        //     $el.addClass("multiple-ready");
+
+        MultipleThing: (function() {
+          function MultipleThing($el, el) {
+            this["do"]($el);
+          }
+          MultipleThing.prototype["do"] = function($el) {
+            return $el.addClass("multiple-ready");
+          };
+          return MultipleThing;
+        })()
+      };
+
+      viewloader.execute(views);
 
       results.innerHTML += $(".single-ready").length === 1 ? "pass" : "FAAAAIL";
       results.innerHTML += $(".multiple-ready").length === 2 ? "pass" : "FAAAAIL";
+      // Also, if there are no errors, the doesntExist version passed.
     </script>
   </body>
 </html>
diff --git a/viewloader.js b/viewloader.js
@@ -1,16 +1,21 @@
 (function (root, factory) {
-  root.viewloader = factory({}, (root.jQuery || root.Zepto || root.$), root);
-}(this, function(viewloader, $, root) {
+  root.viewloader = factory({}, (root.jQuery || root.Zepto || root.$));
+}(this, function (viewloader, $) {
   "use strict";
 
+  var capitaliseFirstLetter = function (string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
+
   viewloader.execute = function (views, $scope) {
     var $els = $scope ? $scope.find("[data-view]") : $("[data-view]");
 
     $els.each(function(i, el) {
       var $el = $(el);
-      var view = $el.data("view");
+      var view = capitaliseFirstLetter($el.data("view"));
+
       if (view && views[view]) {
-        views[view]($el, el);
+        new views[view]($el, el);
       }
     });
   };