Skip to content
This repository was archived by the owner on Jul 3, 2025. It is now read-only.

Commit 040283d

Browse files
edsilvedsilv
committed
autoexpand
1 parent bdc73d8 commit 040283d

File tree

9 files changed

+186
-152
lines changed

9 files changed

+186
-152
lines changed

‎dist/iiif-tree-component.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/iiif-tree-component.d.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// iiif-tree-component v1.1.5 https://github.com/iiif-commons/iiif-tree-component#readme
1+
// iiif-tree-component v1.1.6 https://github.com/iiif-commons/iiif-tree-component#readme
22
interface JQuery {
33
link: any;
44
render: any;
@@ -22,10 +22,12 @@ declare namespace IIIFComponents {
2222
/// <reference types="@iiif/manifold" />
2323
declare namespace IIIFComponents {
2424
interface ITreeComponentData {
25-
branchNodesSelectable: boolean;
26-
helper: Manifold.IHelper | null;
27-
topRangeIndex: number;
28-
treeSortType: Manifold.TreeSortType;
25+
[key: string]: any;
26+
autoExpand?: boolean;
27+
branchNodesSelectable?: boolean;
28+
helper?: Manifold.IHelper | null;
29+
topRangeIndex?: number;
30+
treeSortType?: Manifold.TreeSortType;
2931
}
3032
}
3133

@@ -42,7 +44,6 @@ declare namespace IIIFComponents {
4244
constructor(options: _Components.IBaseComponentOptions);
4345
protected _init(): boolean;
4446
set(data: ITreeComponentData): void;
45-
private _updateMultiSelectState();
4647
private _getMultiSelectState();
4748
data(): ITreeComponentData;
4849
allNodesSelected(): boolean;

‎dist/iiif-tree-component.js‎

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// iiif-tree-component v1.1.5 https://github.com/iiif-commons/iiif-tree-component#readme
1+
// iiif-tree-component v1.1.6 https://github.com/iiif-commons/iiif-tree-component#readme
22
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifTreeComponent = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
33
(function (global){
44

@@ -33,32 +33,32 @@ var IIIFComponents;
3333
this._$element.append(this._$tree);
3434
$.templates({
3535
pageTemplate: '{^{for nodes}}\
36-
{^{tree/}}\
37-
{{/for}}',
36+
{^{tree/}}\
37+
{{/for}}',
3838
treeTemplate: '<li>\
39-
{^{if nodes && nodes.length}}\
40-
<div class="toggle" data-link="class{merge:expanded toggle=\'expanded\'}"></div>\
41-
{{else}}\
42-
<div class="spacer"></div>\
43-
{{/if}}\
44-
{^{if multiSelectEnabled}}\
45-
<input id="tree-checkbox-{{>id}}" type="checkbox" data-link="checked{:multiSelected ? \'checked\' : \'\'}" class="multiSelect" />\
46-
{{/if}}\
47-
{^{if selected}}\
48-
<a id="tree-link-{{>id}}" href="#" title="{{>label}}" class="selected">{{>label}}</a>\
49-
{{else}}\
50-
<a id="tree-link-{{>id}}" href="#" title="{{>label}}">{{>label}}</a>\
51-
{{/if}}\
52-
</li>\
53-
{^{if expanded}}\
54-
<li>\
55-
<ul>\
56-
{^{for nodes}}\
57-
{^{tree/}}\
58-
{{/for}}\
59-
</ul>\
39+
{^{if nodes && nodes.length}}\
40+
<div class="toggle" data-link="class{merge:expanded toggle=\'expanded\'}"></div>\
41+
{{else}}\
42+
<div class="spacer"></div>\
43+
{{/if}}\
44+
{^{if multiSelectEnabled}}\
45+
<input id="tree-checkbox-{{>id}}" type="checkbox" data-link="checked{:multiSelected ? \'checked\' : \'\'}" class="multiSelect" />\
46+
{{/if}}\
47+
{^{if selected}}\
48+
<a id="tree-link-{{>id}}" href="#" title="{{>label}}" class="selected">{{>label}}</a>\
49+
{{else}}\
50+
<a id="tree-link-{{>id}}" href="#" title="{{>label}}">{{>label}}</a>\
51+
{{/if}}\
6052
</li>\
61-
{{/if}}'
53+
{^{if expanded}}\
54+
<li>\
55+
<ul>\
56+
{^{for nodes}}\
57+
{^{tree/}}\
58+
{{/for}}\
59+
</ul>\
60+
</li>\
61+
{{/if}}'
6262
});
6363
$.views.tags({
6464
tree: {
@@ -111,31 +111,40 @@ var IIIFComponents;
111111
return success;
112112
};
113113
TreeComponent.prototype.set = function (data) {
114+
var _this = this;
114115
this.options.data = data;
115116
this._rootNode = this.options.data.helper.getTree(this.options.data.topRangeIndex, this.options.data.treeSortType);
116117
this._allNodes = null; // delete cache
117118
this._multiSelectableNodes = null; // delete cache
118119
this._$tree.link($.templates.pageTemplate, this._rootNode);
119-
this._updateMultiSelectState();
120-
};
121-
// todo: this should be removed in order to fit with the 'reactive' pattern
122-
// all changes shold be a result of calling set().
123-
TreeComponent.prototype._updateMultiSelectState = function () {
124-
var state = this._getMultiSelectState();
125-
for (var i = 0; i < state.ranges.length; i++) {
126-
var range = state.ranges[i];
127-
var node = this._getMultiSelectableNodes().en().where(function (n) { return n.data.id === range.id; }).first();
120+
var multiSelectState = this._getMultiSelectState();
121+
var _loop_1 = function (i) {
122+
var range = multiSelectState.ranges[i];
123+
var node = this_1._getMultiSelectableNodes().en().where(function (n) { return n.data.id === range.id; }).first();
128124
if (node) {
129-
this._setNodeMultiSelectEnabled(node, range.multiSelectEnabled);
130-
this._setNodeMultiSelected(node, range.multiSelected);
125+
this_1._setNodeMultiSelectEnabled(node, range.multiSelectEnabled);
126+
this_1._setNodeMultiSelected(node, range.multiSelected);
131127
}
128+
};
129+
var this_1 = this;
130+
for (var i = 0; i < multiSelectState.ranges.length; i++) {
131+
_loop_1(i);
132+
}
133+
if (this.options.data.autoExpand) {
134+
var allNodes = this._getAllNodes();
135+
allNodes.forEach(function (node, index) {
136+
if (node.nodes.length) {
137+
_this._setNodeExpanded(node, true);
138+
}
139+
});
132140
}
133141
};
134142
TreeComponent.prototype._getMultiSelectState = function () {
135143
return this.options.data.helper.getMultiSelectState();
136144
};
137145
TreeComponent.prototype.data = function () {
138146
return {
147+
autoExpand: false,
139148
branchNodesSelectable: true,
140149
helper: null,
141150
topRangeIndex: 0,
@@ -183,17 +192,17 @@ var IIIFComponents;
183192
}
184193
};
185194
// private _updateParentNodes(node: Manifold.ITreeNode): void {
186-
// var parentNode: Manifold.ITreeNode = <Manifold.ITreeNode>node.parentNode;
195+
// const parentNode: Manifold.ITreeNode = <Manifold.ITreeNode>node.parentNode;
187196
// if (!parentNode) return;
188197
// // expand parents if selected
189198
// if (node.selected) {
190199
// this._expandParents(node);
191200
// }
192201
// // get the number of selected children.
193-
// var checkedCount: number = parentNode.nodes.en().where(n => (<Manifold.ITreeNode>n).multiSelected).count();
202+
// const checkedCount: number = parentNode.nodes.en().where(n => (<Manifold.ITreeNode>n).multiSelected).count();
194203
// // if any are checked, check the parent.
195204
// this._setNodeMultiSelected(parentNode, checkedCount > 0);
196-
// var indeterminate: boolean = checkedCount > 0 && checkedCount < parentNode.nodes.length;
205+
// const indeterminate: boolean = checkedCount > 0 && checkedCount < parentNode.nodes.length;
197206
// this._setNodeIndeterminate(parentNode, indeterminate);
198207
// // cascade up tree
199208
// this._updateParentNodes(parentNode);
@@ -220,14 +229,14 @@ var IIIFComponents;
220229
$.observable(node).setProperty("multiSelectEnabled", enabled);
221230
};
222231
// private _setNodeIndeterminate(node: Manifold.ITreeNode, indeterminate: boolean): void {
223-
// var $checkbox: JQuery = this._getNodeCheckbox(node);
232+
// const $checkbox: JQuery = this._getNodeCheckbox(node);
224233
// $checkbox.prop("indeterminate", indeterminate);
225234
// }
226235
// private _getNodeCheckbox(node: Manifold.ITreeNode): JQuery {
227236
// return $("#tree-checkbox-" + node.id);
228237
// }
229238
// private _getNodeSiblings(node: Manifold.ITreeNode): Manifold.ITreeNode[] {
230-
// var siblings: Manifold.ITreeNode[] = [];
239+
// const siblings: Manifold.ITreeNode[] = [];
231240
// if (node.parentNode){
232241
// siblings = <Manifold.ITreeNode[]>node.parentNode.nodes.en().where(n => n !== node).toArray();
233242
// }

‎dist/iiif-tree-component.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<body>
2121

2222
<div>
23+
<input id="autoExpand" type="checkbox" /><label for="autoExpand">Auto-expand</label>&nbsp;
2324
<input id="multiselect" type="checkbox" /><label for="multiselect">Multi-select</label>&nbsp;
2425
<input id="selectAll" type="checkbox" /><label for="selectAll">Select All</label>&nbsp;
2526
Sort by: <a id="sortByDefault" href="#">Default</a>/<a href="#" id="sortByDate">Date</a> &nbsp;
@@ -33,6 +34,7 @@
3334
<script>
3435

3536
var helper, component, treeSortType, rootNode, multiSelectState;
37+
var autoExpand = false;
3638

3739
$(function() {
3840

@@ -93,13 +95,19 @@
9395
updateMultiSelectUI();
9496

9597
component.set({
98+
autoExpand: autoExpand,
9699
branchNodesSelectable: false,
97100
helper: helper,
98101
treeSortType: treeSortType
99102
});
100103

101104
}
102105

106+
$('#autoExpand').on('click', function() {
107+
autoExpand = $(this).is(':checked');
108+
render();
109+
});
110+
103111
$('#multiselect').on('click', function() {
104112
var $this = $(this);
105113

0 commit comments

Comments
 (0)