BFG - Initial commit. Not stable.

ericguzman · Dec 29, 2013 · 0bb608d · 0bb608d
1 parent 995a1e8
commit 0bb608d
Show file tree

Hide file tree

Showing 794 changed files with 126,727 additions and 3 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,4 +1,32 @@
-bfg
-===
+{{name}}
+==============
 
-bigfatgradient.com
+This is the Montage app template.
+
+Note: Before working on your app you will need to add montage to it.
+
+```
+npm install .
+```
+
+Layout
+------
+
+The template contains the following files and directories:
+
+* `index.html`
+* `package.json` – Describes your app and its dependencies
+* `README.markdown` – This readme. Replace the current content with a description of your app
+* `ui/` – Directory containing all the UI .reel directories.
+  * `main.reel` – The main interface component
+* `core/` – Directory containing all core code for your app.
+* `node_modules/` – Directory containing all npm packages needed, including Montage. Any packages here must be included as `dependencies` in `package.json` for the Montage require to find them.
+* `assets/` – Assets such as global styles and images for your app
+* `test/` – Directory containing tests for your app.
+  * `all.js` – Module that point the test runner to all your jasmine specs.
+* `run-tests.html` – Page to run jasmine tests manually in your browser
+
+Create the following directories if you need them:
+
+* `locale/` – Directory containing localized content.
+* `scripts/` – Directory containing other JS libraries. If a library doesn’t support the CommonJS "exports" object it will need to be loaded through a `<script>` tag.
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/data/page-data.js b/assets/data/page-data.js
@@ -0,0 +1,34 @@
+var Montage = require("montage").Montage;
+var Welcome = require("ui/pages/welcome.reel").Welcome;
+var Blog = require("ui/pages/blog.reel").Blog;
+var Social = require("ui/pages/social.reel").Social;
+var About = require("ui/pages/about.reel").About;
+
+/**
+ @module "data/page-data.js"
+ */
+
+
+/**
+ * @class PageData
+ */
+exports.PageData = {
+  pages: [
+    {
+      'id': 'welcome',
+      'module': Welcome,
+      '3': 'about',
+      '1': 'social',
+      '2': 'blog'
+    }, {
+      'id': 'about',
+      'module': About
+    }, {
+      'id': 'social',
+      'module': Social
+    }, {
+      'id': 'blog',
+      'module': Blog
+    }
+  ]
+};
diff --git a/assets/images/montage-logo-gradients.svg b/assets/images/montage-logo-gradients.svg
diff --git a/assets/images/my_image.jpg b/assets/images/my_image.jpg
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -0,0 +1,7 @@
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    color: #222;
+}
+
diff --git a/blank.html b/blank.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>undefined</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="generator" content="Ninja">
+    <style type="text/css">
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+    </style>
+    <script>
+    function generateRGBKs( img ) {
+            var w = img.width;
+            var h = img.height;
+            var rgbks = [];
+
+            var canvas = document.createElement("canvas");
+            canvas.width = w;
+            canvas.height = h;
+
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage( img, 0, 0 );
+
+            var pixels = ctx.getImageData( 0, 0, w, h ).data;
+
+            // 4 is used to ask for 3 images: red, green, blue and
+            // black in that order.
+            for ( var rgbI = 0; rgbI < 4; rgbI++ ) {
+                var canvas = document.createElement("canvas");
+                canvas.width  = w;
+                canvas.height = h;
+
+                var ctx = canvas.getContext('2d');
+                ctx.drawImage( img, 0, 0 );
+                var to = ctx.getImageData( 0, 0, w, h );
+                var toData = to.data;
+
+                for (
+                        var i = 0, len = pixels.length;
+                        i < len;
+                        i += 4
+                ) {
+                    toData[i  ] = (rgbI === 0) ? pixels[i  ] : 0;
+                    toData[i+1] = (rgbI === 1) ? pixels[i+1] : 0;
+                    toData[i+2] = (rgbI === 2) ? pixels[i+2] : 0;
+                    toData[i+3] =                pixels[i+3]    ;
+                }
+
+                ctx.putImageData( to, 0, 0 );
+
+                // image is _slightly_ faster then canvas for this, so convert
+                var imgComp = new Image();
+                imgComp.src = canvas.toDataURL();
+
+                rgbks.push( imgComp );
+            }
+
+            return rgbks;
+        }
+
+        // function generateRGBKs(img) {
+        //           var w = img.width;
+        //           var h = img.height;
+        //           var rgbks = [];
+        //           
+        //           
+        //         }
+
+        function generateTintImage( img, rgbks, red, green, blue ) {
+                var buff = document.createElement( "canvas" );
+                buff.width  = img.width;
+                buff.height = img.height;
+
+                var ctx  = buff.getContext("2d");
+
+                ctx.globalAlpha = 1;
+                ctx.globalCompositeOperation = 'copy';
+                ctx.drawImage( rgbks[3], 0, 0 );
+
+                ctx.globalCompositeOperation = 'lighter';
+                if ( red > 0 ) {
+                    ctx.globalAlpha = red   / 255.0;
+                    ctx.drawImage( rgbks[0], 0, 0 );
+                }
+                if ( green > 0 ) {
+                    ctx.globalAlpha = green / 255.0;
+                    ctx.drawImage( rgbks[1], 0, 0 );
+                }
+                if ( blue > 0 ) {
+                    ctx.globalAlpha = blue  / 255.0;
+                    ctx.drawImage( rgbks[2], 0, 0 );
+                }
+
+                return buff;
+            }
+
+            window.onload = function() {
+              var img = new Image();
+                  img.onload = function() {
+                      var rgbks = generateRGBKs( img );
+                      var tintImg = generateTintImage( img, rgbks, 40, 140, 140 );
+
+                      var canvas = document.getElementById("canvas");
+                      var ctx = canvas.getContext("2d");
+
+                      var w = canvas.width;
+                      var h = canvas.height;
+
+                      // ctx.fillStyle = "black";
+                      //                       ctx.fillRect( 0, 0, w, h );
+
+                      ctx.drawImage( tintImg, 0, 0 );
+                  }
+                  img.src = "assets/images/my_image.jpg";
+            };
+
+    </script>
+  </head>
+  <body>
+    <canvas id="canvas" width="612" height="816">
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Big Fat Gradient</title>
+
+    <link rel="stylesheet" href="assets/style/style.css" />
+
+    <script src="node_modules/montage/montage.js" async></script>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype": "montage/ui/loader.reel",
+            "properties": {
+                "mainModule": "ui/main.reel",
+                "mainName": "Main"
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <span class="loading"></span>
+</body>
+</html>
diff --git a/node_modules/digit/.jshintignore b/node_modules/digit/.jshintignore
diff --git a/node_modules/digit/.jshintrc b/node_modules/digit/.jshintrc
diff --git a/node_modules/digit/.npmignore b/node_modules/digit/.npmignore
diff --git a/node_modules/digit/CHANGES.md b/node_modules/digit/CHANGES.md