Project

General

Profile

การสร้าง Aimagin Connect components » buitin-component-example.js

ตัวอย่าง built-in package - Natthaphon Choomphon-anomakhun (คิว), 07 Oct 2019 11:42

 
1
ID="AMG_CONNECT_BUILT_IN_PACKAGE"
2
PACKAGE[ID] = {
3
    name:"Built-in", text:"Built-in components", children:["CONTAINER", "DISPLAY", "INPUT", "MENU"],
4
    object:{
5
        setProperty:function(e) {
6
            document.getElementById(e.id)[e.key] = e.value;            
7
        },
8
        getProperty:function(e) {
9
            console.log(e);
10
            return document.getElementById(e.id)[e.key];
11
        },
12
        setAttribute:function(e) {
13
            document.getElementById(e.id).setAttribute(e.key, e.value);
14
        },
15
        setStyle:function(e) {
16
            $("#"+e.id).css(e.key, e.value);
17
            document.getElementById(e.id).style[e.key] = e.value;
18
        },
19
        getStyle:function(e) {
20
            return $("#"+e.id).css(e.key);
21
        },
22
        onclick:function(obj) {
23
            document.getElementById(obj.id).onclick = function(e) {
24
                obj.value(e);
25
            };
26
        },
27
        write_body_start_row:function(e){return '<div id="'+e.id+'" class="row">';}
28
    }    
29
};
30
PACKAGE.CONTAINER = {
31
    name:"Container", text:"Container", children:["COL", "DIV_CONTAINER", "DIV_CONTAINER_FLUID", "DIV", "ROW"]
32
};
33
PACKAGE.DISPLAY = {
34
    name:"Display", text:"Display", children:["HEADER_1", "LABEL", "PARAGRAPH"]
35
};
36
PACKAGE.INPUT = {
37
    name:"Input", text:"Input", children:["BUTTON", "TEXTBOX", "DROPDOWN"]
38
};
39
PACKAGE.COL = {
40
    name:"Col", text:"Column", children:true,
41
    parameter:[
42
        {
43
            name:"text-align", text:"text-align", input:{type:"1", option:[{value:"left", text:"left"}, {value:"center", text:"center"}, {value:"right", text:"right"}], value:"left"},
44
            setParameter:"setStyle", getParameter:"getStyle"
45
        },
46
        {
47
            name:"size", text:"Size", input:{type:"1", option:[{value:"extra small", text:"extra small"}, {value:"small", text:"small"}, {value:"medium", text:"medium"}, {value:"large", text:"large"}, {value:"extra large", text:"extra large"}], value:""}, 
48
            setParameter:function(e) {
49
                let el = $("#"+e.id);
50
                el.removeClass(el.attr("_data-col-size") +el.attr("_data-col-n"));
51
                el.attr("_data-col-size", (()=>{
52
                    let size = {"small":"col-sm", "medium":"col-md", "large":"col-lg", "extra large":"col-xl"};
53
                    return size[e.value.toLowerCase()]?size[e.value.toLowerCase()]:"col";
54
                }));
55
                el.addClass(el.attr("_data-col-size") +el.attr("_data-col-n"));
56
            }, 
57
            getParameter:function(e){
58
                let el = $("#"+e.id);
59
                return el.attr("_data-col-size");
60
            }
61
        },        
62
        {
63
            name:"# of columns", text:"Number of columns", input:{type:"1", option:[{value:"", text:""}, {value:"1", text:"1"}, {value:"2", text:"2"}, {value:"3", text:"3"}, {value:"4", text:"4"}, {value:"5", text:"5"}, {value:"6", text:"6"}, {value:"7", text:"7"}, {value:"8", text:"8"}, {value:"9", text:"9"}, {value:"10", text:"10"}, {value:"11", text:"11"}, {value:"12", text:"12"}], value:""}, 
64
            setParameter:function(e) {
65
                let el = $("#"+e.id);
66
                el.removeClass(el.attr("_data-col-size") +el.attr("_data-col-n"));
67
                el.attr("_data-col-n", e.value==""?"":"-"+e.value);
68
                el.addClass(el.attr("_data-col-size")+el.attr("_data-col-n"));
69
            }, 
70
            getParameter:function(e){
71
                let el = $("#"+e.id);
72
                return el.attr("_data-col-n");
73
            }
74
        }
75
    ],
76
    write_body_start:function(component){return '<div id="'+component.id+'" class="col" _data-col-size="col" _data-col-n="">';},
77
    write_body_end:function(component){return "</div>";},
78
    add_body_script:function(component){console.log('body_script_col');}
79
};
80
PACKAGE.DIV_CONTAINER= {
81
    name:"Container", text:"Container", children:true,
82
    function:{},
83
    parameter:[],
84
    callback:[],
85
    write_head_init:function(component){return "";},
86
    write_body_start:function(component){return '<div id="'+component.id+'" class="container">';},
87
    write_body_end:function(component){return "</div>";},
88
    add_body_script:function(component){}
89
};
90
PACKAGE.DIV_CONTAINER_FLUID = {
91
    name:"Container-Fluid", text:"Container-Fluid", children:true,
92
    function:{},
93
    parameter:[],
94
    callback:[],
95
    write_head_init:function(component){return "";},
96
    write_body_start:function(component){return '<div id="'+component.id+'" class="container-fluid">';},
97
    write_body_end:function(component){return "</div>";},
98
    add_body_script:function(component){}
99
};
100
PACKAGE.DIV = {
101
    name:"Div", text:"Div", children:true,
102
    write_head_init:function(component){return "";},
103
    write_body_start:function(component){return '<div id="'+component.id+'">';},
104
    write_body_end:function(component){return "</div>";},
105
    add_body_script:function(component){}    
106
};
107
PACKAGE.ROW = {
108
    name:"Row", text:"Row", children:true,
109
    parameter:[],
110
    callback:[],
111
    write_head_init:function(component){},
112
    write_body_start:"write_body_start_row",
113
    write_body_end:function(component){return "</div>";},
114
    write_body_script:function(component){}
115
};
116
PACKAGE.HEADER_1 = {
117
    name:"Header 1", text:"Header 1", children:false,
118
    function:{},
119
    parameter:[
120
        {
121
            name:"html", title:"HTML", input:{type:"0", value:""}, setParameter:function(e) {document.getElementById(e.id).innerHTML = e.value;}
122
        }        
123
    ],
124
    callback:[],
125
    write_head_init:function(component){},
126
    write_body_start:function(component){return '<h1 id="'+component.id+'">';},
127
    write_body_end:function(component){return "</h1>";},
128
    write_body_script:function(component){}
129
};
130
PACKAGE.LABEL = {
131
    name:"Label", text:"Label", children:false,
132
    parameter:[
133
        {name:"content", text:"content", input:{type:"0", value:"Content"},
134
            setParameter:function(e) {document.getElementById(e.id).innerHTML = e.value;}
135
        }
136
    ],
137
    callback:[],
138
    write_head_init:function(component){},
139
    write_body_start:function(component){return '<label id="'+component.id+'">'+component.property.parameter.content;},
140
    write_body_end:function(component){return "</label>";},
141
    write_body_script:function(component){}
142
};
143
PACKAGE.PARAGRAPH = {
144
    name:"Paragraph", text:"Paragraph", children:false,
145
    parameter:[
146
        {
147
            name:"html", title:"HTML", input:{type:"0", value:""}, setParameter:function(e) {document.getElementById(e.id).innerHTML = e.value;}
148
        }
149
    ],
150
    callback:[],
151
    write_head_init:function(component){},
152
    write_body_start:function(component){return '<p id="'+component.id+'">';},
153
    write_body_end:function(component){return "</p>";},
154
    write_body_script:function(component){}
155
};
156
PACKAGE.BUTTON = {
157
    name:"Button", text:"button", children:false,
158
    parameter:[
159
        {name:"content", text:"Content", input:{type:"0", value:"Button"},
160
            setParameter:function(e) {        
161
                document.getElementById(e.id).innerHTML = e.value;
162
            }, 
163
            getParameter:function(e){
164

    
165
            }
166
        },
167
        {name:"background", text:"background", input:{type:"3", value:""}, 
168
            setParameter:function(e) {
169
                document.getElementById(e.id).style.background = e.value;
170
            }, 
171
            getParameter:function(e){
172

    
173
            }
174
        },
175
        {name:"size", text:"Size", 
176
            input:{type:"1", option:[{value:"btn-sm", text:"Small"}, {value:"btn-md", text:"Medium"}, {value:"btn-lg", text:"Large"}], value:"btn-sm"}, 
177
            setParameter:function(e) {
178
                function check(value) {
179
                    switch(value) {
180
                        case "small": return "btn-sm";
181
                        case "medium":  return "btn-md";
182
                        case "large":  return "btn-lg";
183
                    }
184
                    return value;
185
                }
186
                _class = check(e.value.toLowerCase());
187
                _prev = check(e.previousValue.toLowerCase())
188
                document.getElementById(e.id).classList.remove(_prev);
189
                document.getElementById(e.id).classList.add(_class);
190
            }, 
191
            getParameter:function(e){}
192
        },
193
        {name:"type", text:"Type", 
194
            input:{type:"1", 
195
                option:[{value:"btn-primary", text:"Primary"}, {value:"btn-secondary", text:"Secondary"}, {value:"btn-success", text:"Success"}, {value:"btn-danger", text:"Danger"}, {value:"btn-warning", text:"Warning"}, {value:"btn-info", text:"Info"}, {value:"btn-light", text:"Light"}, {value:"btn-dark", text:"Dark"}], value:"btn-primary"
196
            }, 
197
            setParameter:function(e) {
198
                document.getElementById(e.id).classList.add(e.value);
199
            }, 
200
            getParameter:function(e){}}
201
    ],
202
    callback:[
203
        {name:"click", text:"On click", 
204
            setCallback:"onclick"
205
        },
206
        {name:"mouseover", text:"On mouse over", 
207
            setCallback:function(obj) {
208
                document.getElementById(obj.id).onmouseover = obj.value;
209
            }
210
        },
211
        {name:"mouseout", text:"On mouse out", 
212
            setCallback:function(obj) {
213
                document.getElementById(obj.id).onmouseout = obj.value;
214
            }
215
        },
216
        {name:"mouseenter", text:"On mouse enter", 
217
            value:"/*Enter Your code here*/",
218
            setCallback:function(obj) {
219
                document.getElementById(obj.id).onmouseenter = obj.value;
220
            }
221
        }
222

    
223
    ],
224
    write_head_init:function(component){return "";},
225
    write_body_start:function(component){return '<button id="'+component.id+'" class="btn">';},
226
    write_body_end:function(component){return "</button>";},
227
    write_body_script:function(component){return ""},
228
    add_body_script:function(component){console.log('this is from button '+ component.id);}
229
};
230
PACKAGE.TEXTBOX = {
231
    name:"Textbox", text:"Textbox", children:false,
232
    parameter:[
233
        {name:"Property group 1", text:"Property group 1", children:[
234
            {name:"value", text:"value", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:"textbox"}},
235
            {name:"value2", text:"value2", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:"textbox"}},
236
        ]},
