Skip to content

Commit 2b644b9

Browse files
JeremyCaneyJeremyCaney
committed
Introduced new OnTopic.SelectableTreeView JavaScript class
Centralized the configuration for the relationships into a new `OnTopic.SelectableTreeView` JavaScript control, similar to what was previously done with `OnTopic.Navigation` (e6a93b7) and `OnTopic.NestedTopics` (33b4d1f). This makes the view cleaner, keeps the JavaScript in a JavaScript class which is easier to validate and debug, and (as a minor improvement) ensures the code isn't duplicated in the markup if multiple relationships are on a page (rare).
1 parent 2123dfa commit 2b644b9

2 files changed

Lines changed: 124 additions & 41 deletions

File tree

‎OnTopic.Editor.AspNetCore/Areas/Editor/Views/Editor/Components/Relationship/Default.cshtml‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -10,52 +10,16 @@
1010
}
1111

1212
<input asp-for="Value" type="hidden" />
13+
1314
<div id="@containerName"></div>
1415

1516
<script type="text/javascript">
1617
Ext.onReady(function(){
17-
var Tree = Ext.tree;
18-
var Storage = Ext.get("@Html.IdFor(m => m.Value)");
19-
var relationships = Storage.dom.value.split(",");
20-
21-
tree = new Tree.TreePanel({
22-
id : 'relatedTree',
23-
useArrows : true,
24-
autoScroll : true,
25-
animate : true,
26-
enableDD : false,
27-
containerScroll : true,
28-
border : false,
29-
baseCls : 'RelationshipsTreeView',
30-
dataUrl : '/OnTopic/Json/@rootTopicKey?ShowRoot=@descriptor.ShowRoot&ShowAll=true&RelatedNamespace=@descriptor.Key&RelatedTopicID=@Model.CurrentTopic.Id&AttributeName=@descriptor.AttributeKey&AttributeValue=@descriptor.AttributeValue',
31-
root : new Ext.tree.AsyncTreeNode({
32-
checked : true,
33-
text : 'Web',
34-
draggable : false,
35-
id : 'related',
36-
leaf : false
37-
}),
38-
rootVisible : false,
39-
listeners : {
40-
click : function(node) {
41-
node.checked = true;
42-
node.select();
43-
return true;
44-
},
45-
checkchange : function(node, checked) {
46-
if (checked) {
47-
relationships.push(node.attributes.id.toString());
48-
}
49-
else {
50-
relationships.remove(node.attributes.id.toString());
51-
}
52-
Storage.dom.value = relationships.concat(",");
53-
@(descriptor.CheckAscendants is true? "" : "return true")
54-
if (checked && node.parentNode) node.parentNode.getUI().toggleCheck(true);
55-
}
56-
}
18+
var tree = new OnTopic.SelectableTreeView({
19+
dataUrl : '/OnTopic/Json/@rootTopicKey?ShowRoot=@descriptor.ShowRoot&ShowAll=true&RelatedNamespace=@descriptor.Key&RelatedTopicID=@Model.CurrentTopic.Id&AttributeName=@descriptor.AttributeKey&AttributeValue=@descriptor.AttributeValue',
20+
checkAscendants : @((descriptor.CheckAscendants is true).ToString().ToLower()),
21+
backingField : '@Html.IdFor(m => m.Value)'
5722
});
5823
tree.render('@containerName');
59-
6024
});
6125
</script>

‎OnTopic.Editor.AspNetCore/Shared/Scripts/SelectableTreeView.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/*==============================================================================================================================
2+
| Author Ignia, LLC
3+
| Client Ignia, LLC
4+
| Project Topics Library
5+
\=============================================================================================================================*/
6+
Ext.namespace('OnTopic');
7+
8+
/*==============================================================================================================================
9+
| CLASS: SELECTABLE TREE VIEW
10+
\-----------------------------------------------------------------------------------------------------------------------------*/
11+
/**
12+
* @class OnTopic.SelectableTreeView
13+
* @extends Ext.tree.TreePanel
14+
* Provides an implementation of a {@link Ext.tree.TreePanel} which exposes checkboxes and is backed by a hidden field for
15+
* collecting the topic identifiers of any nodes checked. For use with e.g. the relationships view component.
16+
* @constructor
17+
* Create new SelectableTreeView object directly.
18+
* @param {object} options (optional) Options to overwrite either the {@link OnTopic.SelectableTreeView} or the underlying
19+
* {@link Ext.tree.TreePanel}.
20+
*/
21+
OnTopic.SelectableTreeView = Ext.extend(Ext.tree.TreePanel, {
22+
23+
/*============================================================================================================================
24+
| DEFINE LOCAL FIELDS
25+
\---------------------------------------------------------------------------------------------------------------------------*/
26+
checkAscendants : false,
27+
selectedTopics : null,
28+
backingField : null,
29+
30+
/*============================================================================================================================
31+
| METHOD: SELECT TOPIC
32+
\---------------------------------------------------------------------------------------------------------------------------*/
33+
selectTopic : function(node) {
34+
node.checked = true;
35+
node.select();
36+
return true;
37+
},
38+
39+
/*============================================================================================================================
40+
| METHOD: UPDATE BACKING FIELD
41+
\---------------------------------------------------------------------------------------------------------------------------*/
42+
updateBackingField: function (node, checked) {
43+
if (checked) {
44+
this.selectedTopics.push(node.attributes.id.toString());
45+
}
46+
else {
47+
this.selectedTopics.remove(node.attributes.id.toString());
48+
}
49+
this.backingField.dom.value = this.selectedTopics.concat(",");
50+
if (!this.checkAscendants) return true;
51+
if (checked && node.parentNode) node.parentNode.getUI().toggleCheck(true);
52+
},
53+
54+
/*============================================================================================================================
55+
| CONSTRUCTOR
56+
\---------------------------------------------------------------------------------------------------------------------------*/
57+
constructor : function(options) {
58+
59+
/*--------------------------------------------------------------------------------------------------------------------------
60+
| Set default options based on parameters
61+
\-------------------------------------------------------------------------------------------------------------------------*/
62+
Ext.apply(this, options, OnTopic.SelectableTreeView.defaults);
63+
64+
/*--------------------------------------------------------------------------------------------------------------------------
65+
| Initialize variables
66+
\-------------------------------------------------------------------------------------------------------------------------*/
67+
this.backingField = Ext.get(options.backingField);
68+
this.selectedTopics = this.backingField.dom.value.split(",");
69+
70+
/*--------------------------------------------------------------------------------------------------------------------------
71+
| Call parent constructor
72+
\-------------------------------------------------------------------------------------------------------------------------*/
73+
OnTopic.SelectableTreeView.superclass.constructor.call(this);
74+
75+
},
76+
77+
/*============================================================================================================================
78+
| INITIALIZE COMPONENT
79+
\---------------------------------------------------------------------------------------------------------------------------*/
80+
initComponent : function () {
81+
82+
/*--------------------------------------------------------------------------------------------------------------------------
83+
| Call parent initializer
84+
\-------------------------------------------------------------------------------------------------------------------------*/
85+
OnTopic.SelectableTreeView.superclass.initComponent.call(this);
86+
87+
/*--------------------------------------------------------------------------------------------------------------------------
88+
| Set default listeners
89+
\-------------------------------------------------------------------------------------------------------------------------*/
90+
var me = this;
91+
92+
me.on('click', me.selectTopic, this);
93+
me.on('checkchange', me.updateBackingField, this);
94+
95+
}
96+
97+
});
98+
99+
/*==============================================================================================================================
100+
| DEFAULTS
101+
\-----------------------------------------------------------------------------------------------------------------------------*/
102+
OnTopic.SelectableTreeView.defaults = {
103+
id : 'relatedTree',
104+
useArrows : true,
105+
autoScroll : true,
106+
animate : true,
107+
enableDD : false,
108+
containerScroll : true,
109+
border : false,
110+
baseCls : 'RelationshipsTreeView',
111+
root : new Ext.tree.AsyncTreeNode({
112+
checked : true,
113+
text : 'Web',
114+
draggable : false,
115+
id : 'related',
116+
leaf : false
117+
}),
118+
rootVisible : false
119+
};

0 commit comments

Comments
 (0)