提交 | 用户 | 时间
|
58d006
|
1 |
/** |
A |
2 |
<b>Select a different skin</b>. It's good for demo only. |
|
3 |
You should hard code skin-specific changes inside your HTML/server-side code. |
|
4 |
Please refer to documentation for more info. |
|
5 |
*/ |
|
6 |
|
|
7 |
(function($ , undefined) { |
|
8 |
try { |
|
9 |
$('#skin-colorpicker').ace_colorpicker({'auto_pos': false}); |
|
10 |
} catch(e) {} |
|
11 |
|
|
12 |
$('#skin-colorpicker').on('change', function(){ |
|
13 |
var skin_class = $(this).find('option:selected').data('skin'); |
|
14 |
|
|
15 |
if($('#ace-skins-stylesheet').length == 0) { |
|
16 |
//let's load skins stylesheet only when needed! |
|
17 |
var ace_style = $('head').find('link.ace-main-stylesheet'); |
|
18 |
if(ace_style.length == 0) { |
|
19 |
ace_style = $('head').find('link[href*="/ace.min.css"],link[href*="/ace-part2.min.css"]'); |
|
20 |
if(ace_style.length == 0) { |
|
21 |
ace_style = $('head').find('link[href*="/ace.css"],link[href*="/ace-part2.css"]'); |
|
22 |
} |
|
23 |
} |
|
24 |
|
|
25 |
var stylesheet_url = ace_style.first().attr('href').replace(/(\.min)?\.css$/i , '-skins$1.css'); |
|
26 |
$.ajax({ |
|
27 |
'url': stylesheet_url |
|
28 |
}).done(function() { |
|
29 |
var new_link = jQuery('<link />', {type : 'text/css', rel: 'stylesheet', 'id': 'ace-skins-stylesheet'}) |
|
30 |
if(ace_style.length > 0){ |
|
31 |
new_link.insertAfter(ace_style.last()); |
|
32 |
} |
|
33 |
else new_link.appendTo('head'); |
|
34 |
|
|
35 |
new_link.attr('href', stylesheet_url); |
|
36 |
//we set "href" after insertion, for IE to work |
|
37 |
|
|
38 |
applyChanges(skin_class); |
|
39 |
if(window.Pace && Pace.running) Pace.stop(); |
|
40 |
}) |
|
41 |
} |
|
42 |
else { |
|
43 |
applyChanges(skin_class); |
|
44 |
} |
|
45 |
|
|
46 |
|
|
47 |
function applyChanges(skin_class) { |
|
48 |
//skin cookie tip |
|
49 |
var body = $(document.body); |
|
50 |
body.removeClass('no-skin skin-1 skin-2 skin-3'); |
|
51 |
//if(skin_class != 'skin-0') { |
|
52 |
body.addClass(skin_class); |
|
53 |
ace.data.set('skin', skin_class); |
|
54 |
//save the selected skin to cookies |
|
55 |
//which can later be used by your server side app to set the skin |
|
56 |
//for example: <body class="<?php echo $_COOKIE['ace_skin']; ?>" |
|
57 |
//} else ace.data.remove('skin'); |
|
58 |
|
|
59 |
var skin3_colors = ['red', 'blue', 'green', '']; |
|
60 |
|
|
61 |
|
|
62 |
//undo skin-1 |
|
63 |
$('.ace-nav > li.grey').removeClass('dark'); |
|
64 |
|
|
65 |
//undo skin-2 |
|
66 |
$('.ace-nav > li').removeClass('no-border margin-1'); |
|
67 |
$('.ace-nav > li:not(:last-child)').removeClass('light-pink').find('> a > '+ace.vars['.icon']).removeClass('pink').end().eq(0).find('.badge').removeClass('badge-warning'); |
|
68 |
$('.sidebar-shortcuts .btn') |
|
69 |
.removeClass('btn-pink btn-white') |
|
70 |
.find(ace.vars['.icon']).removeClass('white'); |
|
71 |
|
|
72 |
//undo skin-3 |
|
73 |
$('.ace-nav > li.grey').removeClass('red').find('.badge').removeClass('badge-yellow'); |
|
74 |
$('.sidebar-shortcuts .btn').removeClass('btn-primary btn-white') |
|
75 |
var i = 0; |
|
76 |
$('.sidebar-shortcuts .btn').each(function() { |
|
77 |
$(this).find(ace.vars['.icon']).removeClass(skin3_colors[i++]); |
|
78 |
}) |
|
79 |
|
|
80 |
|
|
81 |
|
|
82 |
|
|
83 |
var skin0_buttons = ['btn-success', 'btn-info', 'btn-warning', 'btn-danger']; |
|
84 |
if(skin_class == 'no-skin') { |
|
85 |
var i = 0; |
|
86 |
$('.sidebar-shortcuts .btn').each(function() { |
|
87 |
$(this).attr('class', 'btn ' + skin0_buttons[i++%4]); |
|
88 |
}) |
|
89 |
|
|
90 |
$('.sidebar[data-sidebar-scroll=true]').ace_sidebar_scroll('updateStyle', ''); |
|
91 |
$('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('updateStyle', 'no-track scroll-thin'); |
|
92 |
} |
|
93 |
|
|
94 |
else if(skin_class == 'skin-1') { |
|
95 |
$('.ace-nav > li.grey').addClass('dark'); |
|
96 |
var i = 0; |
|
97 |
$('.sidebar-shortcuts') |
|
98 |
.find('.btn').each(function() { |
|
99 |
$(this).attr('class', 'btn ' + skin0_buttons[i++%4]); |
|
100 |
}) |
|
101 |
|
|
102 |
$('.sidebar[data-sidebar-scroll=true]').ace_sidebar_scroll('updateStyle', 'scroll-white no-track'); |
|
103 |
$('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('updateStyle', 'no-track scroll-thin scroll-white'); |
|
104 |
} |
|
105 |
|
|
106 |
else if(skin_class == 'skin-2') { |
|
107 |
$('.ace-nav > li').addClass('no-border margin-1'); |
|
108 |
$('.ace-nav > li:not(:last-child)').addClass('light-pink').find('> a > '+ace.vars['.icon']).addClass('pink').end().eq(0).find('.badge').addClass('badge-warning'); |
|
109 |
|
|
110 |
$('.sidebar-shortcuts .btn').attr('class', 'btn btn-white btn-pink') |
|
111 |
.find(ace.vars['.icon']).addClass('white'); |
|
112 |
|
|
113 |
$('.sidebar[data-sidebar-scroll=true]').ace_sidebar_scroll('updateStyle', 'scroll-white no-track'); |
|
114 |
$('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('updateStyle', 'no-track scroll-thin scroll-white'); |
|
115 |
} |
|
116 |
|
|
117 |
//skin-3 |
|
118 |
//change shortcut buttons classes, this should be hard-coded if you want to choose this skin |
|
119 |
else if(skin_class == 'skin-3') { |
|
120 |
body.addClass('no-skin');//because skin-3 has many parts of no-skin as well |
|
121 |
|
|
122 |
$('.ace-nav > li.grey').addClass('red').find('.badge').addClass('badge-yellow'); |
|
123 |
|
|
124 |
var i = 0; |
|
125 |
$('.sidebar-shortcuts .btn').each(function() { |
|
126 |
$(this).attr('class', 'btn btn-primary btn-white'); |
|
127 |
$(this).find(ace.vars['.icon']).addClass(skin3_colors[i++]); |
|
128 |
}) |
|
129 |
|
|
130 |
$('.sidebar[data-sidebar-scroll=true]').ace_sidebar_scroll('updateStyle', 'scroll-dark no-track'); |
|
131 |
$('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('updateStyle', 'no-track scroll-thin'); |
|
132 |
} |
|
133 |
|
|
134 |
//some sizing differences may be there in skins, so reset scrollbar size |
|
135 |
$('.sidebar[data-sidebar-scroll=true]').ace_sidebar_scroll('reset') |
|
136 |
//$('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('reset') |
|
137 |
|
|
138 |
if(ace.vars['old_ie']) ace.helper.redraw(document.body, true); |
|
139 |
} |
|
140 |
|
|
141 |
}) |
|
142 |
})(jQuery); |