1 /* 2 Copyright 2008-2018 3 Matthias Ehmann, 4 Michael Gerhaeuser, 5 Carsten Miller, 6 Bianca Valentin, 7 Alfred Wassermann, 8 Peter Wilfahrt 9 10 This file is part of JSXGraph. 11 12 JSXGraph is free software dual licensed under the GNU LGPL or MIT License. 13 14 You can redistribute it and/or modify it under the terms of the 15 16 * GNU Lesser General Public License as published by 17 the Free Software Foundation, either version 3 of the License, or 18 (at your option) any later version 19 OR 20 * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT 21 22 JSXGraph is distributed in the hope that it will be useful, 23 but WITHOUT ANY WARRANTY; without even the implied warranty of 24 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 GNU Lesser General Public License for more details. 26 27 You should have received a copy of the GNU Lesser General Public License and 28 the MIT License along with JSXGraph. If not, see <http://www.gnu.org/licenses/> 29 and <http://opensource.org/licenses/MIT/>. 30 */ 31 32 33 /*global JXG: true, define: true, window: true*/ 34 /*jslint nomen: true, plusplus: true*/ 35 36 /* depends: 37 jxg 38 utils/env 39 utils/type 40 */ 41 42 /** 43 * @fileoverview In this file the Text element is defined. 44 */ 45 46 define([ 47 'jxg', 'utils/env', 'utils/type' 48 ], function (JXG, Env, Type) { 49 50 "use strict"; 51 52 var priv = { 53 CheckboxChangeEventHandler: function () { 54 this._value = this.rendNodeCheckbox.checked; 55 this.board.update(); 56 } 57 }; 58 59 /** 60 * @class This element is used to provide a constructor for special texts containing a form checkbox element. 61 * 62 * @pseudo 63 * @description 64 * @name Checkbox 65 * @augments Text 66 * @constructor 67 * @type JXG.Text 68 * 69 * @param {number,function_number,function_String_String} x,y,label Parent elements for checkbox elements. 70 * <p> 71 * x and y are the coordinates of the lower left corner of the text box. 72 * The position of the text is fixed, 73 * x and y are numbers. The position is variable if x or y are functions. 74 * <p> 75 * The label of the input element may be given as string. 76 * <p> 77 * The value of the checkbox can be controlled with the attribute <tt>checked</tt> 78 * <p>The HTML node can be accessed with <tt>element.rendNodeCheckbox</tt> 79 * 80 * @example 81 * // Create a checkbox element at position [0,3]. 82 * var checkbox = board.create('checkbox', [0, 3, 'Change Y'], {}); 83 * var p = board.create('point', [ 84 * function(){ return 0.5;}, // X-coordinate 85 * function() { 86 * y = 0.5; 87 * if (checkbox.Value()) { 88 * y += 0.5; 89 * } 90 * return y; 91 * }]); 92 * </pre><div class="jxgbox" id="0e835e0b-ed0c-4b85-b682-78158c0e6f5c" style="width: 300px; height: 300px;"></div> 93 * <script type="text/javascript"> 94 * (function() { 95 * var t1_board = JXG.JSXGraph.initBoard('0e835e0b-ed0c-4b85-b682-78158c0e6f5c', {boundingbox: [-3, 6, 5, -3], axis: true, showcopyright: false, shownavigation: false}); 96 * var checkbox = t1_board.create('checkbox', [0, 3, 'Change Y'], {}); 97 * var p = t1_board.create('point', [ 98 * function(){ return 0.5;}, // X-coordinate 99 * function() { 100 * y = 0.5; 101 * if (checkbox.Value()) { 102 * y += 0.5; 103 * } 104 * return y; 105 * }]); 106 * })(); 107 * </script><pre> 108 * 109 * The checkbox can be supplied with custom-made events by using the property rendNodeCheckbox. 110 * @example 111 * var checkbox = board.create('checkbox', [0, 4, 'Click me']), 112 * p = board.create('point', [1, 1]); 113 * 114 * JXG.addEvent(checkbox.rendNodeCheckbox, 'change', function() { 115 * if (this.Value()) { 116 * p.moveTo([4, 1]); 117 * } else { 118 * p.moveTo([1, 1]); 119 * } 120 * }, checkbox); 121 * </pre><div class="jxgbox" id="b2f2345a-057d-44ce-bd7a-6aaff70bc810" style="width: 300px; height: 300px;"></div> 122 * <script type="text/javascript"> 123 * (function() { 124 * var board = JXG.JSXGraph.initBoard('b2f2345a-057d-44ce-bd7a-6aaff70bc810', {boundingbox: [-3, 6, 5, -3], axis: true, showcopyright: false, shownavigation: false}); 125 * var checkbox = board.create('checkbox', [0, 4, 'Click me']), 126 * p = board.create('point', [1, 1]); 127 * 128 * JXG.addEvent(checkbox.rendNodeCheckbox, 'change', function() { 129 * if (this.Value()) { 130 * p.moveTo([4, 1]); 131 * } else { 132 * p.moveTo([1, 1]); 133 * } 134 * }, checkbox); 135 * })(); 136 * </script><pre> 137 */ 138 JXG.createCheckbox = function (board, parents, attributes) { 139 var t, par, 140 attr = Type.copyAttributes(attributes, board.options, 'checkbox'); 141 142 //if (parents.length !== 3) { 143 //throw new Error("JSXGraph: Can't create checkbox with parent types '" + 144 // (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." + 145 // "\nPossible parents are: [[x,y], label]"); 146 //} 147 148 par = [parents[0], parents[1], 149 '<span style="display:inline">' + 150 '<input type="checkbox" /><label for=""></label>' + 151 '</span>' 152 ]; 153 154 //t = JXG.createText(board, par, attr); 155 t = board.create('text', par, attr); 156 t.type = Type.OBJECT_TYPE_CHECKBOX; 157 158 t.rendNodeCheckbox = t.rendNode.childNodes[0].childNodes[0]; 159 t.rendNodeLabel = t.rendNode.childNodes[0].childNodes[1]; 160 161 t.rendNodeTag = t.rendNodeCheckbox; // Needed for unified treatment in setAttribute 162 t.rendNodeTag.disabled = !!attr.disabled; 163 164 t.rendNodeLabel.innerHTML = parents[2]; 165 t.rendNodeCheckbox.id = t.rendNode.id + '_checkbox'; 166 t.rendNodeLabel.id = t.rendNode.id + '_label'; 167 t.rendNodeLabel.setAttribute('for', t.rendNodeCheckbox.id); 168 169 // This sets the font-size of the checkbox itself 170 t.visPropOld.fontsize = "0px"; 171 board.renderer.updateTextStyle(t, false); 172 173 t.rendNodeCheckbox.checked = attr.checked; 174 175 t._value = attr.checked; 176 t.Value = function () { 177 return this._value; 178 }; 179 180 t.update = function () { 181 if (this.needsUpdate) { 182 JXG.Text.prototype.update.call(this); 183 this._value = this.rendNodeCheckbox.checked; 184 } 185 return this; 186 }; 187 188 Env.addEvent(t.rendNodeCheckbox, 'change', priv.CheckboxChangeEventHandler, t); 189 190 return t; 191 }; 192 193 JXG.registerElement('checkbox', JXG.createCheckbox); 194 195 return { 196 createCheckbox: JXG.createCheckbox 197 }; 198 }); 199