237
        {name:"size", text:"Size", 
238
            input:{type:"1", option:[{value:"form-control-sm", text:"Small"}, {value:"form-control-md", text:"Medium"}, {value:"form-control-lg", text:"Large"}], value:"form-control-sm"}, 
239
            setParameter:function(e) {
240
                document.getElementById(e.id).classList.add(e.value);
241
            }}, 
242
        {name:"placeholder", text:"placeholder", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:""}},
243
        {name:"custom parameter", text:"custom parameter", setParameter:function(e){}, getParameter:function(e){}, 
244
            input:{type:"custom", value:{},
245
                open:function(e) {
246
                    let div = document.createElement('div');
247
                    let button = document.createElement('button');
248
                    button.classList.add("btn", "btn-secondary");
249
                    button.innerHTML = "Add";
250
                    
251
                    let table = document.createElement("table");
252
                    table.classList.add("table", "table-bordered", "table-condensed", "table-hover");
253
                    let tbody = document.createElement("tbody");
254
                    table.appendChild(tbody);
255
                    button.onclick = function(e) {
256
                        let tr = document.createElement("tr");
257
                        let input = document.createElement("input");
258
                        input.classList.add("form-control");
259
                        let td = document.createElement("td");
260
                        td.appendChild(input);
261
                        tr.appendChild(td);
262
                        tbody.appendChild(tr);
263
                    };
264

    
265
                    div.appendChild(button);
266
                    div.appendChild(table);
267
                    e.container.appendChild(div);
268
                }, 
269
                save:function(e){
270
                    if(true) {
271
                        return undefined;
272
                    } else {
273
                        return {"value1":"123", "value2":"345"};
274
                    }
275
                }, 
276
            }
277
        },
