Browse Source

Renamed option `activatable` to `clickToUse`

v3_develop
jos 9 years ago
parent
commit
ab869c1bcd
8 changed files with 19 additions and 19 deletions
  1. +3
    -3
      HISTORY.md
  2. +2
    -2
      docs/network.html
  3. +2
    -2
      docs/timeline.html
  4. +4
    -4
      examples/timeline/20_click_to_use.html
  5. +1
    -1
      examples/timeline/index.html
  6. +3
    -3
      lib/network/Network.js
  7. +1
    -1
      lib/shared/Activator.js
  8. +3
    -3
      lib/timeline/Core.js

+ 3
- 3
HISTORY.md View File

@ -10,14 +10,14 @@ http://visjs.org
- Fixed canceling moving an item to another group did not move the item
back to the original group.
- Added localization support.
- Implemented option `activatable`.
- Implemented option `clickToUse`.
### Network
- A fix in reading group properties for a node.
- Fixed physics solving stopping when a support node was not moving.
- Added localization support.
- Implemented option `activatable`.
- Implemented option `clickToUse`.
- Fixed page scroll event not being blocked when moving around in Network
using arrow keys.
@ -27,7 +27,7 @@ http://visjs.org
- Added two examples showing the two additions above.
- Added 'customRange' for the Y axis and an example showing how it works.
- Added localization support.
- Implemented option `activatable`.
- Implemented option `clickToUse`.
## 2014-08-14, version 3.2.0

+ 2
- 2
docs/network.html View File

@ -871,10 +871,10 @@ var options = {
</tr>
<tr>
<td>activatable</td>
<td>clickToUse</td>
<td>boolean</td>
<td>false</td>
<td>When a Network is configured to be <code>activatable</code>, it will react to mouse, touch, and keyboard events only when active.
<td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse, touch, and keyboard events only when active.
When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
</tr>

+ 2
- 2
docs/timeline.html View File

@ -357,10 +357,10 @@ var options = {
</tr>
<tr>
<td>activatable</td>
<td>clickToUse</td>
<td>boolean</td>
<td>false</td>
<td>When a Timeline is configured to be <code>activatable</code>, it will react to mouse and touch events only when active.
<td>When a Timeline is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active.
When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
</tr>

examples/timeline/20_activatable.html → examples/timeline/20_click_to_use.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Activatable</title>
<title>Timeline | Click to use</title>
<style>
body, html {
@ -22,9 +22,9 @@
</head>
<body>
<div id="main">
<h1>Activatable timeline</h1>
<h1>Timeline click to use</h1>
<p>
The following timelines are <code>activatable</code>: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
This example demonstrates how to use the <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
</p>
</div>
@ -55,7 +55,7 @@
var options = {
editable: true,
activatable: true
clickToUse: true
};
return new vis.Timeline(container, items, options);

+ 1
- 1
examples/timeline/index.html View File

@ -31,7 +31,7 @@
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
<p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
<p><a href="19_localization.html">19_localization.html</a></p>
<p><a href="20_activatable.html">20_activatable.html</a></p>
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 3
- 3
lib/network/Network.js View File

@ -552,7 +552,7 @@ Network.prototype.setOptions = function (options) {
var prop;
var fields = ['nodes','edges','smoothCurves','hierarchicalLayout','clustering','navigation','keyboard','dataManipulation',
'onAdd','onEdit','onEditEdge','onConnect','onDelete','activatable'
'onAdd','onEdit','onEditEdge','onConnect','onDelete','clickToUse'
];
util.selectiveNotDeepExtend(fields,this.constants, options);
util.selectiveNotDeepExtend(['color'],this.constants.nodes, options.nodes);
@ -648,8 +648,8 @@ Network.prototype.setOptions = function (options) {
}
}
if ('activatable' in options) {
if (options.activatable) {
if ('clickToUse' in options) {
if (options.clickToUse) {
this.activator = new Activator(this.frame);
this.activator.on('change', this._createKeyBinds.bind(this));
}

+ 1
- 1
lib/shared/Activator.js View File

@ -4,7 +4,7 @@ var Hammer = require('../module/hammer');
var util = require('../util');
/**
* Turn an element into an activatable element.
* Turn an element into an clickToUse element.
* When not active, the element has a transparent overlay. When the overlay is
* clicked, the mode is changed to active.
* When active, the element is displayed with a blue border around it, and

+ 3
- 3
lib/timeline/Core.js View File

@ -173,11 +173,11 @@ Core.prototype._create = function (container) {
Core.prototype.setOptions = function (options) {
if (options) {
// copy the known options
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'activatable'];
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse'];
util.selectiveExtend(fields, this.options, options);
if ('activatable' in options) {
if (options.activatable) {
if ('clickToUse' in options) {
if (options.clickToUse) {
this.activator = new Activator(this.dom.root);
}
else {

Loading…
Cancel
Save