sc-frank-cucumber 1.2.1.00af28c

Sign up to get free protection for your applications and to get access to all the features.
Files changed (136) hide show
  1. data/.gitignore +4 -0
  2. data/Gemfile +4 -0
  3. data/Rakefile +38 -0
  4. data/bin/frank +6 -0
  5. data/bin/frank-skeleton +33 -0
  6. data/frank-skeleton/features/my_first.feature +12 -0
  7. data/frank-skeleton/features/step_definitions/launch_steps.rb +20 -0
  8. data/frank-skeleton/features/support/env.rb +8 -0
  9. data/frank-skeleton/frank_static_resources.bundle/ViewAttributeMapping.plist +63 -0
  10. data/frank-skeleton/frank_static_resources.bundle/ViewAttributeMappingMac.plist +99 -0
  11. data/frank-skeleton/frank_static_resources.bundle/images/ajax-loader.gif +0 -0
  12. data/frank-skeleton/frank_static_resources.bundle/images/file.gif +0 -0
  13. data/frank-skeleton/frank_static_resources.bundle/images/folder-closed.gif +0 -0
  14. data/frank-skeleton/frank_static_resources.bundle/images/folder.gif +0 -0
  15. data/frank-skeleton/frank_static_resources.bundle/images/loader.gif +0 -0
  16. data/frank-skeleton/frank_static_resources.bundle/images/loader.png +0 -0
  17. data/frank-skeleton/frank_static_resources.bundle/images/minus.gif +0 -0
  18. data/frank-skeleton/frank_static_resources.bundle/images/plus.gif +0 -0
  19. data/frank-skeleton/frank_static_resources.bundle/images/treeview-black-line.gif +0 -0
  20. data/frank-skeleton/frank_static_resources.bundle/images/treeview-black.gif +0 -0
  21. data/frank-skeleton/frank_static_resources.bundle/images/treeview-default-line.gif +0 -0
  22. data/frank-skeleton/frank_static_resources.bundle/images/treeview-default.gif +0 -0
  23. data/frank-skeleton/frank_static_resources.bundle/images/treeview-famfamfam-line.gif +0 -0
  24. data/frank-skeleton/frank_static_resources.bundle/images/treeview-famfamfam.gif +0 -0
  25. data/frank-skeleton/frank_static_resources.bundle/images/treeview-gray-line.gif +0 -0
  26. data/frank-skeleton/frank_static_resources.bundle/images/treeview-gray.gif +0 -0
  27. data/frank-skeleton/frank_static_resources.bundle/images/treeview-red-line.gif +0 -0
  28. data/frank-skeleton/frank_static_resources.bundle/images/treeview-red.gif +0 -0
  29. data/frank-skeleton/frank_static_resources.bundle/index.html +86 -0
  30. data/frank-skeleton/frank_static_resources.bundle/index.html.haml +76 -0
  31. data/frank-skeleton/frank_static_resources.bundle/js/accessible_views_view.coffee +41 -0
  32. data/frank-skeleton/frank_static_resources.bundle/js/accessible_views_view.js +46 -0
  33. data/frank-skeleton/frank_static_resources.bundle/js/controller.coffee +134 -0
  34. data/frank-skeleton/frank_static_resources.bundle/js/controller.js +139 -0
  35. data/frank-skeleton/frank_static_resources.bundle/js/details_view.coffee +42 -0
  36. data/frank-skeleton/frank_static_resources.bundle/js/details_view.js +51 -0
  37. data/frank-skeleton/frank_static_resources.bundle/js/dropdown_control.coffee +64 -0
  38. data/frank-skeleton/frank_static_resources.bundle/js/dropdown_control.js +73 -0
  39. data/frank-skeleton/frank_static_resources.bundle/js/ersatz_model.coffee +46 -0
  40. data/frank-skeleton/frank_static_resources.bundle/js/ersatz_model.js +60 -0
  41. data/frank-skeleton/frank_static_resources.bundle/js/ersatz_view.coffee +167 -0
  42. data/frank-skeleton/frank_static_resources.bundle/js/ersatz_view.js +205 -0
  43. data/frank-skeleton/frank_static_resources.bundle/js/experiment_bar_model.coffee +10 -0
  44. data/frank-skeleton/frank_static_resources.bundle/js/experiment_bar_model.js +17 -0
  45. data/frank-skeleton/frank_static_resources.bundle/js/experiment_bar_view.coffee +44 -0
  46. data/frank-skeleton/frank_static_resources.bundle/js/experiment_bar_view.js +63 -0
  47. data/frank-skeleton/frank_static_resources.bundle/js/frank.coffee +96 -0
  48. data/frank-skeleton/frank_static_resources.bundle/js/frank.js +146 -0
  49. data/frank-skeleton/frank_static_resources.bundle/js/lib/backbone.js +1431 -0
  50. data/frank-skeleton/frank_static_resources.bundle/js/lib/coffee-script.js +8 -0
  51. data/frank-skeleton/frank_static_resources.bundle/js/lib/jquery-ui.min.js +405 -0
  52. data/frank-skeleton/frank_static_resources.bundle/js/lib/jquery.min.js +4 -0
  53. data/frank-skeleton/frank_static_resources.bundle/js/lib/jquery.treeview.js +251 -0
  54. data/frank-skeleton/frank_static_resources.bundle/js/lib/json2.js +481 -0
  55. data/frank-skeleton/frank_static_resources.bundle/js/lib/raphael.js +5815 -0
  56. data/frank-skeleton/frank_static_resources.bundle/js/lib/require.js +2053 -0
  57. data/frank-skeleton/frank_static_resources.bundle/js/lib/underscore.js +1059 -0
  58. data/frank-skeleton/frank_static_resources.bundle/js/main.coffee +27 -0
  59. data/frank-skeleton/frank_static_resources.bundle/js/main.js +29 -0
  60. data/frank-skeleton/frank_static_resources.bundle/js/tabs_controller.coffee +13 -0
  61. data/frank-skeleton/frank_static_resources.bundle/js/tabs_controller.js +22 -0
  62. data/frank-skeleton/frank_static_resources.bundle/js/toast_controller.coffee +15 -0
  63. data/frank-skeleton/frank_static_resources.bundle/js/toast_controller.js +28 -0
  64. data/frank-skeleton/frank_static_resources.bundle/js/transform_stack.coffee +59 -0
  65. data/frank-skeleton/frank_static_resources.bundle/js/transform_stack.js +78 -0
  66. data/frank-skeleton/frank_static_resources.bundle/js/tree_view.coffee +53 -0
  67. data/frank-skeleton/frank_static_resources.bundle/js/tree_view.js +64 -0
  68. data/frank-skeleton/frank_static_resources.bundle/js/view_hier_model.coffee +37 -0
  69. data/frank-skeleton/frank_static_resources.bundle/js/view_hier_model.js +48 -0
  70. data/frank-skeleton/frank_static_resources.bundle/js/view_model.coffee +39 -0
  71. data/frank-skeleton/frank_static_resources.bundle/js/view_model.js +62 -0
  72. data/frank-skeleton/frank_static_resources.bundle/pictos/index.html +329 -0
  73. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos-web.eot +0 -0
  74. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos-web.svg +114 -0
  75. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos-web.ttf +0 -0
  76. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos-web.woff +0 -0
  77. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos.css +20 -0
  78. data/frank-skeleton/frank_static_resources.bundle/pictos/pictos_base64.css +18 -0
  79. data/frank-skeleton/frank_static_resources.bundle/stylesheets/css/symbiote.css +1 -0
  80. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_elements.scss +28 -0
  81. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_header.scss +61 -0
  82. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_inspect_tabs_list_tabs.scss +194 -0
  83. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_jquery.treeview.scss +68 -0
  84. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_jqui.scss +2 -0
  85. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_layout.scss +13 -0
  86. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_mixins.sass +137 -0
  87. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_reset.scss +32 -0
  88. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_selector_test_toolbar.scss +81 -0
  89. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_solarized.scss +16 -0
  90. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_typography.scss +11 -0
  91. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_unicode.scss +3 -0
  92. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_z_index.scss +2 -0
  93. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/symbiote.scss +26 -0
  94. data/frank-skeleton/frankify.xcconfig.tt +6 -0
  95. data/frank-skeleton/libCocoaAsyncSocket.a +0 -0
  96. data/frank-skeleton/libCocoaAsyncSocketMac.a +0 -0
  97. data/frank-skeleton/libCocoaHTTPServer.a +0 -0
  98. data/frank-skeleton/libCocoaHTTPServerMac.a +0 -0
  99. data/frank-skeleton/libCocoaLumberjack.a +0 -0
  100. data/frank-skeleton/libCocoaLumberjackMac.a +0 -0
  101. data/frank-skeleton/libFrank.a +0 -0
  102. data/frank-skeleton/libFrankMac.a +0 -0
  103. data/frank-skeleton/libShelley.a +0 -0
  104. data/frank-skeleton/libShelleyMac.a +0 -0
  105. data/frank-skeleton/plugins/.empty_directory +0 -0
  106. data/lib/frank-cucumber.rb +15 -0
  107. data/lib/frank-cucumber/app_bundle_locator.rb +58 -0
  108. data/lib/frank-cucumber/bonjour.rb +73 -0
  109. data/lib/frank-cucumber/cli.rb +299 -0
  110. data/lib/frank-cucumber/color_helper.rb +13 -0
  111. data/lib/frank-cucumber/console.rb +28 -0
  112. data/lib/frank-cucumber/core_frank_steps.rb +260 -0
  113. data/lib/frank-cucumber/frank.xcconfig.erb +17 -0
  114. data/lib/frank-cucumber/frank_helper.rb +459 -0
  115. data/lib/frank-cucumber/frank_localize.rb +43 -0
  116. data/lib/frank-cucumber/frank_mac_helper.rb +120 -0
  117. data/lib/frank-cucumber/frankifier.rb +150 -0
  118. data/lib/frank-cucumber/gateway.rb +135 -0
  119. data/lib/frank-cucumber/gesture_helper.rb +99 -0
  120. data/lib/frank-cucumber/host_scripting.rb +96 -0
  121. data/lib/frank-cucumber/keyboard_helper.rb +69 -0
  122. data/lib/frank-cucumber/launcher.rb +70 -0
  123. data/lib/frank-cucumber/localize.yml +104 -0
  124. data/lib/frank-cucumber/location_helper.rb +20 -0
  125. data/lib/frank-cucumber/mac_launcher.rb +35 -0
  126. data/lib/frank-cucumber/plugins/plugin.rb +57 -0
  127. data/lib/frank-cucumber/rect.rb +26 -0
  128. data/lib/frank-cucumber/scroll_helper.rb +24 -0
  129. data/lib/frank-cucumber/version.rb +5 -0
  130. data/lib/frank-cucumber/wait_helper.rb +57 -0
  131. data/sc-frank-cucumber.gemspec +37 -0
  132. data/test/keyboard_helper_test.rb +84 -0
  133. data/test/launcher_test.rb +57 -0
  134. data/test/rect_test.rb +25 -0
  135. data/test/test_helper.rb +16 -0
  136. metadata +395 -0