278
        {   name:"test-checkbox", text:"test-checkbox", setParameter:function(e){}, getParameter:"getProperty", 
279
            input:{type:"2", option:[{value:"form-control-sm", text:"Small"}, {value:"form-control-md", text:"Medium"}, {value:"form-control-lg", text:"Large"}],
280
            value:["form-control-lg", "form-control-sm"]}
281
        },
282
    ],
283
    callback:[
284
        {
285
            name:"change", text:"on change handler", 
286
            setCallback:function(obj) {
287
                document.getElementById(obj.id).onchange = obj.value;
288
            }
289
        },
290
        { name:"Callback group1", text:"", children:[
291
                {name:"Callback1", "text":"callback 1", setCallback:function(e){}},
292
                {name:"Callback2", "text":"callback 2", setCallback:function(e){}}
293
            ]
294
        }
295
    ],
296
    write_head_init:function(component){},
297
    write_body_start:function(component){return '<input id="'+component.id+'" type="text" class="form-control">';},
298
    write_body_script:function(component){},
299
};
300
PACKAGE.DROPDOWN = {
301
    name:"Dropdown", text:"Dropdown", children:false,
302
    parameter:[
303
        {
304
            name:"option", text:"option", input:{type:"0", value:""}, setParameter:function(obj) {
305
                let option = obj.value.split(",").map(d=>d.trim());
306
                let select = document.getElementById(obj.id);
307
                select.querySelectorAll("option").forEach(function(d) {
308
                    select.removeChild(d);
309
                });
310

    
311
                for(let i=0;i<option.length;i++) {
312
                    let o = document.createElement("option");
313
                    o.innerHTML = option[i];
314
                    o.value = option[i];
315
                    select.appendChild(o);
316
                }
317

    
318
            }, getParameter:function(obj) {
319
                return document.getElementById(obj.id).value;
320
            }
321
        }
322
    ],
323
    callback:[
324
        {name:"onchange", title:"onchange", 
325
            setCallback:function(obj) {
326
                document.getElementById(obj.id).onchange = obj.value;
327
            }
328
        }
329
    ],
330
    write_head_init:function(component){},
331
    write_body_start:function(component){return "<select id='"+component.id+"' class='form-control form-control-sm'>";},
332
    write_body_end:function(component){return "</select>";},
333
    write_body_script:function(component){}
334
};
335
PACKAGE.MENU = {
336
    name:"Menu", text:"Menu", children:["MENU_PARENT", "MENU_PARENT_2", "MENU_ITEM"]
337
}
338
PACKAGE.MENU_PARENT = {
339
    name:"Parent menu", text:"Menu", children:true,
340
    parameter:[],
341
    callback:[],
342
    write_head_init:function(e) {
343
        return "<script>"
344
            + "var _xxx = null;"
345
            + "</script>";
346
    },
347
    write_body_start:function(e) {
348
        return '<ul class="nav nav-tabs" id="'+e.id+'"></ul><div class="tab-content" id="'+e.id+"-tab"+'">';
349
    },
350
    write_body_end:function(e) {
351
        return '</div>';
352
    }
353
};
354
PACKAGE.MENU_PARENT_2 = {
355
    name:"Parent menu vertical", text:"Menu", children:true,
356
    parameter:[],
357
    callback:[],
358
    write_head_init:function(e) {
359
        return "<script>"
360
            + "var _xxx = null;"
361
            + "</script>";
362
    },
363
    write_body_start:function(e) {
364
        return '<div class="nav flex-column nav-pills" id="'+e.id+'" role="tablist" aria-orientation="vertical"></div><div class="tab-content" id="'+e.id+"-tab"+'">';
365
    },
366
    write_body_end:function(e) {
367
        return '</div>';
368
    }
369
};
370
PACKAGE.MENU_ITEM = {
371
    name:"Menu-item", text:"Menu-item", children:true,
372
    parameter:[],
373
    callback:[],
374
    write_body_start:function(e) {
375
        return '<div class="tab-pane fade" id="'+e.id+'" role="tabpanel" >'+e.id;
376
    },
377
    write_body_end:function(e) {
378
        return '</div>';
379
    },    
380
    add_body_script:function(e) {
381
        if(_xxx==null) {
382
            _xxx = e.id;
383
        }
384
        let ul = document.getElementById(e.id).parentNode.previousSibling;
385
        let a = document.createElement("a");
386
        a.classList.add("nav-link");
387
        //may be we need to check parent type;
388
        if(ul.classList.contains('nav-pills')) {
389
            a.setAttribute("data-toggle", "pill");
390
            a.setAttribute("role", "tab");
391
            a.setAttribute("aria-selected", "false");
392
            a.setAttribute("aria-controls", e.id);
393
            a.setAttribute("href", "#"+e.id);
394
            a.innerHTML = e.id;
395
            ul.appendChild(a);            
396
            $(ul.firstChild).tab('show');
397
        } else {
398
            let li = document.createElement("li");
399
            a.setAttribute("data-toggle", "tab");
400
            a.setAttribute("role", "tab");
401
            a.setAttribute("aria-selected", "false");
402
            a.setAttribute("aria-controls", e.id);
403
            a.setAttribute("href", "#"+e.id);
404
            a.innerHTML = e.id;
405
            li.classList.add("nav-item");
406
            li.appendChild(a);
407
            li.setAttribute("aria-labelledby", ul.id);
408
            ul.appendChild(li);        
409
            $(ul.firstChild.firstChild).tab('show');    
410
        }
411
        //$('#'+ul.getAttribute(e.id)+' li:first-child a'));
412
        
413
    }
414
};
(2-2/4)