|
1
|
|
|
/** |
|
2
|
|
|
* jQuery plugin's methods. |
|
3
|
|
|
* In all methods, the 'this' keyword is pointing to the calling instance of Mivhak. |
|
4
|
|
|
* These functions serve as the plugin's public API. |
|
5
|
|
|
*/ |
|
6
|
|
|
Mivhak.methods = { |
|
7
|
|
|
|
|
8
|
|
|
/** |
|
9
|
|
|
* Toggle line wrap on/off for the currently active tab. Initially set to |
|
10
|
|
|
* on (true) by default. |
|
11
|
|
|
*/ |
|
12
|
|
|
toggleLineWrap: function() { |
|
13
|
|
|
var $this = this; |
|
14
|
|
|
this.state.lineWrap = !this.state.lineWrap; |
|
15
|
|
|
$.each(this.tabs.tabs, function(i,tab) { |
|
16
|
|
|
tab.editor.getSession().setUseWrapMode($this.state.lineWrap); |
|
17
|
|
|
tab.vscroll.refresh(); |
|
18
|
|
|
tab.hscroll.refresh(); |
|
19
|
|
|
}); |
|
20
|
|
|
}, |
|
21
|
|
|
|
|
22
|
|
|
/** |
|
23
|
|
|
* copy the code in the currently active tab to clipboard (works in all |
|
24
|
|
|
* browsers apart from Safari, where it selects the code and prompts the |
|
25
|
|
|
* user to press command+c) |
|
26
|
|
|
*/ |
|
27
|
|
|
copyCode: function() { |
|
28
|
|
|
var editor = this.activeTab.editor; |
|
29
|
|
|
editor.selection.selectAll(); |
|
30
|
|
|
editor.focus(); |
|
31
|
|
|
if(document.execCommand('copy')) { |
|
32
|
|
|
editor.selection.clearSelection(); |
|
33
|
|
|
this.notifier.timedNotification('Copied to clipboard!', 2000); |
|
34
|
|
|
} |
|
35
|
|
|
else this.notifier.timedNotification('Press ⌘+C to copy the code', 2000); |
|
36
|
|
|
}, |
|
37
|
|
|
|
|
38
|
|
|
/** |
|
39
|
|
|
* Collapse the code viewer and show a "Show Code" button. |
|
40
|
|
|
*/ |
|
41
|
|
|
collapse: function() { |
|
42
|
|
|
if(this.state.collapsed) return; |
|
43
|
|
|
var $this = this; |
|
44
|
|
|
this.state.collapsed = true; |
|
45
|
|
|
this.notifier.closableNotification('Show Code', function(){$this.callMethod('expand');}); |
|
46
|
|
|
this.$selection.addClass('mivhak-collapsed'); |
|
47
|
|
|
this.callMethod('setHeight',this.notifier.$el.outerHeight(true)); |
|
48
|
|
|
}, |
|
49
|
|
|
|
|
50
|
|
|
/** |
|
51
|
|
|
* Expand the code viewer if it's collapsed; |
|
52
|
|
|
*/ |
|
53
|
|
|
expand: function() { |
|
54
|
|
|
if(!this.state.collapsed) return; |
|
55
|
|
|
this.state.collapsed = false; |
|
56
|
|
|
this.notifier.hide(); // In case it's called by an external script |
|
57
|
|
|
this.$selection.removeClass('mivhak-collapsed'); |
|
58
|
|
|
this.callMethod('setHeight',this.options.height); |
|
59
|
|
|
}, |
|
60
|
|
|
|
|
61
|
|
|
/** |
|
62
|
|
|
* Show/activate a tab by the given index (zero based). |
|
63
|
|
|
* @param {number} index |
|
64
|
|
|
*/ |
|
65
|
|
|
showTab: function(index) { |
|
66
|
|
|
this.tabs.showTab(index); |
|
67
|
|
|
this.topbar.activateNavTab(index); |
|
68
|
|
|
if(this.options.runnable) |
|
69
|
|
|
this.preview.hide(); |
|
70
|
|
|
}, |
|
71
|
|
|
|
|
72
|
|
|
/** |
|
73
|
|
|
* Set the height of the code viewer. One of (auto|min|max|average) or |
|
74
|
|
|
* a custom number. |
|
75
|
|
|
* @param {string|number} height |
|
76
|
|
|
*/ |
|
77
|
|
|
setHeight: function(height) { |
|
78
|
|
|
var $this = this; |
|
79
|
|
|
raf(function(){ |
|
80
|
|
|
$this.state.height = $this.calculateHeight(height); |
|
81
|
|
|
$this.tabs.$el.height($this.state.height); |
|
82
|
|
|
$.each($this.tabs.tabs, function(i,tab) { |
|
83
|
|
|
$(tab.resource.pre).height(height); |
|
84
|
|
|
tab.editor.resize(); |
|
85
|
|
|
tab.vscroll.refresh(); |
|
86
|
|
|
tab.hscroll.refresh(); |
|
87
|
|
|
}); |
|
88
|
|
|
}); |
|
89
|
|
|
}, |
|
90
|
|
|
|
|
91
|
|
|
/** |
|
92
|
|
|
* Set the code viewer's accent color. Applied to the nav-tabs text color, |
|
93
|
|
|
* underline, scrollbars and dropdown menu text color. |
|
94
|
|
|
* |
|
95
|
|
|
* @param {string} color |
|
96
|
|
|
*/ |
|
97
|
|
|
setAccentColor: function(color) { |
|
98
|
|
|
if(!color) return; |
|
99
|
|
|
this.topbar.$el.find('.mivhak-top-bar-button').css({'color': color}); |
|
100
|
|
|
this.topbar.$el.find('.mivhak-dropdown-button').css({'color': color}); |
|
101
|
|
|
this.topbar.$el.find('.mivhak-controls svg').css({'fill': color}); |
|
102
|
|
|
this.tabs.$el.find('.mivhak-scrollbar-thumb').css({'background-color': color}); |
|
103
|
|
|
this.topbar.line.css({'background-color': color}); |
|
104
|
|
|
} |
|
105
|
|
|
}; |
askupasoftware /
mivhak.js
