1 /* 2 Copyright 2008-2017 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 InputInputEventHandler: function (evt) { 54 this._value = this.rendNodeInput.value; 55 this.board.update(); 56 } 57 }; 58 59 /** 60 * @class This element is used to provide a constructor for special texts containing a form input element. 61 * <p> 62 * If the width of element is set with the attribute "cssStyle", the width of the label must be added. 63 * @pseudo 64 * @description 65 * @name Input 66 * @augments Text 67 * @constructor 68 * @type JXG.Text 69 * 70 * @param {number,function_number,function_String_String} x,y,value,label Parent elements for input elements. 71 * <p> 72 * x and y are the coordinates of the lower left corner of the text box. 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 default value of the input element may be given as string. 76 * <p> 77 * The label of the input element may be given as string. 78 * 79 * @example 80 * // Create an input element at position [1,4]. 81 * var input = board.create('input', [0, 1, 'sin(x)*x', 'f(x)='], {cssStyle: 'width: 100px'}); 82 * var f = board.jc.snippet(input.Value(), true, 'x', false); 83 * var graph = board.create('functiongraph',[f, 84 * function() {text:dsddfghj 85 * var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board); 86 * return c.usrCoords[1]; 87 * }, 88 * function() { 89 * var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board); 90 * return c.usrCoords[1]; 91 * } 92 * ]); 93 * 94 * board.create('text', [1, 3, '<button onclick="updateGraph()">Update graph</button>']); 95 * 96 * var updateGraph = function() { 97 * graph.Y = board.jc.snippet(input.Value(), true, 'x', false); 98 * graph.updateCurve(); 99 * board.update(); 100 * } 101 * </pre><div class="jxgbox" id="c70f55f1-21ba-4719-a37d-a93ae2943faa" style="width: 500px; height: 300px;"></div> 102 * <script type="text/javascript"> 103 * var t1_board = JXG.JSXGraph.initBoard('c70f55f1-21ba-4719-a37d-a93ae2943faa', {boundingbox: [-3, 6, 5, -3], axis: true, showcopyright: false, shownavigation: false}); 104 * var input = t1_board.create('input', [1, 4, 'sin(x)*x', 'f(x)='], {cssStyle: 'width: 100px'}); 105 * var f = t1_board.jc.snippet(input.Value(), true, 'x', false); 106 * var graph = t1_board.create('functiongraph',[f, 107 * function() { 108 * var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],t1_board); 109 * return c.usrCoords[1]; 110 * }, 111 * function() { 112 * var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[t1_board.canvasWidth,0],t1_board); 113 * return c.usrCoords[1]; 114 * } 115 * ]); 116 * 117 * t1_board.create('text', [1, 3, '<button onclick="updateGraph()">Update graph</button>']); 118 * 119 * var updateGraph = function() { 120 * graph.Y = t1_board.jc.snippet(input.Value(), true, 'x', false); 121 * graph.updateCurve(); 122 * t1_board.update(); 123 * } 124 * </script><pre> 125 */ 126 JXG.createInput = function (board, parents, attributes) { 127 var t, par, 128 attr = Type.copyAttributes(attributes, board.options, 'input'); 129 130 //if (parents.length !== 4) { 131 //throw new Error("JSXGraph: Can't create input with parent types '" + 132 // (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." + 133 // "\nPossible parents are: [x, y, value, label]"); 134 //} 135 136 par = [parents[0], parents[1], 137 '<form style="display:inline; white-space:nowrap; padding:0px;">' + 138 '<span></span><input type="text" maxlength="' + 139 attr.maxlength + 140 '" style="width:100%"/>' + 141 '</form>' 142 ]; 143 144 //t = JXG.createText(board, par, attr); 145 t = board.create('text', par, attr); 146 t.type = Type.OBJECT_TYPE_INPUT; 147 148 t.rendNodeForm = t.rendNode.childNodes[0]; 149 t.rendNodeForm.id = t.rendNode.id + '_form'; 150 151 t.rendNodeLabel = t.rendNodeForm.childNodes[0]; 152 t.rendNodeLabel.id = t.rendNode.id + '_label'; 153 t.rendNodeLabel.innerHTML = parents[3]; 154 155 t.rendNodeInput = t.rendNodeForm.childNodes[1]; 156 t.rendNodeInput.id = t.rendNode.id + '_input'; 157 t.rendNodeInput.value = parents[2]; 158 159 t.rendNodeTag = t.rendNodeInput; // Needed for unified treatment in setAttribute 160 t.rendNodeTag.disabled = !!attr.disabled; 161 162 // This sets the font-size of the input HTML element 163 t.visPropOld.fontsize = "0px"; 164 board.renderer.updateTextStyle(t, false); 165 166 t._value = parents[2]; 167 168 t.Value = function () { 169 return this._value; 170 }; 171 172 t.update = function () { 173 if (this.needsUpdate) { 174 this._value = this.rendNodeInput.value; 175 } 176 return this; 177 }; 178 179 Env.addEvent(t.rendNodeInput, 'input', priv.InputInputEventHandler, t); 180 181 Env.addEvent(t.rendNodeInput, 'mousedown', function(evt) { evt.stopPropagation(); }, t); 182 Env.addEvent(t.rendNodeInput, 'touchstart', function(evt) { evt.stopPropagation(); }, t); 183 Env.addEvent(t.rendNodeInput, 'pointerdown', function(evt) { evt.stopPropagation(); }, t); 184 185 return t; 186 }; 187 188 JXG.registerElement('input', JXG.createInput); 189 190 return { 191 createInput: JXG.createInput 192 }; 193 }); 194