frank-cucumber 0.9.6 → 0.9.7

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

@@ -0,0 +1,42 @@
+INTERESTING_PROPERTIES = ['class', 'accessibilityLabel', 'tag', 'alpha', 'isHidden']
+IRREGULAR_PROPERTIES = INTERESTING_PROPERTIES.concat( 'parent', 'subviews', 'children' )
+
+renderListItem = ( propertyName, propertyValue, cssClass )->
+  propertyValue ?= 'null'
+
+  if _.isObject( propertyValue )
+    propertyValue = JSON.stringify(propertyValue)
+
+  $("<li>").addClass(cssClass)
+    .append( 
+      $('<div/>').addClass('key').text(propertyName),
+      $('<div/>').addClass('value').text(propertyValue)
+    )
+
+define ->
+  DetailsView = Backbone.View.extend
+    el: $('#dom-detail')
+
+    updateModel: (model)->
+      @model = model
+      @refresh()
+
+    refresh: ->
+      $ul  = $('<ul>')
+
+      for prop in INTERESTING_PROPERTIES
+        if @model.has(prop)
+          val = @model.get(prop)
+          $ul.append( renderListItem( prop, val, 'interesting' ) )
+
+      for prop in _.keys(@model.attributes).sort()
+        continue if _.contains( IRREGULAR_PROPERTIES, prop )
+
+        val = @model.get(prop)
+        $ul.append( renderListItem( prop, val ) )
+
+      @$el.empty().append($ul)
+
+
+
+  DetailsView

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

@@ -0,0 +1,51 @@
+(function() {
+  var INTERESTING_PROPERTIES, IRREGULAR_PROPERTIES, renderListItem;
+
+  INTERESTING_PROPERTIES = ['class', 'accessibilityLabel', 'tag', 'alpha', 'isHidden'];
+
+  IRREGULAR_PROPERTIES = INTERESTING_PROPERTIES.concat('parent', 'subviews', 'children');
+
+  renderListItem = function(propertyName, propertyValue, cssClass) {
+    if (propertyValue == null) {
+      propertyValue = 'null';
+    }
+    if (_.isObject(propertyValue)) {
+      propertyValue = JSON.stringify(propertyValue);
+    }
+    return $("<li>").addClass(cssClass).append($('<div/>').addClass('key').text(propertyName), $('<div/>').addClass('value').text(propertyValue));
+  };
+
+  define(function() {
+    var DetailsView;
+    DetailsView = Backbone.View.extend({
+      el: $('#dom-detail'),
+      updateModel: function(model) {
+        this.model = model;
+        return this.refresh();
+      },
+      refresh: function() {
+        var $ul, prop, val, _i, _j, _len, _len1, _ref;
+        $ul = $('<ul>');
+        for (_i = 0, _len = INTERESTING_PROPERTIES.length; _i < _len; _i++) {
+          prop = INTERESTING_PROPERTIES[_i];
+          if (this.model.has(prop)) {
+            val = this.model.get(prop);
+            $ul.append(renderListItem(prop, val, 'interesting'));
+          }
+        }
+        _ref = _.keys(this.model.attributes).sort();
+        for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
+          prop = _ref[_j];
+          if (_.contains(IRREGULAR_PROPERTIES, prop)) {
+            continue;
+          }
+          val = this.model.get(prop);
+          $ul.append(renderListItem(prop, val));
+        }
+        return this.$el.empty().append($ul);
+      }
+    });
+    return DetailsView;
+  });
+
+}).call(this);

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,59 @@
+(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, deviceFamily, orientation) {
+        this.set('allViews', views);
+        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
+        )