Merge pull request #69 from carrot/vanillajs

Remove jQuery Dependency
carrot · Mar 17, 2014 · 2620d2d · 2620d2d
2 parents 7cb922b + 19f9c0f
commit 2620d2d
Show file tree

Hide file tree

Showing 10 changed files with 854 additions and 408 deletions.
diff --git a/Cakefile b/Cakefile
@@ -7,8 +7,8 @@ accord = require 'accord'
 stylus = accord.load('stylus')
 axis = require 'axis-css'
 autoprefixer = require 'autoprefixer-stylus'
-uuid = require 'node-uuid'
 monocle = require 'monocle'
+umd = require 'umd'
 
 # tasks
 
@@ -39,45 +39,47 @@ task 'watch', 'rebuild on change in src folder', ->
 # logic
 
 class Builder
-
   constructor: ->
-    @js_path = path.join(__dirname, 'src/share.coffee')
+    @utils_js_path = path.join(__dirname, 'src/share_utils.coffee')
+    @share_js_path = path.join(__dirname, 'src/share.coffee')
     @css_path = path.join(__dirname, 'src/styles.styl')
 
   build: (opts) ->
     @opts = opts || {}
     @compile_css().then(@compile_js.bind(@))
 
   compile_css: (opts) ->
-    tokens = set_tokens(['selector', 'button_color', 'button_background'])
+    tokens = ['config.selector', "config.ui.button_color", "config.ui.button_background"]
 
-    stylus.renderFile(@css_path, { use: [define_tokens(tokens), axis(), autoprefixer()] })
+    stylus.renderFile(@css_path, { use: [axis(), autoprefixer()] })
       .then((css) ->
           accord.load('minify-css').render(css).then (css) ->
-            return "<style>#{replace_tokens(css, tokens)}</style>"
+            return replace_tokens(css, tokens)
       ).then (css) ->
         "function getStyles(config){ return \"#{css}\"};"
 
   compile_js: (css) ->
-    accord.load('coffee-script').renderFile(@js_path, { bare: true })
-      .then (js) =>
-        if @opts.minify
-          accord.load('minify-js').render(js).then (js) ->
-            "!function(){#{css}#{js}}.call(this)"
-        else
-          return "!function(){#{css}#{js}}.call(this)"
+    cs = accord.load('coffee-script')
+    cs.renderFile(@utils_js_path, { bare: true })
+      .then (utils_js) =>
+        cs.renderFile(@share_js_path, { bare: true })
+          .then (share_js) =>
+            if @opts.minify
+              accord.load('minify-js').render("#{utils_js}#{share_js}").then (js) ->
+                "#{css}#{js}"
+            else
+              "#{css}#{utils_js}#{share_js}"
+          .then (out) ->
+            umd('Share', "#{out} return Share;")
+
 
   # 
   # @api private
   # 
 
-  set_tokens = (arr) ->
-    arr.reduce(((m,v) -> m[v] = uuid.v1(); m), {})
-
   replace_tokens = (res, tokens) ->
-    for k, v of tokens
-      res = res.replace(new RegExp(v, 'g'), "\"+config.#{k}+\"")
-    return res
+    for token in tokens
+      normalized_token = token.replace(/\./g, "-")
+      res = res.replace(new RegExp(normalized_token, 'g'), "\"+#{token}+\"")
 
-  define_tokens = (tokens) ->
-    return (style) -> style.define(k, v) for k, v of tokens
+    return res
diff --git a/build/share.js b/build/share.js
diff --git a/build/share.min.js b/build/share.min.js
diff --git a/examples.html b/examples.html
@@ -13,41 +13,51 @@
   <meta name='og:image' content='http://carrot.is/img/fb-share.jpg'>
 </head>
 <body>
-  <a class='fork' href="https://github.com/carrot/share-button"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.sharebutton.co/images/fork-me.png" alt="Fork me on GitHub"></a>
+  <a class='fork' href="https://github.com/carrot/share-button">
+    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.sharebutton.co/images/fork-me.png" alt="Fork me on GitHub">
+  </a>
   <div class='share-button share-button-top'></div>
   <div class='share-button share-button-left'></div>
   <div class='share-button share-button-bottom'></div>
   <div class='share-button share-button-bottom'></div>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
   <script src='build/share.js'></script>
   <script>
