sc-frank-cucumber 1.2.1.00af28c

data/frank-skeleton/frank_static_resources.bundle/js/dropdown_control.coffee

@@ -0,0 +1,64 @@
+define ->
+
+  DropdownModel = Backbone.Model.extend
+    select: ->
+      @collection.each (model) =>
+        model.set( 'selected', model == @ )
+      @trigger('option-clicked',@)
+
+  DropdownCollection = Backbone.Collection.extend
+    model: DropdownModel
+
+  DropdownView = Backbone.View.extend
+    tagName: 'div'
+    className: 'dropdown'
+
+    events:
+      "click .drop-indicator": 'clickedDrop'
+      "click .button": 'clickedItem'
+
+    initialize: ->
+      @collection = new DropdownCollection()
+      @collection.on 'all', _.bind(@render,@)
+      
+      # hackery :(
+      $('body').on 'click', _.bind(@clickedOutsideDropdown,@)
+
+    selectedModel: ->
+      selected = @collection.find (m)-> m.get('selected')
+      selected || @collection.at(0)
+    unselectedModels: ->
+      _(@collection.reject (m)-> m.get('selected'))
+
+    createButtonFor: (model)->
+      $("""<button>#{model.get('text')}</button>""")
+        .on 'click', => @clickedItem(model)
+
+    render: ->
+      @$el
+        .empty()
+        .append( @createButtonFor(@selectedModel()) )
+        .append( $ul = $("<ul>") )
+
+      @unselectedModels().each (model)=>
+        $ul.append( @createButtonFor(model) )
+
+      @$el.append( """<div class="drop-indicator">v</div>""" )
+
+    clickedDrop: (e)->
+      e.stopPropagation() #prevent clickedOutsideDropdown from firing
+      @$('ul').toggleClass('shown')
+
+    clickedOutsideDropdown: ->
+      @$('ul').removeClass('shown')
+
+    clickedItem: (model)->
+      model.select()
+
+
+
+
+  {
+    DropdownModel : DropdownModel
+    DropdownView  : DropdownView
+  }

data/frank-skeleton/frank_static_resources.bundle/js/dropdown_control.js

@@ -0,0 +1,73 @@
+(function() {
+
+  define(function() {
+    var DropdownCollection, DropdownModel, DropdownView;
+    DropdownModel = Backbone.Model.extend({
+      select: function() {
+        var _this = this;
+        this.collection.each(function(model) {
+          return model.set('selected', model === _this);
+        });
+        return this.trigger('option-clicked', this);
+      }
+    });
+    DropdownCollection = Backbone.Collection.extend({
+      model: DropdownModel
+    });
+    DropdownView = Backbone.View.extend({
+      tagName: 'div',
+      className: 'dropdown',
+      events: {
+        "click .drop-indicator": 'clickedDrop',
+        "click .button": 'clickedItem'
+      },
+      initialize: function() {
+        this.collection = new DropdownCollection();
+        this.collection.on('all', _.bind(this.render, this));
+        return $('body').on('click', _.bind(this.clickedOutsideDropdown, this));
+      },
+      selectedModel: function() {
+        var selected;
+        selected = this.collection.find(function(m) {
+          return m.get('selected');
+        });
+        return selected || this.collection.at(0);
+      },
+      unselectedModels: function() {
+        return _(this.collection.reject(function(m) {
+          return m.get('selected');
+        }));
+      },
+      createButtonFor: function(model) {
+        var _this = this;
+        return $("<button>" + (model.get('text')) + "</button>").on('click', function() {
+          return _this.clickedItem(model);
+        });
+      },
+      render: function() {
+        var $ul,
+          _this = this;
+        this.$el.empty().append(this.createButtonFor(this.selectedModel())).append($ul = $("<ul>"));
+        this.unselectedModels().each(function(model) {
+          return $ul.append(_this.createButtonFor(model));
+        });
+        return this.$el.append("<div class=\"drop-indicator\">v</div>");
+      },
+      clickedDrop: function(e) {
+        e.stopPropagation();
+        return this.$('ul').toggleClass('shown');
+      },
+      clickedOutsideDropdown: function() {
+        return this.$('ul').removeClass('shown');
+      },
+      clickedItem: function(model) {
+        return model.select();
+      }
+    });
+    return {
+      DropdownModel: DropdownModel,
+      DropdownView: DropdownView
+    };
+  });
+
+}).call(this);

data/frank-skeleton/frank_static_resources.bundle/js/ersatz_model.coffee

