-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex_simple.html
More file actions
299 lines (244 loc) · 12.3 KB
/
index_simple.html
File metadata and controls
299 lines (244 loc) · 12.3 KB
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- (Optional) Color -->
<script language="javascript" type="text/javascript" src="lib/bloxtor/color_shortened.js"></script>
<!-- JQuery -->
<script language="javascript" type="text/javascript" src="lib/jquery/js/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript" src="lib/jqueryui/js/jquery-ui-1.11.4.min.js"></script>
<link rel="stylesheet" href="lib/jqueryui/css/jquery-ui-1.11.4.css">
<!-- To work on mobile devices with touch -->
<script language="javascript" type="text/javascript" src="lib/jqueryuitouchpunch/jquery.ui.touch-punch.min.js"></script>
<!-- Jquery Tap-Hold Event JS file -->
<script language="javascript" type="text/javascript" src="lib/jquerytaphold/taphold.js"></script>
<!-- Material-design-iconic-font -->
<link rel="stylesheet" href="lib/materialdesigniconicfont/css/material-design-iconic-font.min.css">
<!-- Parse_Str -->
<script type="text/javascript" src="lib/phpjs/functions/strings/parse_str.js"></script>
<!-- MD5 -->
<script language="javascript" type="text/javascript" src="lib/jquery/js/jquery.md5.js"></script>
<!-- JQuery Nestable2 -->
<link rel="stylesheet" href="lib/nestable2/jquery.nestable.min.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="lib/nestable2/jquery.nestable.min.js"></script>
<!-- Add Code Editor JS files -->
<script language="javascript" type="text/javascript" src="lib/acecodeeditor/src-min-noconflict/ace.js"></script>
<script language="javascript" type="text/javascript" src="lib/acecodeeditor/src-min-noconflict/ext-language_tools.js"></script>
<!-- Add Code Beautifier -->
<script language="javascript" type="text/javascript" src="lib/mycodebeautifier/js/MyCodeBeautifier.js"></script>
<!-- Add Html/CSS/JS Beautify code -->
<script language="javascript" type="text/javascript" src="lib/jsbeautify/js/lib/beautify.js"></script>
<script language="javascript" type="text/javascript" src="lib/jsbeautify/js/lib/beautify-css.js"></script>
<script language="javascript" type="text/javascript" src="lib/myhtmlbeautify/MyHtmlBeautify.js"></script>
<!-- Add Auto complete -->
<script language="javascript" type="text/javascript" src="lib/myautocomplete/js/MyAutoComplete.js"></script>
<link rel="stylesheet" href="lib/myautocomplete/css/style.css">
<!-- CONTEXT MENU -->
<link rel="stylesheet" href="lib/jquerymycontextmenu/css/style.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="lib/jquerymycontextmenu/js/jquery.mycontextmenu.js"></script>
<!-- Layout UI Editor -->
<!-- Layout UI Editor - HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="lib/jqueryuidroppableiframe/js/html5_ie8/html5shiv.min.js"></script>
<script src="lib/jqueryuidroppableiframe/js/html5_ie8/respond.min.js"></script>
<![endif]-->
<!-- Layout UI Editor - Add Iframe droppable fix -->
<script type="text/javascript" src="lib/jqueryuidroppableiframe/js/jquery-ui-droppable-iframe-fix.js"></script>
<!-- Layout UI Editor - Add Iframe droppable fix - IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="lib/jqueryuidroppableiframe/js/ie10-viewport-bug-workaround.js"></script>
<!-- Layout UI Editor - Add Editor -->
<link rel="stylesheet" href="css/some_bootstrap_style.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/widget_resource.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="js/TextSelection.js"></script>
<script language="javascript" type="text/javascript" src="js/LayoutUIEditor.js"></script>
<script language="javascript" type="text/javascript" src="js/CreateWidgetContainerClassObj.js"></script>
<!-- (Optional) Layout UI Editor - LayoutUIEditorFormField.js is optional, bc it depends of FormFieldsUtilObj.js -->
<script language="javascript" type="text/javascript" src="lib/bloxtor/FormFieldsUtilObj_shortened.js"></script>
<script language="javascript" type="text/javascript" src="js/LayoutUIEditorFormField.js"></script>
<!-- (Optional) Layout UI Editor - Add Widget Resources -->
<script language="javascript" type="text/javascript" src="js/LayoutUIEditorWidgetResource.js"></script>
<!-- (Optional) Add Fontawsome Icons CSS -->
<link rel="stylesheet" href="lib/fontawesome/css/all.min.css">
<!-- (Optional) Add Fancy LighBox lib -->
<link rel="stylesheet" href="lib/jquerymyfancylightbox/css/style.css" type="text/css" charset="utf-8" media="screen, projection" />
<script language="javascript" type="text/javascript" src="lib/jquerymyfancylightbox/js/jquery.myfancybox.js"></script>
<!-- (Optional) Others -->
<link rel="stylesheet" href="examples/css/beauty.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script>
var MyLayoutUIEditor = new LayoutUIEditor();
$(function() {
MyLayoutUIEditor.options.ui_selector = ".layout-ui-editor";
MyLayoutUIEditor.options.on_ready_func = function() {
//show view layout panel instead of code
var luie = MyLayoutUIEditor.getUI();
var view_layout = luie.find(" > .tabs > .view-layout");
view_layout.addClass("do-not-confirm");
view_layout.trigger("click");
view_layout.removeClass("do-not-confirm");
};
MyLayoutUIEditor.init("MyLayoutUIEditor");
});
</script>
</head>
<body>
<div class="layout-ui-editor reverse fixed-side-properties layout-ui-editor-beauty">
<!-- MENU WIDGETS -->
<ul class="menu-widgets hidden">
<!-- WIDGETS GROUP -->
<li class="group group-generic group-open">
<div class="group-title"><i class="zmdi zmdi-caret-down toggle"></i>Generic</div>
<ul>
<!-- WIDGET LINK NODE -->
<li class="draggable menu-widget menu-widget-href " data-tag="href" title="Link" data-create-widget-class="HrefWidget" data-resizable="1" data-absolute-position="1">
<!-- MENU WIDGET -->
<span>Link</span>
<!-- WIDGET TO BE CREATED IN THE TEMPLATE/CANVAS -->
<a class="template-widget template-widget-href droppable"></a>
<!-- WIDGET PROPERTIES -->
<div class="properties">
<div class="form-group row settings-property href">
<label class="col-md-4 col-sm-5 col-form-label">Url: </label>
<input class="col-md-8 col-sm-7 form-control" name="href" />
</div>
</div>
<!-- WIDGET STYLING -->
<style>
.layout-ui-editor > .menu-widgets .menu-widget.menu-widget-href:before,
body > .menu-widget.menu-widget-href.ui-draggable-dragging:before {
background-image:url('widget/generic/href/logo.svg');
}
.layout-ui-editor > .template-widgets .widget-header.widget-header-href {
border-radius:0 5px 5px 0;
}
.layout-ui-editor > .template-widgets .widget-header.widget-header-href .options .option.toggle {
display:none;
}
</style>
<!-- WIDGET CLASS AND HANDLERS -->
<script>
function HrefWidget(ui_creator, menu_widget) {
var me = this;
me.init = function() {
menu_widget.attr({
"data-on-parse-template-widget-html-func": ui_creator.obj_var_name + ".menu_widgets_objs.href.parseHtml",
"data-on-create-template-widget-func": ui_creator.obj_var_name + ".menu_widgets_objs.href.onCreateTemplateWidget",
});
menu_widget.children(".properties").attr({
"data-on-after-save-settings-field-func": ui_creator.obj_var_name + ".menu_widgets_objs.href.saveSettingsField",
"data-on-before-parse-widget-settings-func": ui_creator.obj_var_name + ".menu_widgets_objs.href.parseSettings",
});
};
me.parseHtml = function(html_element) {
if (html_element && html_element.nodeName.toLowerCase() == "a")
return {
droppable: $(html_element),
};
};
me.parseSettings = function(widget, widget_settings) {
widget_settings["href"] = widget.attr("href");
};
me.onCreateTemplateWidget = function(widget, html_element) {
if (!html_element) {
//check if exists first bc when we change the node names of the widgets.
if (!widget[0].hasAttribute("href"))
widget.attr("href", "#");
if (widget.contents().length == 0) //very important, otherwise everytime we change a div to a link, it will add this text.
widget.append("link text");
}
};
me.saveSettingsField = function(field, widget, status) {
if (status) {
field = $(field);
var field_value = field.val();
var sprop = field.parent();
if (sprop.hasClass("href")) {
if (field_value != "")
widget.attr("href", field_value);
else
widget.removeAttr("href");
}
}
return status;
};
}
</script>
</li>
<!-- WIDGET IMAGE NODE -->
<li class="draggable menu-widget menu-widget-image " data-tag="image" title="Image" data-create-widget-class="ImageWidget" data-resizable="1" data-absolute-position="1">
<!-- MENU WIDGET -->
<span>Image</span>
<!-- WIDGET TO BE CREATED IN THE TEMPLATE/CANVAS -->
<img class="template-widget template-widget-image "></img>
<!-- WIDGET PROPERTIES -->
<div class="properties">
<div class="form-group row settings-property src">
<label class="col-md-4 col-sm-5 col-form-label">Source: </label>
<input class="col-md-8 col-sm-7 form-control" name="src" />
</div>
</div>
<!-- WIDGET STYLING -->
<style>
.layout-ui-editor > .menu-widgets .menu-widget.menu-widget-image:before,
body > .menu-widget.menu-widget-image.ui-draggable-dragging:before {
background-image:url('widget/generic/image/logo.svg');
}
.layout-ui-editor > .template-widgets .widget-header.widget-header-image {
border-radius:0 5px 5px 0;
}
.layout-ui-editor > .template-widgets .widget-header.widget-header-image .options .option.toggle {
display:none;
}
</style>
<!-- WIDGET CLASS AND HANDLERS -->
<script>
function ImageWidget(ui_creator, menu_widget) {
var me = this;
var default_src = ui_creator.getLayoutUIEditorFolderPath() + "widget/generic/image/default_image.gif";
me.init = function() {
menu_widget.attr({
"data-on-parse-template-widget-html-func": ui_creator.obj_var_name + ".menu_widgets_objs.image.parseHtml",
"data-on-create-template-widget-func": ui_creator.obj_var_name + ".menu_widgets_objs.image.onCreateTemplateWidget"
});
menu_widget.children(".properties").attr({
"data-on-before-parse-widget-settings-func": ui_creator.obj_var_name + ".menu_widgets_objs.image.parseSettings",
"data-on-after-save-settings-field-func": ui_creator.obj_var_name + ".menu_widgets_objs.image.saveSettingsField"
});
};
me.parseHtml = function(html_element) {
return html_element && html_element.nodeName.toLowerCase() == "img";
};
me.onCreateTemplateWidget = function(widget, html_element) {
if (!html_element)
widget.attr("src", default_src);
};
me.parseSettings = function(widget, widget_settings) {
widget_settings["src"] = widget.attr("src");
};
me.saveSettingsField = function(field, widget, status) {
if (status) {
field = $(field);
var field_value = field.val();
var sprop = field.parent();
if (sprop.hasClass("src")) {
field_value = field_value.replace(/^\s+/g, "").replace(/\s+$/g, "");//trim url
if (field_value != "")
widget.attr("src", field_value);
else {
ui_creator.showError("Image src cannot be empty!");
field.val( widget.attr("src") );
}
}
}
return status;
};
}
</script>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>