1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
define [
'backbone.marionette',
'design/info-view',
'templates/design'
], (
Marionette,
InfoView
Templates
) ->
$ = jQuery
API_DEPENDECIES = "#{baseUrl}/api/dependencies"
class extends Marionette.Layout
template: Templates['design']
className: 'dsm'
regions:
infoRegion: '.dsm-info'
ui:
titles: '.dsm-body-title'
cells: '.dsm-body-cell'
dependencies: '.dsm-body-dependency'
events:
'click @ui.titles': 'highlightComponent'
'dblclick @ui.titles': 'goToComponent'
'click @ui.cells': 'highlightCell'
'dblclick @ui.dependencies': 'showDependencies'
clearCells: ->
@ui.titles.removeClass 'dsm-body-highlighted dsm-body-usage dsm-body-dependency'
@ui.cells.removeClass 'dsm-body-highlighted dsm-body-usage dsm-body-dependency'
highlightComponent: (e) ->
index = @ui.titles.index $(e.currentTarget)
@clearCells()
@highlightRow index
@highlightColumn index
@highlightUsages index
@highlightDependencies index
highlightCell: (e) ->
cell = $(e.currentTarget)
column = cell.parent().children().index(cell) - 1
row = cell.parent().parent().children().index cell.parent()
@clearCells()
if row == column
@highlightRow row
@highlightColumn row
@highlightUsages row
@highlightDependencies row
else
@highlightRow column, 'dsm-body-usage'
@highlightColumn column, 'dsm-body-usage'
@highlightRow row, 'dsm-body-dependency'
@highlightColumn row, 'dsm-body-dependency'
highlightRow: (index, c = 'dsm-body-highlighted') ->
@$(".dsm-body tr:eq(#{index}) td").addClass c
highlightColumn: (index, c = 'dsm-body-highlighted') ->
@$(".dsm-body tr").each ->
$(this).find("td:eq(#{index + 1})").addClass c
highlightUsages: (index) ->
@collection.at(index).get('v').forEach (d, i) =>
if i < index && d.w?
@$("tr:eq(#{i}) .dsm-body-title").addClass 'dsm-body-usage'
highlightDependencies: (index) ->
@collection.forEach (model, i) =>
if model.get('v')[index].w?
@$("tr:eq(#{i}) .dsm-body-title").addClass 'dsm-body-dependency'
goToComponent: (e) ->
cell = $(e.currentTarget)
row = cell.parent().parent().children().index cell.parent()
model = @collection.at(row)
page = if model.get('q') == 'CLA' || model.get('q') == 'FIL' then 'dashboard' else 'design'
window.location = "#{baseUrl}/#{page}/index/#{model.get 'i'}"
showDependencies: (e) ->
cell = $(e.currentTarget)
column = cell.parent().children().index(cell) - 1
row = cell.parent().parent().children().index cell.parent()
id = @collection.at(row).get('v')[column].i
return unless id
@showInfoViewSpinner()
@scrollToInfoView()
$.get API_DEPENDECIES, parent: id, (data) =>
@infoRegion.show new InfoView
collection: new Backbone.Collection data
first: @collection.at(column).toJSON()
second: @collection.at(row).toJSON()
@scrollToInfoView()
showInfoViewSpinner: ->
@infoRegion.reset()
@$(@infoRegion.el).html '<i class="spinner"></i>'
scrollToInfoView: ->
delta = @$(@infoRegion.el).offset().top - 40
$('html, body').animate { scrollTop: delta }, 500
|
