git @ Cat's Eye Technologies Jaccia / rel_1_1_2017_1027
In demos, PresetManager allows starting configuration to be selected. Chris Pressey 3 years ago
3 changed file(s) with 207 addition(s) and 24 deletion(s). Raw diff Collapse all Expand all
11 <head>
22 <meta charset="utf-8">
33 <title>Jaccia Demo</title>
4 <style>
5 .example {
6 display: none;
7 }
8 </style>
49 </head>
510 <body>
611
1419 <button id="reset">Reset</button>
1520 Speed: <input id="speed" type="range" min="0" max="200" value="0" />
1621
17 <textarea id="input" rows="10">
18 ########S##
19 #:::::::::#
20 #:###:###:#
21 #:#:#:::#:#
22 #:#:#:#:###
23 #:::#:#:#:#
24 #####:#:#:#
25 #:#:::#:::#
26 #:#:###:###
27 #:::#:::::#
28 #########F#
29 </textarea>
22 Starting configuration: <select id="select_source"></select>
23
24 <textarea id="input" rows="10"></textarea>
3025
3126 <div id="display_container">
3227 Depict with:
4136 </canvas>
4237 </div>
4338
39
40 <div class="example" id="solveit"
41 >########S##
42 #:::::::::#
43 #:###:###:#
44 #:#:#:::#:#
45 #:#:#:#:###
46 #:::#:#:#:#
47 #####:#:#:#
48 #:#:::#:::#
49 #:#:###:###
50 #:::#:::::#
51 #########F#
52 </div>
53
54
55 <div class="example" id="nonunique"
56 >####S####
57 #:::::::#
58 #:#####:#
59 #:#:#:#:#
60 #:#:#:#:#
61 #:::::::#
62 ####F####
63 </div>
64
65
4466 </body>
4567 <script src="yoob/controller.js"></script>
4668 <script src="yoob/playfield.js"></script>
4769 <script src="yoob/playfield-html-view.js"></script>
4870 <script src="yoob/playfield-canvas-view.js"></script>
71 <script src="yoob/preset-manager.js"></script>
4972 <script src="../script/jaccia.js"></script>
5073 <script>
5174 var pf;
127150 'source': 'input',
128151 'display': 'display_container'
129152 });
130
153
154 var p = (new yoob.PresetManager()).init({
155 selectElem: document.getElementById("select_source"),
156 controller: c
157 }).populateFromClass('example').select('test3');
158
131159 c.click_load();
132160 </script>
11 <head>
22 <meta charset="utf-8">
33 <title>Jacciata Demo</title>
4 <style>
5 .example {
6 display: none;
7 }
8 </style>
49 </head>
510 <body>
611
1419 <button id="reset">Reset</button>
1520 Speed: <input id="speed" type="range" min="0" max="200" value="0" />
1621
17 <textarea id="input" rows="10">
18 ####S####
19 #:::::::#
20 #:#####:#
21 #:#:::#:#
22 #:#:#:#:#
23 #:::#:::#
24 ##F######
25 </textarea>
22 Starting configuration: <select id="select_source"></select>
23
24 <textarea id="input" rows="10"></textarea>
2625
2726 <div id="display_container">
2827 Depict with:
3736 </canvas>
3837 </div>
3938
39
40 <div class="example" id="solveit"
41 >########S##
42 #:::::::::#
43 #:###:###:#
44 #:#:#:::#:#
45 #:#:#:#:###
46 #:::#:#:#:#
47 #####:#:#:#
48 #:#:::#:::#
49 #:#:###:###
50 #:::#:::::#
51 #########F#
52 </div>
53
54
55 <div class="example" id="nonunique"
56 >####S####
57 #:::::::#
58 #:#####:#
59 #:#:#:#:#
60 #:#:#:#:#
61 #:::::::#
62 ####F####
63 </div>
64
65
4066 </body>
4167 <script src="yoob/controller.js"></script>
4268 <script src="yoob/playfield.js"></script>
4369 <script src="yoob/playfield-html-view.js"></script>
4470 <script src="yoob/playfield-canvas-view.js"></script>
71 <script src="yoob/preset-manager.js"></script>
4572 <script src="../script/jacciata.js"></script>
4673 <script>
4774 var pf;
126153 'source': 'input',
127154 'display': 'display_container'
128155 });
129
156
157 var p = (new yoob.PresetManager()).init({
158 selectElem: document.getElementById("select_source"),
159 controller: c
160 }).populateFromClass('example').select('test3');
161
130162 c.click_load();
131163 </script>
0 /*
1 * This file is part of yoob.js version 0.6
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * An object for managing a set of "presets" -- which, for an esolang,
9 * might be example programs; for an emulator, might be ROM images;
10 * for a control panel, may be pre-selected combinations of settings;
11 * and so forth.
12 *
13 * Mostly intended to be connected to a yoob.Controller -- but need not be.
14 */
15 yoob.PresetManager = function() {
16 /*
17 * The single argument is a dictionary (object) where the keys are:
18 *
19 * selectElem: (required) the <select> DOM element that will be
20 * populated with the available example programs. Selecting one
21 * will cause the .select() method of this manager to be called.
22 * it will also call .onselect if that method is present.
23 *
24 * controller: a yoob.Controller (or compatible object) that will
25 * be informed of the selection, if no callback was supplied
26 * when the item was added.
27 */
28 this.init = function(cfg) {
29 this.selectElem = cfg.selectElem;
30 this.controller = cfg.controller || null;
31 this.clear();
32 var $this = this;
33 this.selectElem.onchange = function() {
34 $this._select(this.options[this.selectedIndex].value);
35 }
36 return this;
37 };
38
39 /*
40 * Removes all options from the selectElem, and their associated data.
41 */
42 this.clear = function() {
43 this.reactTo = {};
44 while (this.selectElem.firstChild) {
45 this.selectElem.removeChild(this.selectElem.firstChild);
46 }
47 this.add('(select one...)', function() {});
48 return this;
49 };
50
51 /*
52 * Adds a preset to this PresetManager. When it is selected,
53 * the given callback will be called, being passed the id as the
54 * first argument. If no callback is provided, a default callback,
55 * which loads the contents of the element with the specified id
56 * into the configured yoob.Controller, will be used.
57 */
58 this.add = function(id, callback) {
59 var opt = document.createElement("option");
60 opt.text = id;
61 opt.value = id;
62 this.selectElem.options.add(opt);
63 var $this = this;
64 this.reactTo[id] = callback || function(id) {
65 $this.controller.click_stop(); // in case it is currently running
66 $this.controller.loadSourceFromHTML(
67 document.getElementById(id).innerHTML
68 );
69 };
70 return this;
71 };
72
73 /*
74 * Called by the selectElem's onchange event. For sanity, you should
75 * probably not call this yourself.
76 */
77 this._select = function(id) {
78 this.reactTo[id](id);
79 if (this.onselect) {
80 this.onselect(id);
81 }
82 };
83
84 /*
85 * Call this to programmatically select an item. This will change
86 * the selected option in the selectElem and trigger the appropriate
87 * callback in this PresetManager.
88 */
89 this.select = function(id) {
90 var i = 0;
91 var opt = this.selectElem.options[i];
92 while (opt) {
93 if (opt.value === id) {
94 this.selectElem.selectedIndex = i;
95 this._select(id);
96 return this;
97 }
98 i++;
99 opt = this.selectElem.options[i];
100 }
101 // if not found, select the "(select one...)" option
102 this.selectElem.selectedIndex = 0;
103 return this;
104 };
105
106 /*
107 * When called, every DOM element in the document with the given
108 * class will be considered a preset, and the manager
109 * will be populated with these. Generally the CSS for the class
110 * will have `display: none` and the elements will be <div>s.
111 *
112 * callback is as described for the .add() method.
113 */
114 this.populateFromClass = function(className, callback) {
115 var elements = document.getElementsByClassName(className);
116 for (var i = 0; i < elements.length; i++) {
117 var e = elements[i];
118 this.add(e.id, callback);
119 }
120 return this;
121 };
122 };