-    $(function(){
-      $('.share-button-top').share({
-        title: 'Share Button Mutiple Element Test',
-        image: 'http://carrot.is/img/fb-share.jpg',
-        app_id: '602752456409826',
-        background: 'rgba(255,255,255,.5)',
-        color: '#3B2B45',
-        flyout: 'top center'
-      });
+    var share_button_top = new Share(".share-button-top", {
+      title: "Share Button Multiple Element Test",
+      ui: {
+        flyout: "top center"
+      },
+      networks: {
+        facebook: {
+          app_id: "602752456409826",
+        }
+      }
+    });
 
-      $('.share-button-left').share({
-        title: 'Share Button Multiple Instantiation Test',
-        image: 'http://carrot.is/img/fb-share.jpg',
-        app_id: '602752456409826',
-        background: 'rgba(255,255,255,.5)',
-        color: '#3B2B45',
-        flyout: 'bottom left'
-      });
+    var share_button_left = new Share(".share-button-left", {
+      title: "Share Button Multiple Instantiation Test",
+      ui: {
+        flyout: "top left",
+        button_text: "Left"
+      },
+      networks: {
+        facebook: {
+          app_id: "602752456409826",
+        }
+      }
+    });
 
-      $('.share-button-bottom').share({
-        title: 'Share Button Multiple Instantiation Test',
-        image: 'http://carrot.is/img/fb-share.jpg',
-        app_id: '602752456409826',
-        background: 'rgba(255,255,255,.5)',
-        color: '#3B2B45',
-        flyout: 'top right'
-      });
+    var share_button_right = new Share(".share-button-bottom", {
+      title: "Share Button Multiple Instantiation Test",
+      ui: {
+        flyout: "bottom right",
+        button_text: "Right"
+      },
+      networks: {
+        facebook: {
+          app_id: "602752456409826",
+        }
+      }
     });
   </script>
 </body>

diff --git a/index.html b/index.html
@@ -13,21 +13,18 @@
   <meta name='og:image' content='http://carrot.is/img/fb-share.jpg'>
 </head>
 <body>
-  <a class='fork' href="https://github.com/carrot/share-button"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.sharebutton.co/images/fork-me.png" alt="Fork me on GitHub"></a>
-  <div class='share-button share-button-top'></div>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
+  <a class='fork' href="https://github.com/carrot/share-button">
+    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.sharebutton.co/images/fork-me.png" alt="Fork me on GitHub">
+  </a>
+  <div id="share-button-top" class='share-button share-button-top'></div>
   <script src='build/share.js'></script>
   <script>
-    $(function(){
-      $('.share-button').share({
-        title: 'Share Button Test',
-        image: 'http://carrot.is/img/fb-share.jpg',
-        app_id: '602752456409826',
-        background: 'rgba(255,255,255,.5)',
-        color: '#3B2B45',
-        flyout: 'top center',
-        text_font: true
-      });
+    var share = new Share("#share-button-top", {
+      networks: {
+        facebook: {
+          app_id: "602752456409826",
+        }
+      }
     });
   </script>
 </body>

diff --git a/package.json b/package.json
@@ -1,13 +1,24 @@
 {
   "name": "share-button",
-  "version": "0.0.5",
-  "author": "Jeff Escalante <[email protected]>",
   "description": "fast, beautiful, and painless social shares",
+  "version": "0.1.0",
+  "homepage": "http://sharebutton.co",
+  "bugs": {
+    "url": "https://github.com/carrot/share-button/issues"
+  },
+  "author": "Jeff Escalante <[email protected]>",
+  "contributors": [
+    {
+      "name": "Tom Milewski",
+      "email": "[email protected]"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/carrot/share-button"
   },
   "license": "MIT",
+  "dependencies": {},
   "devDependencies": {
     "mocha": "*",
     "should": "*",
@@ -20,11 +31,16 @@
     "clean-css": "2.x.x",
     "coffee-script": "1.x.x",
     "uglifyjs": "2.x.x",
-    "node-uuid": "1.x.x",
     "colors": "0.6.x",
-    "monocle": "1.x.x"
+    "monocle": "1.x.x",
+    "umd": "~2.0.0"
   },
   "scripts": {
     "test": "mocha test"
-  }
+  },
+  "keywords": [
+    "share", 
+    "social"
+  ],
+  "engines": {}
 }