Ports Alert component into jck-library-extensions.

jeremyckahn · Jun 19, 2014 · 9c425bb · 9c425bb
1 parent 25c7e2b
commit 9c425bb
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 77 deletions.
diff --git a/bin/app.js b/bin/app.js
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "Stylie",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "homepage": "https://github.com/jeremyckahn/stylie",
   "authors": [
     "Jeremy Kahn <[email protected]>"
@@ -20,7 +20,7 @@
     "jquery-cubelet": "~0.0.1",
     "bezierizer": "~0.0.4",
     "mustache": "~0.7.2",
-    "jck-library-extensions": "~0.0.4"
+    "jck-library-extensions": "~0.0.5"
   },
   "resolutions": {
     "jquery": "~2.0.2",

diff --git a/dev.html b/dev.html
@@ -14,8 +14,7 @@
       <h1><a href="https://github.com/jeremyckahn/stylie"><img src="img/ui/stylie_logo.png" alt="Stylie"></a></h1>
       <h2>A fun CSS animation tool, powered by <a href="http://rekapi.com" target="_blank">Rekapi</a></h2>
       <a id="help-trigger" href="#">?</a>
-      <div id="top-level-alert">
-        <p>&nbsp;</p>
+      <div id="top-level-alert" class="alert">
       </div>
     </header>
     <div id="scaffolding-area">

diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Stylie",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "homepage": "https://github.com/jeremyckahn/stylie",
   "author": "Jeremy Kahn <[email protected]>",
   "description": "A CSS3 keyframe generator",

diff --git a/src/init.js b/src/init.js
@@ -60,6 +60,7 @@ require([
   // Extensions
   ,'bower_components/jck-library-extensions/src/backbone/tabs/tabs'
   ,'bower_components/jck-library-extensions/src/backbone/pane/pane'
+  ,'bower_components/jck-library-extensions/src/backbone/alert/alert'
 
   // Misc
   ,'src/app'
@@ -78,7 +79,6 @@ require([
   ,'src/ui/modal'
   ,'src/ui/hotkey-handler'
   ,'src/ui/rekapi-controls'
-  ,'src/ui/alert'
   ,'src/ui/save'
   ,'src/ui/load'
   ,'src/ui/orientation-controls'
@@ -106,6 +106,7 @@ require([
 
   ,TabsView
   ,PaneView
+  ,AlertView
 
   ,app
   ,constant
@@ -122,7 +123,6 @@ require([
   ,ModalView
   ,HotkeyHandlerView
   ,RekapiControlsView
-  ,AlertView
   ,SaveView
   ,LoadView
   ,OrientationControlsView
@@ -313,8 +313,11 @@ require([
   });
 
   app.view.topLevelAlertView = new AlertView({
-    '$el': $('#top-level-alert')
+    'el': document.getElementById('top-level-alert')
   });
+  var topLevelAlertView = app.view.topLevelAlertView;
+  Backbone.on(constant.ALERT_ERROR,
+      _.bind(topLevelAlertView.show, topLevelAlertView));
 
   var animationModel = new AnimationModel();
 

diff --git a/src/ui/alert.js b/src/ui/alert.js
diff --git a/styles/css/main.css b/styles/css/main.css
diff --git a/styles/sass/main.scss b/styles/sass/main.scss
@@ -1,5 +1,6 @@
 @import '../../bower_components/jck-library-extensions/src/backbone/tabs/tabs';
 @import '../../bower_components/jck-library-extensions/src/backbone/pane/pane';
+@import '../../bower_components/jck-library-extensions/src/backbone/alert/alert';
 @import 'bezierizer';
 
 $IMAGE_DIR: '../../img';
@@ -785,25 +786,6 @@ canvas {
       padding-bottom: 12px;
     }
 
-#top-level-alert {
-  background: #a8a8a8;
-  border-radius: 4px;
-  display: none;
-  height: 46px;
-  padding: 4px;
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  width: 345px;
-}
-
-  #top-level-alert p {
-    color: #fff;
-    line-height: 1.2em;
-    margin: 0;
-    text-shadow: #555 0 0 1px;
-  }
-
 #custom-ease {
 
 }