]>
git.proxmox.com Git - ceph.git/blob - ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/dist/js/demo.js
4 * You should not use this file in production.
5 * This file is for demo purposes only.
7 (function ($, AdminLTE
) {
12 * List of all the available skins
32 var tab_pane
= $("<div />", {
33 "id": "control-sidebar-theme-demo-options-tab",
34 "class": "tab-pane active"
37 //Create the tab button
38 var tab_button
= $("<li />", {"class": "active"})
39 .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
40 + "<i class='fa fa-wrench'></i>"
43 //Add the tab button to the right sidebar tabs
44 $("[href='#control-sidebar-home-tab']")
49 var demo_settings
= $("<div />");
53 "<h4 class='control-sidebar-heading'>"
57 + "<div class='form-group'>"
58 + "<label class='control-sidebar-subheading'>"
59 + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
62 + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
65 + "<div class='form-group'>"
66 + "<label class='control-sidebar-subheading'>"
67 + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
70 + "<p>Activate the boxed layout</p>"
73 + "<div class='form-group'>"
74 + "<label class='control-sidebar-subheading'>"
75 + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
78 + "<p>Toggle the left sidebar's state (open or collapse)</p>"
80 //Sidebar mini expand on hover toggle
81 + "<div class='form-group'>"
82 + "<label class='control-sidebar-subheading'>"
83 + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
84 + "Sidebar Expand on Hover"
86 + "<p>Let the sidebar mini expand on hover</p>"
88 //Control Sidebar Toggle
89 + "<div class='form-group'>"
90 + "<label class='control-sidebar-subheading'>"
91 + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
92 + "Toggle Right Sidebar Slide"
94 + "<p>Toggle between slide over content and push content effects</p>"
96 //Control Sidebar Skin Toggle
97 + "<div class='form-group'>"
98 + "<label class='control-sidebar-subheading'>"
99 + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
100 + "Toggle Right Sidebar Skin"
102 + "<p>Toggle between dark and light skins for the right sidebar</p>"
105 var skins_list
= $("<ul />", {"class": 'list-unstyled clearfix'});
109 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
110 .append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
111 + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
112 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
114 + "<p class='text-center no-margin'>Blue</p>");
115 skins_list
.append(skin_blue
);
117 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
118 .append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
119 + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
120 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
122 + "<p class='text-center no-margin'>Black</p>");
123 skins_list
.append(skin_black
);
125 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
126 .append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
127 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
128 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
130 + "<p class='text-center no-margin'>Purple</p>");
131 skins_list
.append(skin_purple
);
133 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
134 .append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
135 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
136 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
138 + "<p class='text-center no-margin'>Green</p>");
139 skins_list
.append(skin_green
);
141 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
142 .append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
143 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
144 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
146 + "<p class='text-center no-margin'>Red</p>");
147 skins_list
.append(skin_red
);
149 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
150 .append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
151 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
152 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
154 + "<p class='text-center no-margin'>Yellow</p>");
155 skins_list
.append(skin_yellow
);
157 //Light sidebar skins
158 var skin_blue_light
=
159 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
160 .append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
161 + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
162 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
164 + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>");
165 skins_list
.append(skin_blue_light
);
166 var skin_black_light
=
167 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
168 .append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
169 + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
170 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
172 + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>");
173 skins_list
.append(skin_black_light
);
174 var skin_purple_light
=
175 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
176 .append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
177 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
178 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
180 + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>");
181 skins_list
.append(skin_purple_light
);
182 var skin_green_light
=
183 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
184 .append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
185 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
186 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
188 + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>");
189 skins_list
.append(skin_green_light
);
191 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
192 .append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
193 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
194 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
196 + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>");
197 skins_list
.append(skin_red_light
);
198 var skin_yellow_light
=
199 $("<li />", {style
: "float:left; width: 33.33333%; padding: 5px;"})
200 .append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
201 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
202 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
204 + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
205 skins_list
.append(skin_yellow_light
);
207 demo_settings
.append("<h4 class='control-sidebar-heading'>Skins</h4>");
208 demo_settings
.append(skins_list
);
210 tab_pane
.append(demo_settings
);
211 $("#control-sidebar-home-tab").after(tab_pane
);
216 * Toggles layout classes
218 * @param String cls the layout class to toggle
221 function change_layout(cls
) {
222 $("body").toggleClass(cls
);
223 AdminLTE
.layout
.fixSidebar();
224 //Fix the problem with right sidebar and layout boxed
225 if (cls
== "layout-boxed")
226 AdminLTE
.controlSidebar
._fix($(".control-sidebar-bg"));
227 if ($('body').hasClass('fixed') && cls
== 'fixed') {
228 AdminLTE
.pushMenu
.expandOnHover();
229 AdminLTE
.layout
.activate();
231 AdminLTE
.controlSidebar
._fix($(".control-sidebar-bg"));
232 AdminLTE
.controlSidebar
._fix($(".control-sidebar"));
236 * Replaces the old skin with the new skin
237 * @param String cls the new skin class
238 * @returns Boolean false to prevent link's default action
240 function change_skin(cls
) {
241 $.each(my_skins
, function (i
) {
242 $("body").removeClass(my_skins
[i
]);
245 $("body").addClass(cls
);
251 * Store a new settings in the browser
253 * @param String name Name of the setting
254 * @param String val Value of the setting
257 function store(name
, val
) {
258 if (typeof (Storage
) !== "undefined") {
259 localStorage
.setItem(name
, val
);
261 window
.alert('Please use a modern browser to properly view this template!');
266 * Get a prestored setting
268 * @param String name Name of of the setting
269 * @returns String The value of the setting | null
272 if (typeof (Storage
) !== "undefined") {
273 return localStorage
.getItem(name
);
275 window
.alert('Please use a modern browser to properly view this template!');
280 * Retrieve default settings and apply them to the template
285 var tmp
= get('skin');
286 if (tmp
&& $.inArray(tmp
, my_skins
))
289 //Add the change skin listener
290 $("[data-skin]").on('click', function (e
) {
291 if($(this).hasClass('knob'))
294 change_skin($(this).data('skin'));
297 //Add the layout manager
298 $("[data-layout]").on('click', function () {
299 change_layout($(this).data('layout'));
302 $("[data-controlsidebar]").on('click', function () {
303 change_layout($(this).data('controlsidebar'));
304 var slide
= !AdminLTE
.options
.controlSidebarOptions
.slide
;
305 AdminLTE
.options
.controlSidebarOptions
.slide
= slide
;
307 $('.control-sidebar').removeClass('control-sidebar-open');
310 $("[data-sidebarskin='toggle']").on('click', function () {
311 var sidebar
= $(".control-sidebar");
312 if (sidebar
.hasClass("control-sidebar-dark")) {
313 sidebar
.removeClass("control-sidebar-dark")
314 sidebar
.addClass("control-sidebar-light")
316 sidebar
.removeClass("control-sidebar-light")
317 sidebar
.addClass("control-sidebar-dark")
321 $("[data-enable='expandOnHover']").on('click', function () {
322 $(this).attr('disabled', true);
323 AdminLTE
.pushMenu
.expandOnHover();
324 if (!$('body').hasClass('sidebar-collapse'))
325 $("[data-layout='sidebar-collapse']").click();
329 if ($('body').hasClass('fixed')) {
330 $("[data-layout='fixed']").attr('checked', 'checked');
332 if ($('body').hasClass('layout-boxed')) {
333 $("[data-layout='layout-boxed']").attr('checked', 'checked');
335 if ($('body').hasClass('sidebar-collapse')) {
336 $("[data-layout='sidebar-collapse']").attr('checked', 'checked');
340 })(jQuery
, $.AdminLTE
);