git @ Cat's Eye Technologies HTML5-Gewgaws / e38dc89
Update Eine Kleine Glitchfraktal's yoob.js dependency to 0.9. Chris Pressey 9 years ago
3 changed file(s) with 168 addition(s) and 1 deletion(s). Raw diff Collapse all Expand all
+123
-0
common-yoob.js-0.9/preset-manager.js less more
0 /*
1 * This file is part of yoob.js version 0.8
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 * setPreset: (optional) a callback which will be called whenever
25 * a new preset is selected. If this is not given, an individual
26 * callback must be supplied with each preset as it is added.
27 */
28 this.init = function(cfg) {
29 this.selectElem = cfg.selectElem;
30 if (cfg.setPreset) {
31 this.setPreset = cfg.setPreset;
32 }
33 this.clear();
34 var $this = this;
35 this.selectElem.onchange = function() {
36 $this._select(this.options[this.selectedIndex].value);
37 }
38 return this;
39 };
40
41 /*
42 * Removes all options from the selectElem, and their associated data.
43 */
44 this.clear = function() {
45 this.reactTo = {};
46 while (this.selectElem.firstChild) {
47 this.selectElem.removeChild(this.selectElem.firstChild);
48 }
49 this.add('(select one...)', function() {});
50 return this;
51 };
52
53 /*
54 * Adds a preset to this PresetManager. When it is selected,
55 * the given callback will be called, being passed the id as the
56 * first argument. If no callback is provided, the default callback,
57 * configured with setPreset in the init() configuration, will be used.
58 */
59 this.add = function(id, callback) {
60 var opt = document.createElement("option");
61 opt.text = id;
62 opt.value = id;
63 this.selectElem.options.add(opt);
64 var $this = this;
65 this.reactTo[id] = callback || this.setPreset;
66 return this;
67 };
68
69 this.setPreset = function(id) {
70 alert("No default setPreset callback configured");
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 };
+44
-0
common-yoob.js-0.9/splash-screen.js less more
0 /*
1 * This file is part of yoob.js version 0.7
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 adapter-type thing which displays a div element with some inner HTML
9 * (typically containing a message or logo or such) and a "Proceed" button,
10 * all in place of a given element. When the button is clicked, the div is
11 * hidden, the given element is displayed, and the passed-in `onproceed`
12 * callback is invoked.
13 *
14 * The intention is to allow a "splash screen", which may contain a disclaimer
15 * or similar, warning of epileptic seizures or nudity or whatever, before the
16 * "main canvas" or whatever is actually displayed and started. Yeah.
17 */
18 yoob.showSplashScreen = function(cfg) {
19 var elem = document.getElementById(cfg.elementId);
20 var coveringDiv = document.createElement("div");
21 coveringDiv.style.left = elem.offsetLeft + 'px';
22 coveringDiv.style.top = elem.offsetTop + 'px';
23 coveringDiv.style.width = elem.offsetWidth + 'px';
24 coveringDiv.style.height = elem.offsetHeight + 'px';
25 coveringDiv.style.position = "absolute";
26 coveringDiv.style.border = elem.style.border;
27 coveringDiv.style.background = cfg.background || '#ffffff';
28 coveringDiv.style.textAlign = "center";
29 if (parseInt(elem.style.zIndex) === NaN) {
30 coveringDiv.style.zIndex = "100";
31 } else {
32 coveringDiv.style.zIndex = (parseInt(elem.style.zIndex) + 1).toString();
33 }
34 coveringDiv.innerHTML = cfg.innerHTML;
35 var button = document.createElement("button");
36 button.innerHTML = cfg.buttonText || "Proceed";
37 button.onclick = function() {
38 coveringDiv.style.display = 'none';
39 (cfg.onproceed || function() {})();
40 };
41 coveringDiv.appendChild(button);
42 document.body.appendChild(coveringDiv);
43 };
+1
-1
eine-kleine-glitchfraktal/index.html less more
1111 </body>
1212 <script src="eine-kleine-glitchfraktal.js"></script>
1313 <script>
14 launch('../common-yoob.js-0.6/', 'container');
14 launch('../common-yoob.js-0.9/', 'container');
1515 </script>