@@ -0,0 +1,46 @@
+define ["frank"], (frank)->
+
+  ErsatzModel = Backbone.Model.extend
+    default: 
+      highlightFrames = []
+
+    initialize: ->
+      @refreshBaseScreenshot()
+
+    highlightSomeFramesForABit: (frames)->
+      @set('highlightFrames',frames)
+      @temporaryHighlightTimeout = window.setTimeout( =>
+        @set('highlightFrames',[])
+        @temporaryHighlightTimeout = undefined
+      , 1500 )
+
+    resetViews: (views,deviceFamily,orientation)->
+      @set('allViews',views)
+      @set('deviceFamily',deviceFamily)
+      @set('orientation',orientation)
+      @set('highlightFrames',[])
+      @configureAllViews(views)
+
+    refreshBaseScreenshot: ->
+      @set('baseScreenshotUrl',frank.baseScreenshotUrl())
+
+    toggleAsploded: ->
+      isAsploded = !(@get('isAsploded'))
+      @set('isAsploded',isAsploded)
+      if isAsploded
+        @updateAsplodedViews()
+
+      isAsploded
+
+    updateAsplodedViews: ()->
+      frank.requestSnapshotRefresh().done =>
+        @trigger('snapshots-refreshed',@)
+    
+    configureAllViews: (allViews)->
+      allViews.on 'change:active', (subject,isActive)=>
+        window.clearTimeout(@temporaryHighlightTimeout) if @temporaryHighlightTimeout?
+
+        if isActive && !@get('isAsploded')
+          @set('highlightFrames',[subject.get('accessibilityFrame')])
+        else
+          @set('highlightFrames',[])

data/frank-skeleton/frank_static_resources.bundle/js/ersatz_model.js

@@ -0,0 +1,60 @@
+(function() {
+
+  define(["frank"], function(frank) {
+    var ErsatzModel, highlightFrames;
+    return ErsatzModel = Backbone.Model.extend({
+      "default": highlightFrames = [],
+      initialize: function() {
+        return this.refreshBaseScreenshot();
+      },
+      highlightSomeFramesForABit: function(frames) {
+        var _this = this;
+        this.set('highlightFrames', frames);
+        return this.temporaryHighlightTimeout = window.setTimeout(function() {
+          _this.set('highlightFrames', []);
+          return _this.temporaryHighlightTimeout = void 0;
+        }, 1500);
+      },
+      resetViews: function(views, resolution, deviceFamily, orientation) {
+        this.set('allViews', views);
+        this.set('resolution', resolution);
+        this.set('deviceFamily', deviceFamily);
+        this.set('orientation', orientation);
+        this.set('highlightFrames', []);
+        return this.configureAllViews(views);
+      },
+      refreshBaseScreenshot: function() {
+        return this.set('baseScreenshotUrl', frank.baseScreenshotUrl());
+      },
+      toggleAsploded: function() {
+        var isAsploded;
+        isAsploded = !(this.get('isAsploded'));
+        this.set('isAsploded', isAsploded);
+        if (isAsploded) {
+          this.updateAsplodedViews();
+        }
+        return isAsploded;
+      },
+      updateAsplodedViews: function() {
+        var _this = this;
+        return frank.requestSnapshotRefresh().done(function() {
+          return _this.trigger('snapshots-refreshed', _this);
+        });
+      },
+      configureAllViews: function(allViews) {
+        var _this = this;
+        return allViews.on('change:active', function(subject, isActive) {
+          if (_this.temporaryHighlightTimeout != null) {
+            window.clearTimeout(_this.temporaryHighlightTimeout);
+          }
+          if (isActive && !_this.get('isAsploded')) {
+            return _this.set('highlightFrames', [subject.get('accessibilityFrame')]);
+          } else {
+            return _this.set('highlightFrames', []);
+          }
+        });
+      }
+    });
+  });
+
+}).call(this);

data/frank-skeleton/frank_static_resources.bundle/js/ersatz_view.coffee

