Updated terms selection tree widget to display colored banner on lists containing at least one selected term
authorThierry Florac <tflorac@ulthar.net>
Fri, 22 Mar 2019 15:23:35 +0100
changeset 114 e7e4b4146a91
parent 113 ab8863529acf
child 115 91b51d5e32e7
Updated terms selection tree widget to display colored banner on lists containing at least one selected term
src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.js
src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.min.js
src/pyams_thesaurus/zmi/widget/templates/terms-tree-input.pt
--- a/src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.js	Fri Feb 01 18:37:43 2019 +0100
+++ b/src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.js	Fri Mar 22 15:23:35 2019 +0100
@@ -184,6 +184,34 @@
 
 
 		/**
+		 * Thesaurus term tree widget
+		 */
+		widget: {
+
+			/**
+			 * Initialize terms lists by adding class to lists headers containing selected terms
+			 */
+			initTree: function(element) {
+				$('input:checked', element).parents('.widget-body:first')
+										   .siblings('header')
+										   .addClass('active');
+			},
+
+			/**
+			 * Update header status after term (de)selection
+			 */
+			updateSelection: function(event) {
+				var widget = $(this).parents('.widget-body:first');
+				var header = widget.siblings('header');
+				header.removeClass('active');
+				if ($('input:checked', widget).exists()) {
+					header.addClass('active');
+				}
+			}
+		},
+
+
+		/**
 		 * Search terms in tree
 		 */
 		search: function() {
--- a/src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.min.js	Fri Feb 01 18:37:43 2019 +0100
+++ b/src/pyams_thesaurus/zmi/resources/js/pyams_thesaurus.min.js	Fri Mar 22 15:23:35 2019 +0100
@@ -1,1 +1,1 @@
-!function(a,s){"use strict";var e={tree:{displaySubNodes:function(s,t,r){void 0===r&&(r=a('span.term:withtext("'+s+'")').siblings("i[data-ams-click-handler]"));var l=r.parents("span.label").siblings("ul.group"),i=l.closest("ul.group").closest("li");l.empty();for(var d in t)if(t.hasOwnProperty(d)){var n=t[d],c=a("<li></li>");n.extracts.reverse();for(var o in n.extracts)if(n.extracts.hasOwnProperty(o)){var u=n.extracts[o],m=a("<div></div>").addClass("pull-right margin-right-2").appendTo(c),p=a("<i></i>").attr("data-ams-extract-name",u.name).addClass("fa fa-fw fa-square extract-checker").css("color","#"+u.color).appendTo(m);a('>div i.extract-checker[data-ams-extract-name="'+u.name+'"]',i).hasClass("used")?(u.used?p.addClass("used"):p.removeClass("fa-square").addClass("fa-square-o"),a("i.switcher",'table.extracts tr[data-ams-element-name="'+u.name+'"]').hasClass("fa-eye")||p.css("visibility","hidden")):p.addClass("disabled").css("color","silver")}var f=a("<span></span>").addClass("label").addClass(n.css_class).attr("data-ams-url",n.view).attr("data-toggle","modal");if(n.expand&&a("<i></i>").addClass("fa fa-fw fa-plus-circle").attr("data-ams-click-handler","PyAMS_thesaurus.tree.expand").attr("data-ams-stop-propagation",!0).appendTo(f),a("<span></span>").addClass("term").html(n.label).appendTo(f),f.appendTo(c),n.extensions)for(var h=0;h<n.extensions.length;h++){var v=n.extensions[h];a(v.icon).addClass("hint opaque align-base padding-left-5").attr("data-ams-url",v.view).attr("data-toggle","modal").attr("title",v.title).appendTo(c)}a("<ul></ul>").addClass("hidden group").appendTo(c),c.appendTo(l),n.subnodes&&e.tree.displaySubNodes(n.label,n.subnodes)}l.removeClass("hidden"),r.removeClass("fa-gear").addClass("fa-minus-circle")},expand:function(){var s=a(this);if(s.hasClass("fa-plus-circle")){s.removeClass("fa-plus-circle").addClass("fa-gear");var t=s.siblings("span.term").text(),r=s.closest("div.tree").data("ams-tree-context");MyAMS.ajax.post(r+"/get-nodes.json",{term:t},function(a){e.tree.displaySubNodes(t,a.nodes,s)})}else e.tree.collapse.call(this)},collapse:function(){var s=a(this);s.parents("span.label").siblings("ul.group").addClass("hidden"),s.removeClass("fa-minus-circle").addClass("fa-plus-circle")},updateTerm:function(s){var t=a('span.term:withtext("'+s.term+'")').siblings("i[data-ams-click-handler]");t.hasClass("fa-minus-circle")&&e.tree.collapse.call(t),e.tree.expand.call(t)},findTerm:function(s){MyAMS.ajax.post("get-parent-nodes.json",{term:s.term},function(s){e.tree.displaySubNodes(s.parent,s.nodes);var t=a('span.term:withtext("'+s.term+'")').parents("span.label");a("html,body").animate({scrollTop:t.offset().top-100},1e3),t.css("background-color","darkgreen").off("mouseover").on("mouseover",function(){a(this).css("background-color","")})})},switchExtract:function(){return function(){var s=a("i.fa",a(this)),t=s.parents("tr:first").data("ams-element-name");s.hasClass("fa-eye-slash")?e.tree.showExtract.call(this,t,s):e.tree.hideExtract.call(this,t,s)}},showExtract:function(s,e){a('i.extract-checker[data-ams-extract-name="'+s+'"]').css("visibility",""),e.removeClass("fa-eye-slash").removeClass("text-danger").addClass("fa-eye")},hideExtract:function(s,e){a('i.extract-checker[data-ams-extract-name="'+s+'"]').css("visibility","hidden"),e.removeClass("fa-eye").addClass("fa-eye-slash").addClass("text-danger")}},search:function(){var s=a(this).val();e.tree.findTerm({term:s})}};a(document).on("click","i.extract-checker",function(s){var e=a(this);if(!e.hasClass("disabled")){var t=a("span.term",e.closest("div").siblings("span"));MyAMS.ajax.post("switch-extract.json",{term:t.text(),extract:e.data("ams-extract-name")},function(s){s.status?MyAMS.ajax.handleJSON(s):s.used?(e.removeClass("fa-square-o").addClass("fa-square used"),a('>li >div i.extract-checker[data-ams-extract-name="'+s.extract+'"]',e.closest("div").siblings("ul.group")).removeClass("fa-square disabled").addClass("fa-square-o").css("color","#"+s.color)):(e.removeClass("fa-square used").addClass("fa-square-o"),a('i.extract-checker[data-ams-extract-name="'+s.extract+'"]',e.closest("div").siblings("ul.group")).removeClass("fa-square-o").addClass("fa-square disabled").css("color","silver"))})}}),s.PyAMS_thesaurus=e}(jQuery,this);
+!function(a,e){"use strict";var s={tree:{displaySubNodes:function(e,t,r){void 0===r&&(r=a('span.term:withtext("'+e+'")').siblings("i[data-ams-click-handler]"));var i=r.parents("span.label").siblings("ul.group"),l=i.closest("ul.group").closest("li");i.empty();for(var d in t)if(t.hasOwnProperty(d)){var n=t[d],c=a("<li></li>");n.extracts.reverse();for(var o in n.extracts)if(n.extracts.hasOwnProperty(o)){var u=n.extracts[o],p=a("<div></div>").addClass("pull-right margin-right-2").appendTo(c),m=a("<i></i>").attr("data-ams-extract-name",u.name).addClass("fa fa-fw fa-square extract-checker").css("color","#"+u.color).appendTo(p);a('>div i.extract-checker[data-ams-extract-name="'+u.name+'"]',l).hasClass("used")?(u.used?m.addClass("used"):m.removeClass("fa-square").addClass("fa-square-o"),a("i.switcher",'table.extracts tr[data-ams-element-name="'+u.name+'"]').hasClass("fa-eye")||m.css("visibility","hidden")):m.addClass("disabled").css("color","silver")}var f=a("<span></span>").addClass("label").addClass(n.css_class).attr("data-ams-url",n.view).attr("data-toggle","modal");if(n.expand&&a("<i></i>").addClass("fa fa-fw fa-plus-circle").attr("data-ams-click-handler","PyAMS_thesaurus.tree.expand").attr("data-ams-stop-propagation",!0).appendTo(f),a("<span></span>").addClass("term").html(n.label).appendTo(f),f.appendTo(c),n.extensions)for(var h=0;h<n.extensions.length;h++){var v=n.extensions[h];a(v.icon).addClass("hint opaque align-base padding-left-5").attr("data-ams-url",v.view).attr("data-toggle","modal").attr("title",v.title).appendTo(c)}a("<ul></ul>").addClass("hidden group").appendTo(c),c.appendTo(i),n.subnodes&&s.tree.displaySubNodes(n.label,n.subnodes)}i.removeClass("hidden"),r.removeClass("fa-gear").addClass("fa-minus-circle")},expand:function(){var e=a(this);if(e.hasClass("fa-plus-circle")){e.removeClass("fa-plus-circle").addClass("fa-gear");var t=e.siblings("span.term").text(),r=e.closest("div.tree").data("ams-tree-context");MyAMS.ajax.post(r+"/get-nodes.json",{term:t},function(a){s.tree.displaySubNodes(t,a.nodes,e)})}else s.tree.collapse.call(this)},collapse:function(){var e=a(this);e.parents("span.label").siblings("ul.group").addClass("hidden"),e.removeClass("fa-minus-circle").addClass("fa-plus-circle")},updateTerm:function(e){var t=a('span.term:withtext("'+e.term+'")').siblings("i[data-ams-click-handler]");t.hasClass("fa-minus-circle")&&s.tree.collapse.call(t),s.tree.expand.call(t)},findTerm:function(e){MyAMS.ajax.post("get-parent-nodes.json",{term:e.term},function(e){s.tree.displaySubNodes(e.parent,e.nodes);var t=a('span.term:withtext("'+e.term+'")').parents("span.label");a("html,body").animate({scrollTop:t.offset().top-100},1e3),t.css("background-color","darkgreen").off("mouseover").on("mouseover",function(){a(this).css("background-color","")})})},switchExtract:function(){return function(){var e=a("i.fa",a(this)),t=e.parents("tr:first").data("ams-element-name");e.hasClass("fa-eye-slash")?s.tree.showExtract.call(this,t,e):s.tree.hideExtract.call(this,t,e)}},showExtract:function(e,s){a('i.extract-checker[data-ams-extract-name="'+e+'"]').css("visibility",""),s.removeClass("fa-eye-slash").removeClass("text-danger").addClass("fa-eye")},hideExtract:function(e,s){a('i.extract-checker[data-ams-extract-name="'+e+'"]').css("visibility","hidden"),s.removeClass("fa-eye").addClass("fa-eye-slash").addClass("text-danger")}},widget:{initTree:function(e){a("input:checked",e).parents(".widget-body:first").siblings("header").addClass("active")},updateSelection:function(e){var s=a(this).parents(".widget-body:first"),t=s.siblings("header");t.removeClass("active"),a("input:checked",s).exists()&&t.addClass("active")}},search:function(){var e=a(this).val();s.tree.findTerm({term:e})}};a(document).on("click","i.extract-checker",function(e){var s=a(this);if(!s.hasClass("disabled")){var t=a("span.term",s.closest("div").siblings("span"));MyAMS.ajax.post("switch-extract.json",{term:t.text(),extract:s.data("ams-extract-name")},function(e){e.status?MyAMS.ajax.handleJSON(e):e.used?(s.removeClass("fa-square-o").addClass("fa-square used"),a('>li >div i.extract-checker[data-ams-extract-name="'+e.extract+'"]',s.closest("div").siblings("ul.group")).removeClass("fa-square disabled").addClass("fa-square-o").css("color","#"+e.color)):(s.removeClass("fa-square used").addClass("fa-square-o"),a('i.extract-checker[data-ams-extract-name="'+e.extract+'"]',s.closest("div").siblings("ul.group")).removeClass("fa-square-o").addClass("fa-square disabled").css("color","silver"))})}}),e.PyAMS_thesaurus=s}(jQuery,this);
--- a/src/pyams_thesaurus/zmi/widget/templates/terms-tree-input.pt	Fri Feb 01 18:37:43 2019 +0100
+++ b/src/pyams_thesaurus/zmi/widget/templates/terms-tree-input.pt	Fri Mar 22 15:23:35 2019 +0100
@@ -1,32 +1,37 @@
-<tal:loop repeat="term view/top_terms">
-	<div class="col col-xs-6 col-sm-4 col-md-3 col-lg-3">
-		<div class="ams-widget" data-ams-widget-toggle-button="false"
-			 id="them_${repeat/term/index}">
-			<header class="no-margin">
-				<h2>${python:term.alt or term.label}</h2>
- 			</header>
-			<div class="widget-body no-padding viewport-y viewport-200 viewport-x-none"
-				 style="height: 200px; width: calc(100% - 2px);">
-				<tal:loop repeat="subterm python:view.get_subterms(term)">
-					<div style="padding-left: ${python:(subterm.level - 1) * 20}px; line-height: 1em;">
-						<label class="checkbox"
-							   tal:define="published python:subterm.status == 'published'"
-							   tal:omit-tag="not:published">
-							<input tal:condition="published"
-								   type="checkbox"
-								   name="${view/name}:list"
-								   id="term_${subterm/label}"
-								   name="${view/name}:list"
-								   value="${subterm/label}"
-								   checked="${python:'checked' if subterm.label in (view.value or ()) else None}" />
-							<i></i>
-							<div class="${python:'' if published else 'bold margin-top-5'}">
-								${python:subterm.alt or subterm.label}
-							</div>
-						</label>
-					</div>
-				</tal:loop>
+<div data-ams-plugins="pyams_thesaurus"
+	 data-ams-plugin-pyams_thesaurus-src="${tales:resource_path('pyams_thesaurus.zmi:pyams_thesaurus')}"
+	 data-ams-plugin-pyams_thesaurus-callback="PyAMS_thesaurus.widget.initTree">
+	<tal:loop repeat="term view/top_terms">
+		<div class="col col-xs-6 col-sm-4 col-md-3 col-lg-3">
+			<div class="ams-widget" data-ams-widget-toggle-button="false"
+				 id="them_${repeat/term/index}">
+				<header class="no-margin">
+					<h2>${python:term.alt or term.label}</h2>
+				</header>
+				<div class="widget-body no-padding viewport-y viewport-200 viewport-x-none"
+					 style="height: 200px; width: calc(100% - 2px);">
+					<tal:loop repeat="subterm python:view.get_subterms(term)">
+						<div style="padding-left: ${python:(subterm.level - 1) * 20}px; line-height: 1em;">
+							<label class="checkbox"
+								   tal:define="published python:subterm.status == 'published'"
+								   tal:omit-tag="not:published">
+								<input tal:condition="published"
+									   type="checkbox"
+									   name="${view/name}:list"
+									   id="term_${subterm/label}"
+									   name="${view/name}:list"
+									   value="${subterm/label}"
+									   checked="${python:'checked' if subterm.label in (view.value or ()) else None}"
+									   data-ams-change-handler="PyAMS_thesaurus.widget.updateSelection"/>
+								<i></i>
+								<div class="${python:'' if published else 'bold margin-top-5'}">
+									${python:subterm.alt or subterm.label}
+								</div>
+							</label>
+						</div>
+					</tal:loop>
+				</div>
 			</div>
 		</div>
-	</div>
-</tal:loop>
+	</tal:loop>
+</div>
\ No newline at end of file