1 /* 2 Copyright 2008-2015 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 * 77 * @example 78 * // Create a checkbox element at position [0,3]. 79 * var checkbox = board.create('checkbox', [0, 3, 'Change Y'], {}); 80 * var p = board.create('point', [ 81 * function(){ return 0.5;}, // X-coordinate 82 * function() { 83 * y = 0.5; 84 * if (checkbox.Value()) { 85 * y += 0.5; 86 * } 87 * return y; 88 * }]); 89 * </pre><div id="0e835e0b-ed0c-4b85-b682-78158c0e6f5c" style="width: 300px; height: 300px;"></div> 90 * <script type="text/javascript"> 91 * var t1_board = JXG.JSXGraph.initBoard('0e835e0b-ed0c-4b85-b682-78158c0e6f5c', {boundingbox: [-3, 6, 5, -3], axis: true, showcopyright: false, shownavigation: false}); 92 * var checkbox = t1_board.create('checkbox', [0, 3, 'Change Y'], {}); 93 * var p = t1_board.create('point', [ 94 * function(){ return 0.5;}, // X-coordinate 95 * function() { 96 * y = 0.5; 97 * if (checkbox.Value()) { 98 * y += 0.5; 99 * } 100 * return y; 101 * }]); 102 * </script><pre> 103 */ 104 JXG.createCheckbox = function (board, parents, attributes) { 105 var t, par, 106 attr = Type.copyAttributes(attributes, board.options, 'checkbox'); 107 108 //if (parents.length !== 3) { 109 //throw new Error("JSXGraph: Can't create checkbox with parent types '" + 110 // (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." + 111 // "\nPossible parents are: [[x,y], label]"); 112 //} 113 114 par = [parents[0], parents[1], 115 '<form style="display:inline">' + 116 '<input type="checkbox" /><span></span>' + 117 '</form>' 118 ]; 119 120 t = JXG.createText(board, par, attr); 121 t.type = Type.OBJECT_TYPE_CHECKBOX; 122 123 t.rendNodeForm = t.rendNode.childNodes[0]; 124 t.rendNodeForm.id = t.rendNode.id + '_form'; 125 126 t.rendNodeCheckbox = t.rendNodeForm.childNodes[0]; 127 t.rendNodeCheckbox.id = t.rendNode.id + '_checkbox'; 128 129 t.rendNodeLabel = t.rendNodeForm.childNodes[1]; 130 t.rendNodeLabel.id = t.rendNode.id + '_label'; 131 t.rendNodeLabel.innerHTML = parents[2]; 132 133 t._value = false; 134 135 t.Value = function () { 136 return this._value; 137 }; 138 139 t.update = function () { 140 if (this.needsUpdate) { 141 this._value = this.rendNodeCheckbox.checked; 142 } 143 return this; 144 }; 145 146 Env.addEvent(t.rendNodeCheckbox, 'change', priv.CheckboxChangeEventHandler, t); 147 148 return t; 149 }; 150 151 JXG.registerElement('checkbox', JXG.createCheckbox); 152 153 return { 154 createCheckbox: JXG.createCheckbox 155 }; 156 }); 157