Browse Source

Some first fixes in the GroupSet and side panel

css_transitions
jos 10 years ago
parent
commit
650e465ab0
7 changed files with 47 additions and 25 deletions
  1. +13
    -5
      src/timeline/Timeline.js
  2. +4
    -4
      src/timeline/component/Group.js
  3. +4
    -2
      src/timeline/component/GroupSet.js
  4. +9
    -5
      src/timeline/component/Panel.js
  5. +2
    -2
      src/timeline/component/css/groupset.css
  6. +4
    -0
      src/timeline/component/css/panel.css
  7. +11
    -7
      src/util.js

+ 13
- 5
src/timeline/Timeline.js View File

@ -100,7 +100,9 @@ function Timeline (container, items, options) {
return 0;
}
},
className: 'side'
className: function () {
return 'side' + (me.groupsData ? '' : ' hidden');
}
});
this.sidePanel = new Panel(sideOptions);
this.rootPanel.appendChild(this.sidePanel);
@ -359,11 +361,11 @@ Timeline.prototype.setItems = function(items) {
/**
* Set groups
* @param {vis.DataSet | Array | google.visualization.DataTable} groups
* @param {vis.DataSet | Array | google.visualization.DataTable} groupSet
*/
Timeline.prototype.setGroups = function(groups) {
Timeline.prototype.setGroups = function(groupSet) {
var me = this;
this.groupsData = groups;
this.groupsData = groupSet;
// create options for the itemset or groupset
var options = util.extend(Object.create(this.options), {
@ -376,7 +378,9 @@ Timeline.prototype.setGroups = function(groups) {
});
if (this.groupsData) {
// GroupSet
// Create a GroupSet
// remove itemset if existing
if (this.itemSet) {
this.itemSet.hide(); // TODO: not so nice having to hide here
this.contentPanel.removeChild(this.itemSet);
@ -384,6 +388,8 @@ Timeline.prototype.setGroups = function(groups) {
this.itemSet = null;
}
// TODO: only create a new groupset when there is no groupset
// create new GroupSet
// TODO: replace this.sidePanel with a this.labelPanel
this.groupSet = new GroupSet(this.contentPanel, this.sidePanel, options);
@ -391,12 +397,14 @@ Timeline.prototype.setGroups = function(groups) {
this.groupSet.setRange(this.range);
this.groupSet.setItems(this.itemsData);
this.groupSet.setGroups(this.groupsData);
this.contentPanel.appendChild(this.groupSet);
}
else {
// ItemSet
if (this.groupSet) {
this.groupSet.hide(); // TODO: not so nice having to hide here
this.groupSet.setItems(); // disconnect from itemset
this.contentPanel.removeChild(this.groupSet);
this.groupSet = null;
}

+ 4
- 4
src/timeline/component/Group.js View File

@ -38,9 +38,9 @@ Group.prototype.setOptions = Component.prototype.setOptions;
/**
* Set item set for the group. The group will create a view on the itemSet,
* filtered by the groups id.
* @param {DataSet | DataView} items
* @param {DataSet | DataView} itemSet
*/
Group.prototype.setItems = function setItems(items) {
Group.prototype.setItems = function setItems(itemSet) {
if (this.itemSet) {
// remove current item set
this.itemSet.hide();
@ -49,7 +49,7 @@ Group.prototype.setItems = function setItems(items) {
this.itemSet = null;
}
if (items) {
if (itemSet) {
var groupId = this.groupId;
var itemSetOptions = Object.create(this.options);
@ -59,7 +59,7 @@ Group.prototype.setItems = function setItems(items) {
if (this.range) this.itemSet.setRange(this.range);
this.view = new DataView(items, {
this.view = new DataView(itemSet, {
filter: function (item) {
return item.group == groupId;
}

+ 4
- 2
src/timeline/component/GroupSet.js View File

@ -28,7 +28,7 @@ function GroupSet(contentPanel, labelPanel, options) {
}
};
// TODO: implement right orientation of the labels
// TODO: implement right orientation of the labels (left/right)
// changes in groups are queued key/value map containing id/action
this.queue = {};
@ -73,7 +73,7 @@ GroupSet.prototype._create = function _create () {
* @returns {null} Get frame is not supported by GroupSet
*/
GroupSet.prototype.getFrame = function getFrame() {
throw new Error('GroupSet is a virtual Component and doesn\'t have a frame.');
return null;
};
/**
@ -477,6 +477,8 @@ GroupSet.prototype._onRemove = function _onRemove(ids) {
* @param {String} action can be 'add', 'update', 'remove'
*/
GroupSet.prototype._toQueue = function _toQueue(ids, action) {
// TODO: remove this queuing thing, immediately apply it
var queue = this.queue;
ids.forEach(function (id) {
queue[id] = action;

+ 9
- 5
src/timeline/component/Panel.js View File

@ -54,8 +54,12 @@ Panel.prototype.appendChild = function (child) {
this.childs.push(child);
child.parent = this;
var frame = child.getFrame();
// attach to the DOM
this.frame.appendChild(child.getFrame());
if (frame) {
this.frame.appendChild(frame);
}
};
/**
@ -80,12 +84,12 @@ Panel.prototype.removeChild = function (child) {
if (index != -1) {
this.childs.splice(index, 1);
if (!child.getFrame() || child.getFrame().parentNode != this.frame) {
console.log('oops')
}
var frame = child.getFrame();
// remove from the DOM
this.frame.removeChild(child.getFrame());
if (frame && frame.parentNode) {
this.frame.removeChild(frame);
}
child.parent = null;
}

+ 2
- 2
src/timeline/component/css/groupset.css View File

@ -43,13 +43,13 @@
}
.vis.timeline.top .labels .labelset .vlabel,
.vis.timeline.top .groupset .itemset .axis {
.vis.timeline.top .itemset .axis {
border-top: 1px solid #bfbfbf;
border-bottom: none;
}
.vis.timeline.bottom .labels .labelset .vlabel,
.vis.timeline.bottom .groupset .itemset .axis {
.vis.timeline.bottom .itemset .axis {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}

+ 4
- 0
src/timeline/component/css/panel.css View File

@ -24,3 +24,7 @@
.vis.timeline .vpanel.side {
border-right: 1px solid #bfbfbf;
}
.vis.timeline .vpanel.side.hidden {
display: none;
}

+ 11
- 7
src/util.js View File

@ -670,8 +670,9 @@ util.option.asElement = function (value, defaultValue) {
util.GiveDec = function GiveDec(Hex)
{
util.GiveDec = function GiveDec(Hex) {
var Value;
if(Hex == "A")
Value = 10;
else
@ -690,12 +691,14 @@ util.GiveDec = function GiveDec(Hex)
if(Hex == "F")
Value = 15;
else
Value = eval(Hex)
Value = eval(Hex);
return Value;
}
};
util.GiveHex = function GiveHex(Dec) {
var Value;
util.GiveHex = function GiveHex(Dec)
{
if(Dec == 10)
Value = "A";
else
@ -715,8 +718,9 @@ util.GiveHex = function GiveHex(Dec)
Value = "F";
else
Value = "" + Dec;
return Value;
}
};
/**
* http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

Loading…
Cancel
Save