feat(generators/app/templates): add an environment-ribbon view showin…

…g the build's briefing details for debug type builds

generators/app/index.js

@@ -445,6 +445,11 @@ var AppGenerator = generators.Base.extend(
                     ,   'src/models/build-brief.coffee'
                     ,   [ 'src/models/settings-environment.coffee' ]
 
+                        //  App source for debug builds
+
+                    ,   'src/views/debug.environment-ribbon.coffee'
+                    ,   'src/views/debug.environment-ribbon.hbs'
+
                         //  Utils
 
                     ,   'src/utils/hbs/helpers/moment.coffee'
@@ -459,10 +464,18 @@ var AppGenerator = generators.Base.extend(
                     ,   'src/sass/_settings.sass'
                     ,   'src/sass/_views.sass'
                     ,   [ 'src/sass/app.sass' ]
-                    ,   'src/sass/debug.sass'
                     ,   'src/style/images/debug/internals.jpg'
                     ,   'src/style/images/sprites/check-green.png'
 
+                        //  Style for debug builds
+
+                    ,   'src/sass/debug.sass'
+                    ,   'src/sass/views/_debug.environment-ribbon.sass'
+
+                        //  Utils
+
+                    ,   'src/utils/hbs/helpers/moment.coffee'
+
                         //  Target environment settings:
 
                     ,   'settings/@README.md'

generators/app/templates/src/sass/debug.sass

@@ -7,3 +7,6 @@ html
     //
     background:                         image-url('debug/internals.jpg') center / cover no-repeat fixed border-box #C00
     box-shadow:                         inset 0px 10vh 30vmin 15vmin rgba(16,0,0,0.9)
+
+
+@import "views/_debug.environment-ribbon"

generators/app/templates/src/sass/views/_debug.environment-ribbon.sass

@@ -0,0 +1,67 @@
+$default_textColor:         #6a6340
+$default_gradientHigh:      #BFDC7A
+$default_gradientLow:       #8EBF45
+
+$acceptance_textColor:      #801111
+$acceptance_gradientHigh:   #d64b4b
+$acceptance_gradientLow:    #ab2c2c
+
+$testing_textColor:         #807712
+$testing_gradientHigh:      #d4c94c
+$testing_gradientLow:       #aba02c
+
+=ribbon-colors( $textColor, $gradientHigh, $gradientLow )
+
+    background-color:       $gradientHigh
+    background-image:       -webkit-gradient(linear, left top, left bottom, from($gradientHigh), to($gradientLow))
+    background-image:       -webkit-linear-gradient(top, $gradientHigh, $gradientLow)
+    background-image:          -moz-linear-gradient(top, $gradientHigh, $gradientLow)
+    background-image:           -ms-linear-gradient(top, $gradientHigh, $gradientLow)
+    background-image:            -o-linear-gradient(top, $gradientHigh, $gradientLow)
+
+    color: $textColor
+
+.environment-ribbon-view
+
+    position:               fixed
+    z-index:                1001
+
+    bottom:                 25px
+    right:                  -100px
+    width:                  300px
+
+    transform:              rotate(-45deg)
+
+    .ribbon
+        padding:                2px 0
+        font:                   bold 15px Sans-Serif
+
+        text-align:             center
+        text-shadow:            rgba(214,92,92,0.5) 0px 1px 0px
+
+        text-shadow:            rgba(255,255,255,0.5) 0px 1px 0px
+
+        box-shadow:             0px 0px 3px rgba(0,0,0,0.3)
+
+        transition:             opacity 0.2s
+
+        &:hover
+            opacity:                0
+
+        .stitches-top
+            margin-bottom:          2px
+            border-top:             1px dashed rgba(0, 0, 0, 0.2)
+            box-shadow:             0px 0px 2px rgba(255, 255, 255, 0.3)
+
+        .stitches-bottom
+            margin-top:             2px
+            border-top:             1px dashed rgba(0, 0, 0, 0.2)
+            box-shadow:             0px 0px 2px rgba(255, 255, 255, 0.3)
+
+        +ribbon-colors( $default_textColor, $default_gradientHigh, $default_gradientLow )
+
+        &.env-acceptance
+            +ribbon-colors( $acceptance_textColor, $acceptance_gradientHigh, $acceptance_gradientLow )
+
+        &.env-testing
+            +ribbon-colors( $testing_textColor, $testing_gradientHigh, $testing_gradientLow )

generators/app/templates/src/views/debug.environment-ribbon.coffee

@@ -0,0 +1,194 @@
+( ( factory ) ->
+    if typeof exports is 'object'
+        module.exports = factory(
+            require( 'backbone' )
+            require( 'jquery' )
+            require( 'q' )
+
+            require( './../models/build-brief.coffee' )
+            require( './../models/settings-environment.coffee' )
+
+            require( './../utils/hbs/helpers/moment.coffee' )
+
+            require( './debug.environment-ribbon.hbs' )
+        )
+    else if typeof define is 'function' and define.amd
+        define( [
+            'backbone'
+            'jquery'
+            'q'
+
+            './../models/build-brief.coffee'
+            './../models/settings-environment.coffee'
+
+            './../utils/hbs/helpers/moment.coffee'
+
+            './debug.environment-ribbon.hbs'
+        ], factory )
+    return
+)((
+    Backbone
+    $
+    Q
+
+    buildBrief
+    settingsEnv
+
+    hbsHelperMoment
+
+    template
+) ->
+
+    ###*
+    #   @author         David Bouman
+    #   @module         App
+    #   @submodule      Views
+    ###
+
+    'use strict'
+
+
+    ###*
+    #   Visually decorate site with a ribbon revealing the target environment and latest build info.
+    #
+    #     * Fades to transparent on mouse hover.
+    #     * Removes itself from the DOM when clicked.
+    #
+    #   @class          EnvironmentRibbonView
+    #   @extends        Backbone.View
+    #   @constructor
+    ###
+
+    class EnvironmentRibbonView extends Backbone.View
+
+        ###*
+        #   CSS class(es) to set on this view's root DOM element.
+        #
+        #   @property       className
+        #   @type           String
+        #   @static
+        #   @final
+        #
+        #   @default        'environment-ribbon-view'
+        ###
+
+        className:          'environment-ribbon-view'
+
+
+        ###*
+        #   The compiled handlebars template expander function.
+        #
+        #   @property       template
+        #   @type           Function
+        #   @protected
+        #   @static
+        #   @final
+        ###
+
+        template:           template
+
+
+        ###*
+        #   Delegated DOM event handler definition.
+        #
+        #   @property       events
+        #   @type           Object
+        #   @static
+        #   @final
+        ###
+
+        events:
+            'click':        '_onPokeIntent'
+
+
+        ###*
+        #   Attach view to the DOM and `@render()` as soon as the data becomes available.
+        #
+        #   @method         initialize
+        #   @protected
+        ###
+
+        initialize: () ->
+
+            Q.all(
+                [
+                    ##  Wait until the DOM is ready.
+                    ##
+                    new Q.Promise( ( resolve ) -> $( resolve ); return; )
+
+                ,
+                    ##  Wait until the target-environment settings have been loaded.
+                    ##
+                    settingsEnv.initialized
+
+                ,
+                    ##  Wait until the buid's briefing data have been loaded.
+                    ##
+                    buildBrief.initialized
+
+                ,
+                ]
+
+            ).done( () =>
+
+                @render().$el.appendTo( $( 'body' ))
+
+                return
+            )
+
+            return
+
+
+        ###*
+        #   @method         render
+        #
+        #   @chainable
+        ###
+
+        render: () ->
+
+            ##  Expand the handlebars template into this view's container element.
+            ##
+            @$el.html( @template( @renderData() ) )
+
+            ##  This method is chainable.
+            ##
+            return @
+
+
+        ###*
+        #   Collect and return all data needed to expand the handlebars `@template` with.
+        #
+        #   @method         renderData
+        #   @protected
+        #
+        #   @return         {Object}
+        ###
+
+        renderData: () ->
+
+            settings:       settingsEnv.attributes
+            buildBrief:     buildBrief.attributes
+
+
+        ###*
+        #   Respond to the user interacting with the ribbon, removing it from the DOM.
+        #
+        #   @method         _onPokeIntent
+        #   @protected
+        ###
+
+        _onPokeIntent: () ->
+
+            ##  Remove ourselves from the DOM
+            ##
+            @remove()
+
+            return
+
+
+    ##  Export singleton.
+    ##
+    return new EnvironmentRibbonView()
+
+)

generators/app/templates/src/views/debug.environment-ribbon.hbs

@@ -0,0 +1,7 @@
+<div class="ribbon env-{{settings.environment}}">
+    <div class="stitches-top"></div>
+    {{#if buildBrief.buildNumber}}{{buildBrief.buildNumber}} / {{/if}} {{moment buildBrief.timestamp "MMM DD HH:mm"}}
+    <br />
+    {{settings.environment}}
+    <div class="stitches-bottom"></div>
+</div>