/
flawless_ui.js
executable file
·98 lines (79 loc) · 2.94 KB
/
flawless_ui.js
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
/* Flaw{LESS} Css Framework
* Menu Component with plugins to help you with development of great websites
*/
jQuery(document).ready(function($) {
if(FLAWLESS_MENU) {
var getHTML5Outline = function() {
var outliner = HTML5Outline(document.getElementsByTagName("body")[0]);
return outliner.asHTML(true);
}
var dialogClosed = function(event, ui) {
// also uncheck opener
$('#flawless-ui-opener').attr("checked", false);
}
var buildTabs = function() {
var tabs = '<div id="flawless-ui-tabs"><ul>'
// ---------- ADD TAB-HEADS HERE -----------
tabs += '<li><a href="#flawless-compress">Compress</a></li>';
tabs += '<li><a href="#flawless-profile">Yui Profiling</a></li>';
tabs += '<li><a href="#flawless-outline">Html5 Outline</a></li>';
tabs += '</ul>';
// ---------- ADD TAB-CONTENT HERE ----------
/* compress tab */
var css = flawless_css();
tabs += '<div id="flawless-compress"><p><strong>Flaw{LESS} Css Framework</strong> - generated and compressed css (~' + flawless_size(css.length) + ')</p><textarea style="font-size: 60%; width: 99%; height: 300px">'+css+'</textarea></div>';
/* yui profiling tab */
tabs += '<div id="flawless-profile"><input type="checkbox" id="flawless-profile-opener" /> Show yui profiling!</div>';
/* html 5 outliner tab */
tabs += '<div id="flawless-outline">' + getHTML5Outline() + '</div>';
tabs += '</div>'; // close ui tabs
return tabs;
}
$("body").append("<div style='line-height:30px; width: 100px; position: fixed; bottom: 0; left: 0; border: 1px solid #ccc'><input type='checkbox' id='flawless-ui-opener' /><a id='flawless-ui-opener-link' href='#'>Flaw{less}</a></div>");
// generate the menu dialog
var $dialog = $('<div id="flawless-ui-menu"></div>')
.html(buildTabs())
.dialog({
autoOpen: false, // change this to true while developing new plugins
title: 'Flaw{LESS} Menu',
width: 800,
close: dialogClosed
});
// toggle menu with opener
$('#flawless-ui-opener').click(function() {
if($(this).attr("checked")) {
$dialog.dialog('open');
} else {
$dialog.dialog('close');
}
});
// same with link
$('#flawless-ui-opener-link').click(function() {
var check = $("#flawless-ui-opener");
if(check.attr("checked")) {
$dialog.dialog('close');
check.attr("checked" , false);
} else {
$dialog.dialog('open');
check.attr("checked" , true);
}
return false; // prevent default link action
});
// init tabs
$("#flawless-ui-tabs").tabs();
/* -------- PLUGIN SETUPS ------------ */
// outliner highlight on click
$("#flawless-outline a").each(function(i, elem) {
$(this).click(function() {
$($(this).attr("href")).effect("highlight", {}, 2000);
return false; // prevent default
});
});
// profiling call
$('#flawless-profile-opener').click(function() {
if($(this).attr("checked")) {
FLAWLESS_PROFILE.show();
}
});
}
});