forked from rhom001/grid-gadget
-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid-gadget.js
114 lines (102 loc) · 9.23 KB
/
grid-gadget.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* grid-gadget.js v1.0.0
*/
$(document).ready(function(){
/* Loads up the preview screen. */
var srcContent = /*$('#testRows').html();//*/gadget.oucGetSourceContent();;
$('#preview').html(srcContent);
/* For each column, add in a delete. */
$('#preview .row').each(function() {
$(this).append('<div class="delete"></div>');
$(this).children().addClass('gg-col');
});
/* Sets up selectors. */
$('#preview').sortable().disableSelection();
/* Button functions. */
$('#rowAdd').on('click', function() {
/* Displays the row generator. */
$('#rowGenerator .column').toggle(1000);
$('[name=cols').val(1);
$('#previewNew').html('<div class="column small-12 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="delete"></div>');
});
$('#rowConfirm').on('click', function() {
/* Takes out the gg-col class and the delete button. */
$('.delete').remove();
$('#preview .gg-col').removeClass("gg-col");
$('#preview .ui-sortable-handle').removeClass('ui-sortable-handle');
srcContent = $('#preview').html();
$('#testRows').html(srcContent);
});
$('#rowInsert').on('click', function() {
/* Inserts the new row into the preview. */
var content = $('#previewNew').html();
content = content.replace(/small/g, "medium");//.replace(/ gg-col/g, "");
content = '<div class="row">' + content + '</div>';
$('#preview').append(content);
});
$('.sortable').on('click', '.delete', function() {
$(this).parent().remove();
});
/* Changes the number of columns in the preview new row display. */
$('#rowGenerator').on('change', '[name=cols]', function(){
var selection = $('[name=cols] option:selected').val();
var column;
/* Gets the correct number of columns. */
if(selection == 1) {
/* Creates a row that has 1 small-12 column. */
column = '<div class="column small-12 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 2) {
/* Creates a row that has 2 small-6 columns. */
column = '<div class="column small-6 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 3) {
/* Creates a row that has 3 small-4 columns. */
column = '<div class="column small-4 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 4) {
/* Creates a row that has 4 small-3 columns. */
column = '<div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
/* Specialized 2-column subsets. */
else if(selection == 25) {
/* Creates a row with a 25%-75% ratio. */
column = '<div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-9 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 33) {
/* Creates a row with a 33%-66% ratio. */
column = '<div class="column small-4 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-8 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 66) {
/* Creates a row with a 66%-33% ratio. */
column = '<div class="column small-8 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-4 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 75) {
/* Creates a row with a 75%-25% ratio. */
column = '<div class="column small-9 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
/* Specialized 3-column subsets. */
else if(selection == 2525) {
/* Creates a row with a 25%-25%-50% ratio. */
column = '<div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-6 gg-col"><!-- com.omniupdate.div label="contentcol3" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 2550) {
/* Creates a row with a 25%-50%-25% ratio. */
column = '<div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-6 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol3" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
else if(selection == 5025) {
/* Creates a row with a 50%-25%-25% ratio. */
column = '<div class="column small-6 gg-col"><!-- com.omniupdate.div label="contentcol1" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol2" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div><div class="column small-3 gg-col"><!-- com.omniupdate.div label="contentcol3" group="Everyone" button="707" --><!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="484"/ --><!-- /com.omniupdate.div --></div>';
}
/* Adds in the number of columns into the preview. */
var stringHTML = column;
/* If the columns are evenly distributed then insert add in the number of colums. */
if(selection < 5) {
for(i = 2; i <= selection; ++i) {
var colI = "col" + i;
stringHTML += column.replace(/col1/g, colI);
}
}
stringHTML += '<div class="delete"></div>';
$('#previewNew').html(stringHTML);
});
});