@@ -0,0 +1,167 @@
+ISO_SKEW = 15
+ISO_MAJOR_OFFSET = 50
+ISO_MINOR_OFFSET = 5
+SCREEN_BOUNDS = {
+  iphone: { x: 0, y: 0, width: 320, height: 480 }
+  ipad: { x: 0, y: 0, width: 768, height: 1024 }
+}
+#SCREENSHOT_URL = symbiote.baseUrlFor( "screenshot" )
+
+define ['transform_stack','ersatz_model'], (transformStack,ErsatzModel)->
+
+  drawStaticBackdropAndReturnTransformer = (paper,deviceFamily,orientation,isoSkew) ->
+    paper.clear()
+    paper.canvas.setAttribute "width", "100%"
+    paper.canvas.setAttribute "height", "100%"
+
+    isiPhone = ('iphone' == deviceFamily)
+
+    if isiPhone
+      paper.canvas.setAttribute "viewBox", "0 0 380 720"
+      rotationPoint = [190,360]
+    else
+      paper.canvas.setAttribute "viewBox", "0 0 875 1200"
+      rotationPoint = [437,600]
+
+    transformer = transformStack()
+
+    transformer.skew(0, isoSkew).translate( 6, 6 )
+
+
+    rotation = switch orientation
+      when 'landscape_right' then 90
+      when 'portrait_upside_down' then 180
+      when 'landscape_left' then 270
+      else false
+
+    if rotation
+      transformer.rotateAroundPoint(rotation,rotationPoint...)
+
+    # main outline of device
+    if isiPhone
+      paper.rect(0, 0, 360, 708, 40).attr(
+        fill: "black"
+        stroke: "gray"
+        "stroke-width": 4
+      ).transform transformer.desc()
+    else
+      paper.rect( 10, 10, 855, 1110, 20 ).attr(
+        'fill': 'black',
+        'stroke': 'gray',
+        'stroke-width': 6
+      ).transform transformer.desc()
+
+
+    if isiPhone
+      # home button
+      transformer.push().translate( 180, 655 )
+      paper.circle(0, 0, 34).transform(transformer.desc()).attr( "fill", "90-#303030-#101010" )
+   
+      # square inside home button
+      paper.rect(0, 0, 22, 22, 5).attr(
+        stroke: "gray"
+        "stroke-width": 2
+      ).transform transformer.push().translate(-11, -11).descAndPop()
+
+      transformer.translate(20, 120)
+
+    else
+      transformer.translate(50,50)
+
+    if( isoSkew > 0 )
+      transformer.translate(-ISO_MAJOR_OFFSET, 0)
+    transformer
+
+
+  transformFromBaseForViewModel = (baseTransformer,viewModel,withSkew=false)->
+    {origin:{x,y}} = viewModel.get('accessibilityFrame')
+    baseTransformer.push().translate(x,y)
+    if( withSkew )
+      baseTransformer.translate(viewModel.get('depth')*-ISO_MINOR_OFFSET, 0)
+    baseTransformer.descAndPop()
+
+  ErsatzViewSnapshotView = Backbone.View.extend
+    initialize:->
+      @model.on('change:active',_.bind(@updateOpacity,@))
+      @render()
+
+    render: ->
+      frame = @model.get('accessibilityFrame')
+      @el
+        .attr
+          transform: transformFromBaseForViewModel( @options.baseTransformer, @model,true )
+          src: @model.getSnapshotUrl()
+          x: 0
+          y: 0
+          width: frame.size.width
+          height: frame.size.height
+      @updateOpacity()
+      @el
+
+     updateOpacity: ->
+       opacity = ( if @model.get('active') then 1.0 else 0.05 )
+       @el.attr('opacity',opacity)
+
+
+  ErsatzView = Backbone.View.extend
+    el: $('#ui-locator-view')
+
+    initialize: ->
+      _.bindAll( @, 'render' )
+      @model = new ErsatzModel()
+      @highlights = []
+      @paper = new Raphael(@.el)
+      @model.on 'change:baseScreenshotUrl', _.bind(@refreshBaseScreenshot,@)
+      @model.on 'change:isAsploded', _.bind(@render,@)
+      @model.on 'snapshots-refreshed', _.bind(@refreshSnapshots,@)
+      @model.on 'change:highlightFrames', _.bind(@refreshHighlightFrames,@)
+
+    render: ->
+      @highlights = []
+
+      isoSkew = (if @model.get('isAsploded') then ISO_SKEW else 0)
+      @backdropTransformer = drawStaticBackdropAndReturnTransformer(@paper,@model.get('deviceFamily'),@model.get('orientation'),isoSkew)
+      @backdrop = @paper.image()
+      @refreshBaseScreenshot()
+      if @model.get('isAsploded')
+        @backdrop.attr('opacity',0.5)
+        @refreshSnapshots()
+
+      @el
+
+    screenBounds: -> SCREEN_BOUNDS[@model.get('deviceFamily')]
+
+
+    refreshBaseScreenshot: ->
+      newScreenshotUrl = @model.get('baseScreenshotUrl')
+      return unless newScreenshotUrl?
+
+      @backdrop
+        .transform(@backdropTransformer.desc())
+        .attr( @screenBounds() )
+        .attr( 'src', newScreenshotUrl )
+        .toFront()
+
+    refreshSnapshots: ->
+      @model.get('allViews').each (viewModel) =>
+        snapshotView = new ErsatzViewSnapshotView(
+          model: viewModel
+          baseTransformer: @backdropTransformer
+          el: @paper.image()
+        )
+
+    refreshHighlightFrames: ->
+      h.remove() for h in @highlights
+      @highlights = []
+
+      @highlights = _.map @model.get('highlightFrames'), ({origin,size})=>
+        @paper.rect().attr(
+          fill: "#aaff00"
+          opacity: 0.8
+          stroke: "black"
+          transform: @backdropTransformer.push().translate(origin.x,origin.y).descAndPop()
+          x: 0
+          y: 0
+          width: size.width
+          height: size.height
+        )

