      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