|
1
|
|
|
Mivhak.component('top-bar', { |
|
2
|
|
|
template: '<div class="mivhak-top-bar"><div class="mivhak-nav-tabs"></div><div class="mivhak-controls"></div><div class="mivhak-line"></div></div>', |
|
3
|
|
|
props: { |
|
4
|
|
|
mivhakInstance: null, |
|
5
|
|
|
navTabs: [], |
|
6
|
|
|
controls: [], |
|
7
|
|
|
line: null |
|
8
|
|
|
}, |
|
9
|
|
|
created: function() { |
|
10
|
|
|
this.line = this.$el.find('.mivhak-line'); |
|
11
|
|
|
this.createTabNav(); |
|
12
|
|
|
if(this.mivhakInstance.options.runnable) this.createPlayButton(); |
|
13
|
|
|
this.createCogButton(); |
|
14
|
|
|
}, |
|
15
|
|
|
methods: { |
|
16
|
|
|
activateNavTab: function(index) { |
|
17
|
|
|
var button = this.navTabs[index]; |
|
18
|
|
|
// Deactivate all tabs and activate this tab |
|
19
|
|
|
$.each(this.navTabs, function(i,navTab){navTab.deactivate();}); |
|
20
|
|
|
button.activate(); |
|
21
|
|
|
|
|
22
|
|
|
// Position the line |
|
23
|
|
|
this.moveLine(button.$el); |
|
24
|
|
|
}, |
|
25
|
|
|
moveLine: function($el) { |
|
26
|
|
|
if(typeof $el === 'undefined') { |
|
27
|
|
|
this.line.removeClass('mivhak-visible'); |
|
28
|
|
|
return; |
|
29
|
|
|
} |
|
30
|
|
|
this.line.width($el.width()); |
|
31
|
|
|
this.line.css({left:$el.position().left + ($el.outerWidth() - $el.width())/2}); |
|
32
|
|
|
this.line.addClass('mivhak-visible'); |
|
33
|
|
|
}, |
|
34
|
|
|
createTabNav: function() { |
|
35
|
|
|
var source, i, pos = 0; |
|
36
|
|
|
for(i = 0; i < this.mivhakInstance.resources.count(); i++) |
|
37
|
|
|
{ |
|
38
|
|
|
source = this.mivhakInstance.resources.get(i); |
|
39
|
|
|
if(source.visible) this.createNavTabButton(pos++, source.lang); |
|
40
|
|
|
} |
|
41
|
|
|
}, |
|
42
|
|
|
createNavTabButton: function(i, lang) { |
|
43
|
|
|
var $this = this, |
|
44
|
|
|
button = Mivhak.render('top-bar-button',{ |
|
45
|
|
|
text: lang, |
|
46
|
|
|
onClick: function() { |
|
47
|
|
|
$this.mivhakInstance.callMethod('showTab',i); |
|
48
|
|
|
} |
|
49
|
|
|
}); |
|
50
|
|
|
this.navTabs.push(button); |
|
51
|
|
|
this.$el.find('.mivhak-nav-tabs').append(button.$el); |
|
52
|
|
|
}, |
|
53
|
|
|
createPlayButton: function() { |
|
54
|
|
|
var $this = this; |
|
55
|
|
|
var playBtn = Mivhak.render('top-bar-button',{ |
|
56
|
|
|
icon: 'play', |
|
57
|
|
|
onClick: function() { |
|
58
|
|
|
$this.mivhakInstance.preview.show(); |
|
59
|
|
|
$this.moveLine(); |
|
60
|
|
|
} |
|
61
|
|
|
}); |
|
62
|
|
|
this.controls.push(playBtn); |
|
63
|
|
|
this.$el.find('.mivhak-controls').append(playBtn.$el); |
|
64
|
|
|
}, |
|
65
|
|
|
createCogButton: function() { |
|
66
|
|
|
var cogBtn = Mivhak.render('top-bar-button',{ |
|
67
|
|
|
icon: 'cog', |
|
68
|
|
|
mivhakInstance: this.mivhakInstance, |
|
69
|
|
|
dropdown: Mivhak.render('dropdown',{ |
|
70
|
|
|
mivhakInstance: this.mivhakInstance, |
|
71
|
|
|
items: this.mivhakInstance.options.buttons |
|
72
|
|
|
}) |
|
73
|
|
|
}); |
|
74
|
|
|
this.controls.push(cogBtn); |
|
75
|
|
|
this.$el.find('.mivhak-controls').append(cogBtn.$el); |
|
76
|
|
|
} |
|
77
|
|
|
} |
|
78
|
|
|
}); |
askupasoftware /
mivhak.js