@@ -0,0 +1,64 @@
1
+ define ->
2
+
3
+ DropdownModel = Backbone.Model.extend
4
+ select: ->
5
+ @collection.each (model) =>
6
+ model.set( 'selected', model == @ )
7
+ @trigger('option-clicked',@)
8
+
9
+ DropdownCollection = Backbone.Collection.extend
10
+ model: DropdownModel
11
+
12
+ DropdownView = Backbone.View.extend
13
+ tagName: 'div'
14
+ className: 'dropdown'
15
+
16
+ events:
17
+ "click .drop-indicator": 'clickedDrop'
18
+ "click .button": 'clickedItem'
19
+
20
+ initialize: ->
21
+ @collection = new DropdownCollection()
22
+ @collection.on 'all', _.bind(@render,@)
23
+
24
+ # hackery :(
25
+ $('body').on 'click', _.bind(@clickedOutsideDropdown,@)
26
+
27
+ selectedModel: ->
28
+ selected = @collection.find (m)-> m.get('selected')
29
+ selected || @collection.at(0)
30
+ unselectedModels: ->
31
+ _(@collection.reject (m)-> m.get('selected'))
32
+
33
+ createButtonFor: (model)->
34
+ $("""<button>#{model.get('text')}</button>""")
35
+ .on 'click', => @clickedItem(model)
36
+
37
+ render: ->
38
+ @$el
39
+ .empty()
40
+ .append( @createButtonFor(@selectedModel()) )
41
+ .append( $ul = $("<ul>") )
42
+
43
+ @unselectedModels().each (model)=>
44
+ $ul.append( @createButtonFor(model) )
45
+
46
+ @$el.append( """<div class="drop-indicator">v</div>""" )
47
+
48
+ clickedDrop: (e)->
49
+ e.stopPropagation() #prevent clickedOutsideDropdown from firing
50
+ @$('ul').toggleClass('shown')
51
+
52
+ clickedOutsideDropdown: ->
53
+ @$('ul').removeClass('shown')
54
+
55
+ clickedItem: (model)->
56
+ model.select()
57
+
58
+
59
+
60
+
61
+ {
62
+ DropdownModel : DropdownModel
63
+ DropdownView : DropdownView
64
+ }
@@ -0,0 +1,73 @@
1
+ (function() {
2
+
3
+ define(function() {
4
+ var DropdownCollection, DropdownModel, DropdownView;
5
+ DropdownModel = Backbone.Model.extend({
6
+ select: function() {
7
+ var _this = this;
8
+ this.collection.each(function(model) {
9
+ return model.set('selected', model === _this);
10
+ });
11
+ return this.trigger('option-clicked', this);
12
+ }
13
+ });
14
+ DropdownCollection = Backbone.Collection.extend({
15
+ model: DropdownModel
16
+ });
17
+ DropdownView = Backbone.View.extend({
18
+ tagName: 'div',
19
+ className: 'dropdown',
20
+ events: {
21
+ "click .drop-indicator": 'clickedDrop',
22
+ "click .button": 'clickedItem'
23
+ },
24
+ initialize: function() {
25
+ this.collection = new DropdownCollection();
26
+ this.collection.on('all', _.bind(this.render, this));
27
+ return $('body').on('click', _.bind(this.clickedOutsideDropdown, this));
28
+ },
29
+ selectedModel: function() {
30
+ var selected;
31
+ selected = this.collection.find(function(m) {
32
+ return m.get('selected');
33
+ });
34
+ return selected || this.collection.at(0);
35
+ },
36
+ unselectedModels: function() {
37
+ return _(this.collection.reject(function(m) {
38
+ return m.get('selected');
39
+ }));
40
+ },
41
+ createButtonFor: function(model) {
42
+ var _this = this;
43
+ return $("<button>" + (model.get('text')) + "</button>").on('click', function() {
44
+ return _this.clickedItem(model);
45
+ });
46
+ },
47
+ render: function() {
48
+ var $ul,
49
+ _this = this;
50
+ this.$el.empty().append(this.createButtonFor(this.selectedModel())).append($ul = $("<ul>"));
51
+ this.unselectedModels().each(function(model) {
52
+ return $ul.append(_this.createButtonFor(model));
53
+ });
54
+ return this.$el.append("<div class=\"drop-indicator\">v</div>");
55
+ },
56
+ clickedDrop: function(e) {
57
+ e.stopPropagation();
58
+ return this.$('ul').toggleClass('shown');
59
+ },
60
+ clickedOutsideDropdown: function() {
61
+ return this.$('ul').removeClass('shown');
62
+ },
63
+ clickedItem: function(model) {
64
+ return model.select();
65
+ }
66
+ });
67
+ return {
68
+ DropdownModel: DropdownModel,
69
+ DropdownView: DropdownView
70
+ };
71
+ });
72
+
73
+ }).call(this);
@@ -0,0 +1,46 @@
1
+ define ["frank"], (frank)->
2
+
3
+ ErsatzModel = Backbone.Model.extend
4
+ default:
5
+ highlightFrames = []
6
+
7
+ initialize: ->
8
+ @refreshBaseScreenshot()
9
+
10
+ highlightSomeFramesForABit: (frames)->
11
+ @set('highlightFrames',frames)
12
+ @temporaryHighlightTimeout = window.setTimeout( =>
13
+ @set('highlightFrames',[])
14
+ @temporaryHighlightTimeout = undefined
15
+ , 1500 )
16
+
17
+ resetViews: (views,deviceFamily,orientation)->
18
+ @set('allViews',views)
19
+ @set('deviceFamily',deviceFamily)
20
+ @set('orientation',orientation)
21
+ @set('highlightFrames',[])
22
+ @configureAllViews(views)
23
+
24
+ refreshBaseScreenshot: ->
25
+ @set('baseScreenshotUrl',frank.baseScreenshotUrl())
26
+
27
+ toggleAsploded: ->
28
+ isAsploded = !(@get('isAsploded'))
29
+ @set('isAsploded',isAsploded)
30
+ if isAsploded
31
+ @updateAsplodedViews()
32
+
33
+ isAsploded
34
+
35
+ updateAsplodedViews: ()->
36
+ frank.requestSnapshotRefresh().done =>
37
+ @trigger('snapshots-refreshed',@)
38
+
39
+ configureAllViews: (allViews)->
40
+ allViews.on 'change:active', (subject,isActive)=>
41
+ window.clearTimeout(@temporaryHighlightTimeout) if @temporaryHighlightTimeout?
42
+
43
+ if isActive && !@get('isAsploded')
44
+ @set('highlightFrames',[subject.get('accessibilityFrame')])
45
+ else
46
+ @set('highlightFrames',[])
@@ -0,0 +1,60 @@
1
+ (function() {
2
+
3
+ define(["frank"], function(frank) {
4
+ var ErsatzModel, highlightFrames;
5
+ return ErsatzModel = Backbone.Model.extend({
6
+ "default": highlightFrames = [],
7
+ initialize: function() {
8
+ return this.refreshBaseScreenshot();
9
+ },
10
+ highlightSomeFramesForABit: function(frames) {
11
+ var _this = this;
12
+ this.set('highlightFrames', frames);
13
+ return this.temporaryHighlightTimeout = window.setTimeout(function() {
14
+ _this.set('highlightFrames', []);
15
+ return _this.temporaryHighlightTimeout = void 0;
16
+ }, 1500);
17
+ },
18
+ resetViews: function(views, resolution, deviceFamily, orientation) {
19
+ this.set('allViews', views);
20
+ this.set('resolution', resolution);
21
+ this.set('deviceFamily', deviceFamily);
22
+ this.set('orientation', orientation);
23
+ this.set('highlightFrames', []);
24
+ return this.configureAllViews(views);
25
+ },
26
+ refreshBaseScreenshot: function() {
27
+ return this.set('baseScreenshotUrl', frank.baseScreenshotUrl());
28
+ },
29
+ toggleAsploded: function() {
30
+ var isAsploded;
31
+ isAsploded = !(this.get('isAsploded'));
32
+ this.set('isAsploded', isAsploded);
33
+ if (isAsploded) {
34
+ this.updateAsplodedViews();
35
+ }
36
+ return isAsploded;
37
+ },
38
+ updateAsplodedViews: function() {
39
+ var _this = this;
40
+ return frank.requestSnapshotRefresh().done(function() {
41
+ return _this.trigger('snapshots-refreshed', _this);
42
+ });
43
+ },
44
+ configureAllViews: function(allViews) {
45
+ var _this = this;
46
+ return allViews.on('change:active', function(subject, isActive) {
47
+ if (_this.temporaryHighlightTimeout != null) {
48
+ window.clearTimeout(_this.temporaryHighlightTimeout);
49
+ }
50
+ if (isActive && !_this.get('isAsploded')) {
51
+ return _this.set('highlightFrames', [subject.get('accessibilityFrame')]);
52
+ } else {
53
+ return _this.set('highlightFrames', []);
54
+ }
55
+ });
56
+ }
57
+ });
58
+ });
59
+
60
+ }).call(this);
@@ -0,0 +1,167 @@
1
+ ISO_SKEW = 15
2
+ ISO_MAJOR_OFFSET = 50
3
+ ISO_MINOR_OFFSET = 5
4
+ SCREEN_BOUNDS = {
5
+ iphone: { x: 0, y: 0, width: 320, height: 480 }
6
+ ipad: { x: 0, y: 0, width: 768, height: 1024 }
7
+ }
8
+ #SCREENSHOT_URL = symbiote.baseUrlFor( "screenshot" )
9
+
10
+ define ['transform_stack','ersatz_model'], (transformStack,ErsatzModel)->
11
+
12
+ drawStaticBackdropAndReturnTransformer = (paper,deviceFamily,orientation,isoSkew) ->
13
+ paper.clear()
14
+ paper.canvas.setAttribute "width", "100%"
15
+ paper.canvas.setAttribute "height", "100%"
16
+
17
+ isiPhone = ('iphone' == deviceFamily)
18
+
19
+ if isiPhone
20
+ paper.canvas.setAttribute "viewBox", "0 0 380 720"
21
+ rotationPoint = [190,360]
22
+ else
23
+ paper.canvas.setAttribute "viewBox", "0 0 875 1200"
24
+ rotationPoint = [437,600]
25
+
26
+ transformer = transformStack()
27
+
28
+ transformer.skew(0, isoSkew).translate( 6, 6 )
29
+
30
+
31
+ rotation = switch orientation
32
+ when 'landscape_right' then 90
33
+ when 'portrait_upside_down' then 180
34
+ when 'landscape_left' then 270
35
+ else false
36
+
37
+ if rotation
38
+ transformer.rotateAroundPoint(rotation,rotationPoint...)
39
+
40
+ # main outline of device
41
+ if isiPhone
42
+ paper.rect(0, 0, 360, 708, 40).attr(
43
+ fill: "black"
44
+ stroke: "gray"
45
+ "stroke-width": 4
46
+ ).transform transformer.desc()
47
+ else
48
+ paper.rect( 10, 10, 855, 1110, 20 ).attr(
49
+ 'fill': 'black',
50
+ 'stroke': 'gray',
51
+ 'stroke-width': 6
52
+ ).transform transformer.desc()
53
+
54
+
55
+ if isiPhone
56
+ # home button
57
+ transformer.push().translate( 180, 655 )
58
+ paper.circle(0, 0, 34).transform(transformer.desc()).attr( "fill", "90-#303030-#101010" )
59
+
60
+ # square inside home button
61
+ paper.rect(0, 0, 22, 22, 5).attr(
62
+ stroke: "gray"
63
+ "stroke-width": 2
64
+ ).transform transformer.push().translate(-11, -11).descAndPop()
65
+
66
+ transformer.translate(20, 120)
67
+
68
+ else
69
+ transformer.translate(50,50)
70
+
71
+ if( isoSkew > 0 )
72
+ transformer.translate(-ISO_MAJOR_OFFSET, 0)
73
+ transformer
74
+
75
+
76
+ transformFromBaseForViewModel = (baseTransformer,viewModel,withSkew=false)->
77
+ {origin:{x,y}} = viewModel.get('accessibilityFrame')
78
+ baseTransformer.push().translate(x,y)
79
+ if( withSkew )
80
+ baseTransformer.translate(viewModel.get('depth')*-ISO_MINOR_OFFSET, 0)
81
+ baseTransformer.descAndPop()
82
+
83
+ ErsatzViewSnapshotView = Backbone.View.extend
84
+ initialize:->
85
+ @model.on('change:active',_.bind(@updateOpacity,@))
86
+ @render()
87
+
88
+ render: ->
89
+ frame = @model.get('accessibilityFrame')
90
+ @el
91
+ .attr
92
+ transform: transformFromBaseForViewModel( @options.baseTransformer, @model,true )
93
+ src: @model.getSnapshotUrl()
94
+ x: 0
95
+ y: 0
96
+ width: frame.size.width
97
+ height: frame.size.height
98
+ @updateOpacity()
99
+ @el
100
+
101
+ updateOpacity: ->
102
+ opacity = ( if @model.get('active') then 1.0 else 0.05 )
103
+ @el.attr('opacity',opacity)
104
+
105
+
106
+ ErsatzView = Backbone.View.extend
107
+ el: $('#ui-locator-view')
108
+
109
+ initialize: ->
110
+ _.bindAll( @, 'render' )
111
+ @model = new ErsatzModel()
112
+ @highlights = []
113
+ @paper = new Raphael(@.el)
114
+ @model.on 'change:baseScreenshotUrl', _.bind(@refreshBaseScreenshot,@)
115
+ @model.on 'change:isAsploded', _.bind(@render,@)
116
+ @model.on 'snapshots-refreshed', _.bind(@refreshSnapshots,@)
117
+ @model.on 'change:highlightFrames', _.bind(@refreshHighlightFrames,@)
118
+
119
+ render: ->
120
+ @highlights = []
121
+
122
+ isoSkew = (if @model.get('isAsploded') then ISO_SKEW else 0)
123
+ @backdropTransformer = drawStaticBackdropAndReturnTransformer(@paper,@model.get('deviceFamily'),@model.get('orientation'),isoSkew)
124
+ @backdrop = @paper.image()
125
+ @refreshBaseScreenshot()
126
+ if @model.get('isAsploded')
127
+ @backdrop.attr('opacity',0.5)
128
+ @refreshSnapshots()
129
+
130
+ @el
131
+
132
+ screenBounds: -> SCREEN_BOUNDS[@model.get('deviceFamily')]
133
+
134
+
135
+ refreshBaseScreenshot: ->
136
+ newScreenshotUrl = @model.get('baseScreenshotUrl')
137
+ return unless newScreenshotUrl?
138
+
139
+ @backdrop
140
+ .transform(@backdropTransformer.desc())
141
+ .attr( @screenBounds() )
142
+ .attr( 'src', newScreenshotUrl )
143
+ .toFront()
144
+
145
+ refreshSnapshots: ->
146
+ @model.get('allViews').each (viewModel) =>
147
+ snapshotView = new ErsatzViewSnapshotView(
148
+ model: viewModel
149
+ baseTransformer: @backdropTransformer
150
+ el: @paper.image()
151
+ )
152
+
153
+ refreshHighlightFrames: ->
154
+ h.remove() for h in @highlights
155
+ @highlights = []
156
+
157
+ @highlights = _.map @model.get('highlightFrames'), ({origin,size})=>
158
+ @paper.rect().attr(
159
+ fill: "#aaff00"
160
+ opacity: 0.8
161
+ stroke: "black"
162
+ transform: @backdropTransformer.push().translate(origin.x,origin.y).descAndPop()
163
+ x: 0
164
+ y: 0
165
+ width: size.width
166
+ height: size.height
167
+ )
@@ -0,0 +1,205 @@
1
+ (function() {
2
+ var ISO_MAJOR_OFFSET, ISO_MINOR_OFFSET, ISO_SKEW,
3
+ __slice = [].slice;
4
+
5
+ ISO_SKEW = 15;
6
+
7
+ ISO_MAJOR_OFFSET = 50;
8
+
9
+ ISO_MINOR_OFFSET = 5;
10
+
11
+ define(['transform_stack', 'ersatz_model'], function(transformStack, ErsatzModel) {
12
+ var ErsatzView, ErsatzViewSnapshotView, drawStaticBackdropAndReturnTransformer, transformFromBaseForViewModel;
13
+ drawStaticBackdropAndReturnTransformer = function(paper, resolution, deviceFamily, orientation, isoSkew) {
14
+ var isiPhone, isiPad, rotation, rotationPoint, transformer;
15
+ paper.clear();
16
+ paper.canvas.setAttribute("width", "100%");
17
+ paper.canvas.setAttribute("height", "100%");
18
+ isiPhone = 'iphone' === deviceFamily;
19
+ isiPad = 'ipad' == deviceFamily;
20
+ if (isiPhone) {
21
+ width = resolution.width + 60;
22
+ height = resolution.height + 240;
23
+ paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
24
+ rotationPoint = [width / 2, height / 2];
25
+ } else if (isiPad) {
26
+ width = resolution.width + 108;
27
+ height = resolution.height + 176;
28
+ paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
29
+ rotationPoint = [width / 2, height / 2];
30
+ }
31
+ else
32
+ {
33
+ paper.canvas.setAttribute("viewBox", "0 0 " + resolution.width + " " + resolution.height);
34
+ }
35
+ transformer = transformStack();
36
+ transformer.skew(0, isoSkew).translate(6, 6);
37
+ rotation = (function() {
38
+ switch (orientation) {
39
+ case 'landscape_right':
40
+ return 90;
41
+ case 'portrait_upside_down':
42
+ return 180;
43
+ case 'landscape_left':
44
+ return 270;
45
+ default:
46
+ return false;
47
+ }
48
+ })();
49
+ if (rotation) {
50
+ transformer.rotateAroundPoint.apply(transformer, [rotation].concat(__slice.call(rotationPoint)));
51
+ }
52
+ if (isiPhone) {
53
+ width = resolution.width + 40;
54
+ height = resolution.height + 228;
55
+ paper.rect(0, 0, width, height, 40).attr({
56
+ fill: "black",
57
+ stroke: "gray",
58
+ "stroke-width": 4
59
+ }).transform(transformer.desc());
60
+ } else if (isiPad) {
61
+ width = resolution.width + 108;
62
+ height = resolution.height + 86;
63
+ paper.rect(10, 10, width, height, 20).attr({
64
+ 'fill': 'black',
65
+ 'stroke': 'gray',
66
+ 'stroke-width': 6
67
+ }).transform(transformer.desc());
68
+ }
69
+ if (isiPhone) {
70
+ x = resolution.width / 2 + 20;
71
+ y = resolution.height + 175;
72
+ transformer.push().translate(x, y);
73
+ paper.circle(0, 0, 34).transform(transformer.desc()).attr("fill", "90-#303030-#101010");
74
+ paper.rect(0, 0, 22, 22, 5).attr({
75
+ stroke: "gray",
76
+ "stroke-width": 2
77
+ }).transform(transformer.push().translate(-11, -11).descAndPop());
78
+ transformer.translate(20, 120);
79
+ } else if (isiPad) {
80
+ transformer.translate(50, 50);
81
+ }
82
+
83
+ if (isoSkew > 0) {
84
+ transformer.translate(-ISO_MAJOR_OFFSET, 0);
85
+ }
86
+ return transformer;
87
+ };
88
+ transformFromBaseForViewModel = function(baseTransformer, viewModel, withSkew) {
89
+ var x, y, _ref;
90
+ if (withSkew == null) {
91
+ withSkew = false;
92
+ }
93
+ _ref = viewModel.get('accessibilityFrame').origin, x = _ref.x, y = _ref.y;
94
+ baseTransformer.push().translate(x, y);
95
+ if (withSkew) {
96
+ baseTransformer.translate(viewModel.get('depth') * -ISO_MINOR_OFFSET, 0);
97
+ }
98
+ return baseTransformer.descAndPop();
99
+ };
100
+ ErsatzViewSnapshotView = Backbone.View.extend({
101
+ initialize: function() {
102
+ this.model.on('change:active', _.bind(this.updateOpacity, this));
103
+ return this.render();
104
+ },
105
+ render: function() {
106
+ var frame;
107
+ frame = this.model.get('accessibilityFrame');
108
+ this.el.attr({
109
+ transform: transformFromBaseForViewModel(this.options.baseTransformer, this.model, true),
110
+ src: this.model.getSnapshotUrl(),
111
+ x: 0,
112
+ y: 0,
113
+ width: frame.size.width,
114
+ height: frame.size.height
115
+ });
116
+ this.updateOpacity();
117
+ return this.el;
118
+ },
119
+ updateOpacity: function() {
120
+ var opacity;
121
+ opacity = (this.model.get('active') ? 1.0 : 0.05);
122
+ return this.el.attr('opacity', opacity);
123
+ }
124
+ });
125
+ return ErsatzView = Backbone.View.extend({
126
+ el: $('#ui-locator-view'),
127
+ initialize: function() {
128
+ _.bindAll(this, 'render');
129
+ this.model = new ErsatzModel();
130
+ this.highlights = [];
131
+ this.paper = new Raphael(this.el);
132
+ this.model.on('change:baseScreenshotUrl', _.bind(this.refreshBaseScreenshot, this));
133
+ this.model.on('change:isAsploded', _.bind(this.render, this));
134
+ this.model.on('snapshots-refreshed', _.bind(this.refreshSnapshots, this));
135
+ return this.model.on('change:highlightFrames', _.bind(this.refreshHighlightFrames, this));
136
+ },
137
+ render: function() {
138
+ var isoSkew;
139
+ this.highlights = [];
140
+ isoSkew = (this.model.get('isAsploded') ? ISO_SKEW : 0);
141
+ this.backdropTransformer = drawStaticBackdropAndReturnTransformer(this.paper, this.model.get('resolution'), this.model.get('deviceFamily'), this.model.get('orientation'), isoSkew);
142
+ this.backdrop = this.paper.image();
143
+ this.refreshBaseScreenshot();
144
+ if (this.model.get('isAsploded')) {
145
+ this.backdrop.attr('opacity', 0.5);
146
+ this.refreshSnapshots();
147
+ }
148
+ return this.el;
149
+ },
150
+ screenBounds: function() {
151
+ resolution = this.model.get('resolution');
152
+ return {
153
+ x: 0,
154
+ y: 0,
155
+ width: resolution.width,
156
+ height: resolution.height
157
+ };
158
+ },
159
+ refreshBaseScreenshot: function() {
160
+ var newScreenshotUrl;
161
+ newScreenshotUrl = this.model.get('baseScreenshotUrl');
162
+ if (newScreenshotUrl == null) {
163
+ return;
164
+ }
165
+ return this.backdrop.transform(this.backdropTransformer.desc()).attr(this.screenBounds()).attr('src', newScreenshotUrl).toFront();
166
+ },
167
+ refreshSnapshots: function() {
168
+ var _this = this;
169
+ return this.model.get('allViews').each(function(viewModel) {
170
+ var snapshotView;
171
+ return snapshotView = new ErsatzViewSnapshotView({
172
+ model: viewModel,
173
+ baseTransformer: _this.backdropTransformer,
174
+ el: _this.paper.image()
175
+ });
176
+ });
177
+ },
178
+ refreshHighlightFrames: function() {
179
+ var h, _i, _len, _ref,
180
+ _this = this;
181
+ _ref = this.highlights;
182
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
183
+ h = _ref[_i];
184
+ h.remove();
185
+ }
186
+ this.highlights = [];
187
+ return this.highlights = _.map(this.model.get('highlightFrames'), function(_arg) {
188
+ var origin, size;
189
+ origin = _arg.origin, size = _arg.size;
190
+ return _this.paper.rect().attr({
191
+ fill: "#aaff00",
192
+ opacity: 0.8,
193
+ stroke: "black",
194
+ transform: _this.backdropTransformer.push().translate(origin.x, origin.y).descAndPop(),
195
+ x: 0,
196
+ y: 0,
197
+ width: size.width,
198
+ height: size.height
199
+ });
200
+ });
201
+ }
202
+ });
203
+ });
204
+
205
+ }).call(this);