started getting specs working

Author: hojberg

README.md

@@ -2,17 +2,38 @@
 
 /* =BASE
 ====================================================== */
-html, body { background: #ddd; }
+html, body { background: #d9d9d9 url(../img/noisebg.png); color: #444;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
+}
 body { font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial; padding: 0; margin: 0; }
 
+a { color: #000; }
+
+ul, ol, form { margin: 0; padding: 0; }
+
+ul, ol { list-style-type: none; }
+
 /* =LAYOUT
 ====================================================== */
 #header { background: #000; }
 
 .canvas { background: url(../img/blueprintbg.png); padding: 60px; 
-  box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.2), 0 75px 200px #fff;
+  border-bottom: 1px solid #fff;
 }
 
-.configuration { width: 800px; margin: auto; }
+#content { width: 800px; margin: auto; padding: 40px; overflow: hidden; }
 
-#footer { text-align: center; margin-top: 20px; font-size: 11px; color: #888; }
+#footer { text-align: center; margin-top: 20px; font-size: 11px; color: #888;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+/* =MODULES
+====================================================== */
+.configuration { float: left; width: 300px; }
+
+.result_code { padding: 10px; float: right; width: 400px; font-size: 14px; font-family: 'Courier new'; font-weight: bold;
+  background: rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+}

css/app.css

@@ -3,7 +3,9 @@
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
 }
 
-.arrow_box { color: #fff; background: #ff9600; border-color: #ffd163; position: relative;
+.arrow_box { color: #fff; position: relative;
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
@@ -18,14 +20,14 @@
 
 .arrow_box.top:after {
 	border-width: 12px;
-	border-bottom-color: #ff9600;
+	border-bottom-color: #7297e7;
 	left: 50%;
 	margin-left: -12px;
 }
 
 .arrow_box.top:before {
 	border-width: 14px;
-	border-bottom-color: #ffd163;
+	border-bottom-color: rgba(255, 255, 255, 0.5);
 	left: 50%;
 	margin-left: -14px;
 }

css/arrow.css

@@ -18,9 +18,9 @@
 
     </div>
 
-    <div class='configuration'>
+    <div id='content'>
 
-      <form>
+      <form class='configuration'>
         <ol>
           <li>
             <label>arrow position</label>
@@ -49,5 +49,7 @@
       Follow me on twitter: <a href='https://twitter.com/shojberg'>@shojberg</a>
     </footer>
 
+    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
+    <script src='js/lib/app.js'></script>
   </body>
 </html>

img/noisebg.png

@@ -1,7 +1,7 @@
-// create global InpaySupport if it doesn't exist
-if (!('InpaySupport' in window)) window.InpaySupport = {};
+// create global CSSArrowPlease if it doesn't exist
+if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
-(function (I) {
+(function (G) {
 
   // ----- Application ----- //
 
@@ -36,7 +36,7 @@ if (!('InpaySupport' in window)) window.InpaySupport = {};
       var view = this.currentView;
 
       if (view === 'SearchView') {
-        new I.SearchView({
+        new G.SearchView({
           container: $('.search')
         });
       } 
@@ -45,6 +45,6 @@ if (!('InpaySupport' in window)) window.InpaySupport = {};
   };
 
   // Expose
-  I.App = App;
+  G.App = App;
 
-}(window.InpaySupport));
+}(window.CSSArrowPlease));

index.html

@@ -0,0 +1,77 @@
+// create global CSSArrowPlease if it doesn't exist
+if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
+
+(function (G) {
+
+  /**
+  @class Arrow
+  @constructor
+  **/
+  var Arrow = function () { 
+    this.init.apply(this, arguments);
+  };
+
+  Arrow.prototype = {
+
+    init: function () {
+      // jquerify this 
+      this._$self = $(this);
+
+      this._addAttrs();
+    },
+
+    _addAttrs: function () {
+      var ATTRS       = Arrow.ATTRS,
+          attributes  = {};
+
+      $.each(ATTRS, function (attr, value) {
+        attributes[attr] = value;
+      });
+
+      this._attributes = attributes;
+    },
+
+    get: function (attr) {
+      attr = this._attributes[attr];
+      return attr;
+    },
+
+    set: function (attr, val) {
+      if (!(attr in this._attributes)) return;
+
+      this._attributes[attr] = 'val';
+      this.fire('change');
+    },
+
+    on: function (evType, callback, context) {
+      var $self = this._$self;
+
+      $self.on(
+        evType, 
+        $.proxy(callback, context || this)
+      );
+    },
+
+    fire: function (evType) {
+      var $self = this._$self;
+
+      $self.trigger(evType);
+    },
+
+    toCSS: function () {
+      return 'WOOT';
+    }
+
+  };
+
+  Arrow.ATTRS = {
+    position: 'top',
+    color:    '#fff',
+    border:   {color: '#000', thickness: '2px'}
+  };
+
+  // Expose
+  G.Arrow = Arrow;
+
+}(window.CSSArrowPlease));
+

js/lib/app.js

@@ -0,0 +1,49 @@
+// create global CSSArrowPlease if it doesn't exist
+if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
+
+(function (G) {
+
+  /**
+  @class ArrowCSSView
+  @constructor
+  **/
+  var ArrowCSSView = function () { 
+    this.init.apply(this, arguments);
+  };
+
+  ArrowCSSView.prototype = {
+
+    init: function (options) {
+      this.container  = options.container;
+      this.model      = options.model;
+
+      this.model.on('change', this._handleChange, this);
+    },
+
+    /**
+    @method _handleChange
+    @description handles changes to the model
+    @chainable
+    **/
+    _handleChange: function () {
+      this.render();
+    },
+
+    /**
+    @method render
+    @description renders the model's css
+    @chainable
+    **/
+    render: function () {
+      this.container.html(this.model.toCSS());
+      return this;
+    }
+
+  };
+
+  // Expose public api
+  G.ArrowCSSView = ArrowCSSView;
+
+}(window.CSSArrowPlease));
+
+