jsonHTML/example.html at master · trillobite/jsonHTML · GitHub

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <title>jsonHTML EXAMPLE!</title>
        <link rel='stylesheet' type='text/css' href='dropDown.css'>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <!--MAKE SURE TO INCLUDE JQUERY!!-->

        <!--<script type='text/javascript' src='micronDB.js'></script>-->
        <script type='text/javascript' src='jsonHTML.min.js'></script>
        <!--<script type='text/javascript' src='codenameToadFish.js'></script>-->
        <script>

            /*
                Here is an example of a drop-down menu.
                And you thought this would require a lot of code?
            */

            var tinySquare = $jConstruct('div');

            var dropDown = toadFish.drop(tinySquare);

            var colors = ['red', 'yellow', 'green', 'blue', 'black', 'white'];

            for(var i = 0; i < colors.length; ++i) {
                dropDown.addOption({
                    name: colors[i],
                    event: {
                        func: function() {
                            var color = arrdb.get(this.id).text;
                            $('body').css({
                                'background-color': color,
                            });
                        },
                        type: 'click',
                    },
                });
            }


            $('document').ready(function() {
                dropDown.appendTo('body');
            });

            /* end of drop-down menu code */

        </script>

        <script>
            $(document).ready(function () {

                //this is the object which you see on the screen!
                var main = $jConstruct('div', {
                    text: 'click me!', //this is the default text.
                    id: 'exampleObjectID',
                });

                //while the users mouse cursor is over this object.
                main.event('mouseover', function() {
                    main.css({
                        'color': 'green',
                    });
                });

                //when the mouse cursor leaves this object.
                main.event('mouseout', function() {
                    main.css({
                        'color': 'black',
                    });
                });

                //when the user clicks, mutate this object into a textbox.
                main.event('click', function() {
                    if(main.type == 'div') {
                        main.text = 'type some text!'
                        main.type = 'textbox';
                        main.refresh();
                        main.event('select');
                        //$('#'+this.id).select(); //causes the textbox to be selected.
                    }
                });

                //if the user hits the enter key, do this!
                main.event('keypress', function(e) {
                    if(e.keyCode==13){
                        //just trigger the focusout to mutate the div back into a div!
                        $('#'+this.id).trigger('focusout');
                    }
                });

                //when the user is done typing, and they click outside of the box.
                main.event('focusout', function() {
                    if(main.type == 'textbox') {
                        var tmp = $('#'+main.id)[0].value;
                        main.text = tmp;
                        main.type = 'div';
                        main.refresh();
                    }
                });

                //these are the styles to be applied to the object.
                main.css({
                    'font-family': 'arial',
                    'text-align': 'center',
                    'border': '1px solid black',
                    'border-radius': '5px',
                    'width': '340px',
                    'cursor': 'pointer',
                    'margin': '10px',
                });


                //Without this, upon refresh, the object will re-appear at the bottom of
                //the project! The container holds it in one place.
                var appendContainer = $jConstruct('div').addChild(main);

                //can append anywhere, even to the document body!
                appendContainer.appendTo('body');

                /*
                    See, that was not all that bad, was it? It should be quite simple,
                    and become more simple as you contine to work with jsonHTML.

                    Now, try out micronDB! Open your chrome console or firefox console,
                    and type this:

                    arrdb.query({
                        where: {
                            type: 'div',
                        }
                    });

                    If it returns an empty array, you probably need to click somewhere
                    within the document body, as the main element may still be a textbox.

                    If everything is correct, it will search for a jsonHTML object which
                    is set to be a DIV. It will return an array with a single element,
                    which should be the main object which you see above in the code.

                    You can also call for a document directly if you have it's ID. When
                    you have the object's ID, it simply uses the standard math for hash
                    tables and brings your jsonHTML object back instantly, with no
                    searching. This is the command:

                    arrdb.get('exampleObjectID');  //go ahead and try it in your console!

                    Notice how with the get command, it returns a single object not
                    contained in an array!
                */
            });
        </script>

        <script>

            /*
                toadFish example code!
                Notice how micronDB get commands come in handy for this instance.

                toadFish generates grid layouts, and within each cell you can place a jsonHTML object.
                This may be useful for anything that requires a static structure.
            */

            var exampleCSS = {
                'font-family': 'Arial',
                'width': '300px',
                'height': '200px',
                'margin': '10px',
                'padding': '20px',
                'text-align': 'center',
                'align': 'inline-block',
                'border': '1px solid black',
                'border-radius': '5px',
            };

            //this allows me to assign the same css to each object.
            var cellCSS = function(input) { //input variable allows me to change the width of the object at will.
                return {
                    'width': input,
                    'height': '20px',
                    'background-color': 'white',
                    'border': '1px solid black',
                    'border-radius': '5px',
                    'cursor': 'pointer',
                }
            };

            var singleDimension = [];
            for(var r = 0; r < 5; ++r) {
                singleDimension[r] = $jConstruct('div').css(cellCSS('300px')).event('click', function() {
                    var thisObj = arrdb.get(this.id);
                    if(this.style['background-color'] == 'white') {
                        thisObj.css({
                            'background-color': 'gray',
                        });
                    } else {
                        thisObj.css({
                            'background-color': 'white',
                        });
                    }
                });
            }

            var tiles = toadFish.structure(singleDimension, 'collectionTestingName2');
            var tilesContainer = $jConstruct('div').addChild($jConstruct('div', {
                text: 'Example of making tiles',
            })).addChild(tiles).css(exampleCSS);


            var dimensional = toadFish.create2DArray(8); //Create a 2D array with four rows.

            for(var r = 0; r < dimensional.length; ++r) { //for every row in dimensional.
                for(var c = 0; c < 8; ++c) { //I want four columns, so loop four times.
                    dimensional[r][c] = $jConstruct('div').css(cellCSS('20px')).event('click', function() { //when the user clicks this cell, execute what is below:
                        console.log(this); //notice that 'this' returns the html object.
                        var thisObj = arrdb.get(this.id); //to get the jsonHTML object, we just grab it by the same id.
                        if(this.style['background-color'] == 'white') { //When the background is white, make it gray.
                            thisObj.css({
                                'background-color': 'gray',
                            }); //refresh not required for css changes.
                        } else { //when it is any other color, just change it back to white!
                            thisObj.css({
                                'background-color': 'white',
                            }); //refresh not required for css changes.
                        }
                    });
                }
            }

            var grid = toadFish.structure(dimensional, 'collectionTestingName'); //now convert it all into a real grid
            var gridContainer = $jConstruct('div').addChild($jConstruct('div', {
                text: 'Example of making a grid',
            })).addChild(grid).css(exampleCSS);

            $('document').ready(function() {
                tilesContainer.appendTo('body');
                gridContainer.appendTo('body'); //place it onto the DOM.
            });

        </script>


    </head>
        <body></body>
</html>
<!-- View full license in LICENSE.md
             )
c            (
o        )   )
p        (           v1.3.1
y    .---------------------.
r    |        _____        |___
i    |     .'`_,-._`'.      __ \
g    |    /  ( [ ] )  \    |  ||
h    |   /.-""`( )`""-.\   |  ||
t    |  ' <'```(.)```'> '  | _||
     |    <'```(.)```'>    |/ _/
2    |     <'``(.)``'>      ./
0    |      <``\_/``>      |
1    |       `'---'`       |
6    \github.com/trillobite/
       \_________________/      Keep it black, keep it free. -->