new spinner

ready state add: hide empty images gulp: dont crash on browserify errors
2014-11-26 14:05:59 -05:00 · 2014-11-26 14:05:59 -05:00 · b823719b9a
--- a/gulp/browserify.js
+++ b/gulp/browserify.js
@ -14,7 +14,7 @@ module.exports = function () {

    return browserified
        .bundle()
-        .pipe(handleErrors())
+        .on('error', handleErrors.onError)
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(uglify())
--- a/gulp/error.js
+++ b/gulp/error.js
@ -7,8 +7,12 @@ function onError(err) {
    this.emit('end');
 }

-module.exports = function () {
+function PlumberError() {
    return plumber({
        errorHandler: onError
    });
 };
+
+PlumberError.onError = onError;
+
+module.exports = PlumberError;
--- a/lib/index.js
+++ b/lib/index.js
@ -41,10 +41,13 @@ i18n.bind(locale, Vue);
 var app = new Vue({
    el: '#app',
    data: {
-        currentView: 'loader',
-        params: null
+        currentView: null,
+        params: null,
+        isReady: false
    },
    created: function () {
+        var self = this;
+
        model.restore(function () {

            // i18n
--- a/lib/router.js
+++ b/lib/router.js
@ -6,6 +6,7 @@ module.exports = function (app) {
    page(function (e, next) {
        if (!model._ready) return next();
        model.data.session.path = e.path;
+        app.$data.isReady = true;
        next();
    });

@ -35,31 +36,30 @@ module.exports = function (app) {
    });

    page('/profile', function () {
+        app.$data.isReady = false;
        app.currentView = 'profile';
    });

    // Interior
    page('/make/:id/:mode', function (e) {
+        app.$data.isReady = false;
        app.currentView = e.params.mode;
        app.params = e.params;
    });

    page('/make/:id/block/:index', function (e) {
+        app.$data.isReady = false;
        app.currentView = 'block';
        app.params = e.params;
    });

    // Temp -- probably will be something else
    page('/make/:id/block/:index/color-picker', function (e) {
+        app.$data.isReady = false;
        app.currentView = 'color-picker';
        app.params = e.params;
    });

-    // login
-    page('/login', function () {
-        app.currentView = 'loader';
-    });
-
    // Configuration
    page('*', function () {
        app.currentView = 'error';
--- a/static/index.html
+++ b/static/index.html
@ -12,6 +12,12 @@
    <body>
        <div id="app">
            <div v-view="currentView" class="main"></div>
+            <div class="loader animated v-fade" v-if="!isReady" v-transition>
+                <div class="loading-spinner">
+                  <div class="cube1"></div>
+                  <div class="cube2"></div>
+                </div>
+            </div>
        </div>
        <script src="/index.js"></script>
        <!-- Analytics -->
--- a/static/styles/animations.less
+++ b/static/styles/animations.less
@ -3155,3 +3155,18 @@ Copyright (c) 2014 Daniel Eden
  -webkit-animation-name: slideOutUp;
          animation-name: slideOutUp;
 }
+
+
+/*********************************************************
+* VUE.JS
+*/
+
+.v-fade {
+    &.v-enter {
+        .fadeIn;
+    }
+    &.v-leave {
+        .fadeOut;
+        pointer-events: none;
+    }
+}
--- a/static/styles/common.less
+++ b/static/styles/common.less
@ -65,7 +65,7 @@ body, html {
@import "lists";
@import "tips";
@import "alerts";
-
+@import "loader";
@import "login";


--- a/static/styles/loader.less
+++ b/static/styles/loader.less
@ -0,0 +1,63 @@
+.loader {
+    background: @turquoise;
+    display: -webkit-flex;
+    display: flex;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    top: 0;
+    align-items: center;
+    justify-content: center;
+}
+
+@translateDistance: 42px;
+
+.loading-spinner {
+    margin: 100px auto;
+    width: 60px;
+    height: 60px;
+    position: relative;
+}
+
+.cube1, .cube2 {
+    border: 2px dotted white;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-animation: cubemove 1.8s infinite ease-in-out;
+    animation: cubemove 1.8s infinite ease-in-out;
+}
+
+.cube2 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+@-webkit-keyframes cubemove {
+  25% { -webkit-transform: translateX(@translateDistance) rotate(-90deg) scale(0.5) }
+  50% { -webkit-transform: translateX(@translateDistance) translateY(@translateDistance) rotate(-180deg) }
+  75% { -webkit-transform: translateX(0px) translateY(@translateDistance) rotate(-270deg) scale(0.5) }
+  100% { -webkit-transform: rotate(-360deg) }
+}
+
+@keyframes cubemove {
+  25% {
+    transform: translateX(@translateDistance) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(@translateDistance) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(@translateDistance) translateY(@translateDistance) rotate(-179deg);
+    -webkit-transform: translateX(@translateDistance) translateY(@translateDistance) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(@translateDistance) translateY(@translateDistance) rotate(-180deg);
+    -webkit-transform: translateX(@translateDistance) translateY(@translateDistance) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(@translateDistance) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(@translateDistance) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}
--- a/views/add/index.html
+++ b/views/add/index.html
@ -1,8 +1,8 @@
 <ul>
    <li v-repeat="block: blocks">
        <a data-block="{{block.id}}" href="#">
-            <img src="{{block.icon}}" alt="{{block.name}}" />
-            <p>{{ block.name | i18n }}</p>
+            <img v-if="block.icon" src="{{block.icon}}" alt="{{block.name}}" />
+            <p v-if="block.name">{{ block.name | i18n }}</p>
        </a>
    </li>
 </ul>
--- a/views/add/index.js
+++ b/views/add/index.js
@ -37,6 +37,7 @@ module.exports = view.extend({

        // Bind app
        app.storage.on('value', function (snapshot) {
+            self.$root.isReady = true;
            if (!snapshot.val()) return;
            self.$data.app = snapshot.val() || {};
            self.$data.app.id = snapshot.key();
--- a/views/block/index.js
+++ b/views/block/index.js
@ -53,6 +53,7 @@ module.exports = view.extend({
        app = new App(id);
        app.storage.on('value', function (snapshot) {
            var app = snapshot.val();
+            self.$root.isReady = true;
            if (!app || !app.blocks) return;
            self.$data.block = snapshot.val().blocks[index];
        });
--- a/views/color-picker/index.js
+++ b/views/color-picker/index.js
@ -26,6 +26,7 @@ module.exports = view.extend({

        ref.on('value', function (snapshot) {
            var val = snapshot.val();
+            self.$root.isReady = true;
            if (!val) return;
            $data.selectedColor = val;
            $data.colors.forEach(function (arr, i) {
--- a/views/data/index.js
+++ b/views/data/index.js
@ -17,6 +17,7 @@ module.exports = view.extend({

        app.storage.on('value', function (snapshot) {
            var val = snapshot.val();
+            self.$root.isReady = true;
            if (!val) return;
            // Bind app
            self.$data.app = val;
--- a/views/detail/index.js
+++ b/views/detail/index.js
@ -26,6 +26,7 @@ module.exports = view.extend({

        app.storage.on('value', function (snapshot) {
            var val = snapshot.val();
+            self.$root.isReady = true;
            if (!val) return;
            // Bind app
            self.$data.id = id;
--- a/views/edit/index.js
+++ b/views/edit/index.js
@ -18,6 +18,7 @@ module.exports = view.extend({
        var app = new App(id);
        self.$data.onDone = '/make/' + id + '/share?publish=true';
        app.storage.on('value', function (snapshot) {
+            self.$root.isReady = true;
            if (!snapshot.val()) return;
            self.$data.app = snapshot.val();
            self.$data.app.id = snapshot.key();
--- a/views/loader/index.html
+++ b/views/loader/index.html
@ -1 +1,4 @@
-<img src="/images/loader.gif" alt="Loading...">
+<div class="spinner">
+  <div class="cube1"></div>
+  <div class="cube2"></div>
+</div>
--- a/views/loader/index.less
+++ b/views/loader/index.less
@ -1,8 +0,0 @@
-#loader {
-    .full-page;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-}
--- a/views/play/index.js
+++ b/views/play/index.js
@ -18,6 +18,7 @@ module.exports = view.extend({
        var app = new App(id);

        app.storage.on('value', function (snapshot) {
+            self.$root.isReady = true;
            if (!snapshot.val()) return;
            self.$data.app = snapshot.val() || {};
            self.$data.app.id = snapshot.key();
--- a/views/profile/index.js
+++ b/views/profile/index.js
@ -54,6 +54,7 @@ module.exports = view.extend({
        }

        function onAdded(snapshot) {
+            self.$root.isReady = true;
            var data = snapshot.val();
            var dupe;
            if (!data) return;
--- a/views/share/index.js
+++ b/views/share/index.js
@ -42,6 +42,7 @@ module.exports = view.extend({

        // Bind app
        app.storage.once('value', function (snapshot) {
+            self.$root.isReady = true;
            var val = snapshot.val();
            if (!val) return;
            self.$data.app = val;