data/frank-skeleton/frank_static_resources.bundle/js/ersatz_view.js

@@ -0,0 +1,205 @@
+(function() {
+  var ISO_MAJOR_OFFSET, ISO_MINOR_OFFSET, ISO_SKEW,
+    __slice = [].slice;
+
+  ISO_SKEW = 15;
+
+  ISO_MAJOR_OFFSET = 50;
+
+  ISO_MINOR_OFFSET = 5;
+
+  define(['transform_stack', 'ersatz_model'], function(transformStack, ErsatzModel) {
+    var ErsatzView, ErsatzViewSnapshotView, drawStaticBackdropAndReturnTransformer, transformFromBaseForViewModel;
+    drawStaticBackdropAndReturnTransformer = function(paper, resolution, deviceFamily, orientation, isoSkew) {
+      var isiPhone, isiPad, rotation, rotationPoint, transformer;
+      paper.clear();
+      paper.canvas.setAttribute("width", "100%");
+      paper.canvas.setAttribute("height", "100%");
+      isiPhone = 'iphone' === deviceFamily;
+      isiPad = 'ipad' == deviceFamily;
+      if (isiPhone) {
+        width = resolution.width + 60;
+        height = resolution.height + 240;
+        paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
+        rotationPoint = [width / 2, height / 2];
+      } else if (isiPad) {
+        width = resolution.width + 108;
+        height = resolution.height + 176;
+        paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
+        rotationPoint = [width / 2, height / 2];
+      }
+      else
+      {
+        paper.canvas.setAttribute("viewBox", "0 0 " + resolution.width + " " +  resolution.height);
+      }
+      transformer = transformStack();
+      transformer.skew(0, isoSkew).translate(6, 6);
+      rotation = (function() {
+        switch (orientation) {
+          case 'landscape_right':
+            return 90;
+          case 'portrait_upside_down':
+            return 180;
+          case 'landscape_left':
+            return 270;
+          default:
+            return false;
+        }
+      })();
+      if (rotation) {
+        transformer.rotateAroundPoint.apply(transformer, [rotation].concat(__slice.call(rotationPoint)));
+      }
+      if (isiPhone) {
+        width = resolution.width + 40;
+        height = resolution.height + 228;
+        paper.rect(0, 0, width, height, 40).attr({
+          fill: "black",
+          stroke: "gray",
+          "stroke-width": 4
+        }).transform(transformer.desc());
+      } else if (isiPad) {
+        width = resolution.width + 108;
+        height = resolution.height + 86;
+        paper.rect(10, 10, width, height, 20).attr({
+          'fill': 'black',
+          'stroke': 'gray',
+          'stroke-width': 6
+        }).transform(transformer.desc());
+      }
+      if (isiPhone) {
+        x = resolution.width / 2 + 20;
+        y = resolution.height + 175;
+        transformer.push().translate(x, y);
+        paper.circle(0, 0, 34).transform(transformer.desc()).attr("fill", "90-#303030-#101010");
+        paper.rect(0, 0, 22, 22, 5).attr({
+          stroke: "gray",
+          "stroke-width": 2
+        }).transform(transformer.push().translate(-11, -11).descAndPop());
+        transformer.translate(20, 120);
+      } else if (isiPad) {
+        transformer.translate(50, 50);
+      }
+
+      if (isoSkew > 0) {
+        transformer.translate(-ISO_MAJOR_OFFSET, 0);
+      }
+      return transformer;
+    };
+    transformFromBaseForViewModel = function(baseTransformer, viewModel, withSkew) {
+      var x, y, _ref;
+      if (withSkew == null) {
+        withSkew = false;
+      }
+      _ref = viewModel.get('accessibilityFrame').origin, x = _ref.x, y = _ref.y;
+      baseTransformer.push().translate(x, y);
+      if (withSkew) {
+        baseTransformer.translate(viewModel.get('depth') * -ISO_MINOR_OFFSET, 0);
+      }
+      return baseTransformer.descAndPop();
+    };
+    ErsatzViewSnapshotView = Backbone.View.extend({
+      initialize: function() {
+        this.model.on('change:active', _.bind(this.updateOpacity, this));
+        return this.render();
+      },
+      render: function() {
+        var frame;
+        frame = this.model.get('accessibilityFrame');
+        this.el.attr({
+          transform: transformFromBaseForViewModel(this.options.baseTransformer, this.model, true),
+          src: this.model.getSnapshotUrl(),
+          x: 0,
+          y: 0,
+          width: frame.size.width,
+          height: frame.size.height
+        });
+        this.updateOpacity();
+        return this.el;
+      },
+      updateOpacity: function() {
+        var opacity;
+        opacity = (this.model.get('active') ? 1.0 : 0.05);
+        return this.el.attr('opacity', opacity);
+      }
+    });
+    return ErsatzView = Backbone.View.extend({
+      el: $('#ui-locator-view'),
+      initialize: function() {
+        _.bindAll(this, 'render');
+        this.model = new ErsatzModel();
+        this.highlights = [];
+        this.paper = new Raphael(this.el);
+        this.model.on('change:baseScreenshotUrl', _.bind(this.refreshBaseScreenshot, this));
+        this.model.on('change:isAsploded', _.bind(this.render, this));
+        this.model.on('snapshots-refreshed', _.bind(this.refreshSnapshots, this));
+        return this.model.on('change:highlightFrames', _.bind(this.refreshHighlightFrames, this));
+      },
+      render: function() {
+        var isoSkew;
+        this.highlights = [];
+        isoSkew = (this.model.get('isAsploded') ? ISO_SKEW : 0);
+        this.backdropTransformer = drawStaticBackdropAndReturnTransformer(this.paper, this.model.get('resolution'), this.model.get('deviceFamily'), this.model.get('orientation'), isoSkew);
+        this.backdrop = this.paper.image();
+        this.refreshBaseScreenshot();
+        if (this.model.get('isAsploded')) {
+          this.backdrop.attr('opacity', 0.5);
+          this.refreshSnapshots();
+        }
+        return this.el;
+      },
+      screenBounds: function() {
+        resolution = this.model.get('resolution');
+        return {
+          x: 0,
+          y: 0,
+          width: resolution.width,
+          height: resolution.height
+        };
+      },
+      refreshBaseScreenshot: function() {
+        var newScreenshotUrl;
+        newScreenshotUrl = this.model.get('baseScreenshotUrl');
+        if (newScreenshotUrl == null) {
+          return;
+        }
+        return this.backdrop.transform(this.backdropTransformer.desc()).attr(this.screenBounds()).attr('src', newScreenshotUrl).toFront();
+      },
+      refreshSnapshots: function() {
+        var _this = this;
+        return this.model.get('allViews').each(function(viewModel) {
+          var snapshotView;
+          return snapshotView = new ErsatzViewSnapshotView({
+            model: viewModel,
+            baseTransformer: _this.backdropTransformer,
+            el: _this.paper.image()
+          });
+        });
+      },
+      refreshHighlightFrames: function() {
+        var h, _i, _len, _ref,
+          _this = this;
+        _ref = this.highlights;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          h = _ref[_i];
+          h.remove();
+        }
+        this.highlights = [];
+        return this.highlights = _.map(this.model.get('highlightFrames'), function(_arg) {
+          var origin, size;
+          origin = _arg.origin, size = _arg.size;
+          return _this.paper.rect().attr({
+            fill: "#aaff00",
+            opacity: 0.8,
+            stroke: "black",
+            transform: _this.backdropTransformer.push().translate(origin.x, origin.y).descAndPop(),
+            x: 0,
+            y: 0,
+            width: size.width,
+            height: size.height
+          });
+        });
+      }
+    });
+  });
+
+}).call(this);