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