Updated Select2 widget templates
authorThierry Florac <tflorac@ulthar.net>
Wed, 13 Jan 2021 14:06:00 +0100
changeset 219 8072c47cdecd
parent 218 4dc6b3af7837
child 220 08755669300a
Updated Select2 widget templates
src/pyams_form/widget/templates/hidden-select-display.pt
src/pyams_form/widget/templates/hidden-select-input.pt
src/pyams_form/widget/templates/select-display.pt
src/pyams_form/widget/templates/select-input.pt
--- a/src/pyams_form/widget/templates/hidden-select-display.pt	Tue Jan 12 13:34:29 2021 +0100
+++ b/src/pyams_form/widget/templates/hidden-select-display.pt	Wed Jan 13 14:06:00 2021 +0100
@@ -3,29 +3,29 @@
 	<div class="select2-parent"
 		 tal:omit-tag="view/required">
 		<input type="hidden" autocomplete="none"
-				class="select2" disabled="disabled"
+				id="${view/id}"
+				name="${view/name}"
+				class="${view/klass} select2}"
+				style="${view/style}"
+				title="${view/title}"
+				value="${view/values}"
+				lang="${view/lang}"
+				onclick="${view/onclick}"
+				ondblclick="${view/ondblclick}"
+				onmousedown="${view/onmousedown}"
+				onmouseup="${view/onmouseup}"
+				onmouseover="${view/onmouseover}"
+				onmousemove="${view/onmousemove}"
+				onmouseout="${view/onmouseout}"
+				onkeypress="${view/onkeypress}"
+				onkeydown="${view/onkeydown}"
+				onkeyup="${view/onkeyup}"
+				tabindex="${view/tabindex}"
+				onchange="${view/onchange}"
+				disabled="disabled"
+				data-ams-data='${tales:object_data(view)}'
 				data-ams-select2-separator="|"
-				tal:attributes="id view/id;
-								name string:${view/name};
-								class string:${view/klass} select2;
-								style view/style;
-								title view/title;
-								value view/values;
-								lang view/lang;
-								onclick view/onclick;
-								ondblclick view/ondblclick;
-								onmousedown view/onmousedown;
-								onmouseup view/onmouseup;
-								onmouseover view/onmouseover;
-								onmousemove view/onmousemove;
-								onmouseout view/onmouseout;
-								onkeypress view/onkeypress;
-								onkeydown view/onkeydown;
-								onkeyup view/onkeyup;
-								tabindex view/tabindex;
-								onchange view/onchange;
-								data-ams-data tales:object_data(view);
-								data-ams-select2-values view/values_map;
-								data-ams-select2-multiple python:'true' if view.multiple else None;" />
+				data-ams-select2-values="${view/values_map}"
+				data-ams-select2-multiple="${python:'true' if view.multiple else None}" />
 	</div>
 </label>
\ No newline at end of file
--- a/src/pyams_form/widget/templates/hidden-select-input.pt	Tue Jan 12 13:34:29 2021 +0100
+++ b/src/pyams_form/widget/templates/hidden-select-input.pt	Wed Jan 13 14:06:00 2021 +0100
@@ -1,38 +1,37 @@
 <label class="input bordered with-icon" i18n:domain="pyams_form"
 	   tal:omit-tag="view/required">
-	<i class="icon-append fa fa-trash-o text-primary hint opaque"
+	<i tal:condition="not:view/required"
+		class="icon-append fa fa-trash-o text-primary hint opaque"
 		title="Clear selected values" i18n:attributes="title"
-		tal:omit-tag="view/required"
 		data-ams-hint-gravity="se"
 		data-ams-click-handler="MyAMS.helpers.select2ClearSelection"
-		tal:attributes="data-ams-select2-target view/name"></i>
+		data-ams-select2-target="${view/name}"></i>
 	<div class="select2-parent"
 		 tal:omit-tag="view/required">
 		<input type="hidden" autocomplete="none"
-				class="select2"
+				id="${view/id}"
+				name="${view/name}"
+				class="${view/klass} select2"
+				style="${view/style}"
+				title="${view/title}"
+				value="${view/values}"
+				lang="${view/lang}"
+				onclick="${view/onclick}"
+				ondblclick="${view/ondblclick}"
+				onmousedown="${view/onmousedown}"
+				onmouseup="${view/onmouseup}"
+				onmouseover="${view/onmouseover}"
+				onmousemove="${view/onmousemove}"
+				onmouseout="${view/onmouseout}"
+				onkeypress="${view/onkeypress}"
+				onkeydown="${view/onkeydown}"
+				onkeyup="${view/onkeyup}"
+				disabled="${view/disabled}"
+				tabindex="${view/tabindex}"
+				onchange="${view/onchange}"
+				data-ams-data='${tales:object_data(view)}'
 				data-ams-select2-separator="|"
-				tal:attributes="id view/id;
-								name string:${view/name};
-								class string:${view/klass} select2;
-								style view/style;
-								title view/title;
-								value view/values;
-								lang view/lang;
-								onclick view/onclick;
-								ondblclick view/ondblclick;
-								onmousedown view/onmousedown;
-								onmouseup view/onmouseup;
-								onmouseover view/onmouseover;
-								onmousemove view/onmousemove;
-								onmouseout view/onmouseout;
-								onkeypress view/onkeypress;
-								onkeydown view/onkeydown;
-								onkeyup view/onkeyup;
-								disabled view/disabled;
-								tabindex view/tabindex;
-								onchange view/onchange;
-								data-ams-data tales:object_data(view);
-								data-ams-select2-values view/values_map;
-								data-ams-select2-multiple python:'true' if view.multiple else None;" />
+				data-ams-select2-values='${view/values_map}'
+				data-ams-select2-multiple="${python:'true' if view.multiple else None}" />
 	</div>
 </label>
\ No newline at end of file
--- a/src/pyams_form/widget/templates/select-display.pt	Tue Jan 12 13:34:29 2021 +0100
+++ b/src/pyams_form/widget/templates/select-display.pt	Wed Jan 13 14:06:00 2021 +0100
@@ -3,34 +3,35 @@
 	   tal:omit-tag="display_mode" i18n:domain="pyams_form">
 	<div class="select2-parent"
 		 tal:omit-tag="display_mode">
-		<select class="select2" disabled="disabled"
-				tal:attributes='id view/id;
-								name string:${view/name}:list;
-								class string:${view/klass} select2;
-								style view/style;
-								title view/title;
-								lang view/lang;
-								onclick view/onclick;
-								ondblclick view/ondblclick;
-								onmousedown view/onmousedown;
-								onmouseup view/onmouseup;
-								onmouseover view/onmouseover;
-								onmousemove view/onmousemove;
-								onmouseout view/onmouseout;
-								onkeypress view/onkeypress;
-								onkeydown view/onkeydown;
-								onkeyup view/onkeyup;
-								tabindex view/tabindex;
-								onfocus view/onfocus;
-								onblur view/onblur;
-								onchange view/onchange;
-								multiple view/multiple;
-								size view/size;
-								data-ams-data tales:object_data(view);'>
+		<select id="${view/id}"
+				name="${view/name}:list"
+				class="${view/klass} select2"
+				style="${view/style}"
+				title="${view/title}"
+				lang="${view/lang}"
+				onclick="${view/onclick}"
+				ondblclick="${view/ondblclick}"
+				onmousedown="${view/onmousedown}"
+				onmouseup="${view/onmouseup}"
+				onmouseover="${view/onmouseover}"
+				onmousemove="${view/onmousemove}"
+				onmouseout="${view/onmouseout}"
+				onkeypress="${view/onkeypress}"
+				onkeydown="${view/onkeydown}"
+				onkeyup="${view/onkeyup}"
+				tabindex="${view/tabindex}"
+				onfocus="${view/onfocus}"
+				onblur="${view/onblur}"
+				onchange="${view/onchange}"
+				multiple="${view/multiple}"
+				size="${view/size}"
+				disabled="disabled"
+				data-ams-data='${tales:object_data(view)}'>
 			<option tal:repeat="entry view/items"
-					tal:attributes="value entry/value;
-									selected python:entry['value'] in view.value;"
-					tal:content="python:view.get_content(entry) if hasattr(view, 'get_content') else entry['content']"></option>
+					value="${entry/value}"
+					selected="${python:'selected' if entry['value'] in view.value else None}">
+				${python:view.get_content(entry) if hasattr(view, 'get_content') else entry['content']}
+			</option>
 		</select>
 	</div>
 </label>
\ No newline at end of file
--- a/src/pyams_form/widget/templates/select-input.pt	Tue Jan 12 13:34:29 2021 +0100
+++ b/src/pyams_form/widget/templates/select-input.pt	Wed Jan 13 14:06:00 2021 +0100
@@ -1,55 +1,53 @@
-<label class="input bordered"
-	   tal:define="has_icon python:view.multiple or not view.required;
+<label tal:define="has_icon python:view.multiple or not view.required;
 				   has_icons python:view.multiple and not view.required;
 				   icons python:'with-icons' if has_icons else 'with-icon'"
 	   tal:omit-tag="python:(not view.multiple) and view.required"
-	   tal:attributes="class string:${default} ${icons}"
+	   class="input bordered ${icons}"
 	   i18n:domain="pyams_form">
-	<i class="icon-append fa fa-trash-o text-primary hint opaque"
+	<i tal:condition="not:view/required"
+		class="icon-append fa fa-trash-o text-primary hint opaque"
 		title="Clear selected values" i18n:attributes="title"
 		data-ams-hint-gravity="se"
 		data-ams-click-handler="MyAMS.helpers.select2ClearSelection"
-		tal:condition="not:view/required"
-		tal:attributes="data-ams-select2-target string:${view/name}:list"></i>
-	<i class="icon-append fa fa-th-list text-primary hint opaque"
+		data-ams-select2-target="${view/name}:list"></i>
+	<i tal:define="icons python:'icon-append-2' if has_icons else ''"
+		tal:condition="view/multiple"
+		class="icon-append fa fa-th-list text-primary hint opaque ${icons}"
 		title="Select all values" i18n:attributes="title"
 		data-ams-hint-gravity="se"
 		data-ams-url="MyAMS.helpers.select2SelectAllHelper"
-		tal:define="icons python:'icon-append-2' if has_icons else ''"
-		tal:condition="view/multiple"
-		tal:attributes="class string:${default} ${icons};
-						data-ams-select2-target string:${view/name}:list"></i>
+		data-ams-select2-target="${view/name}:list"></i>
 	<div class="select2-parent"
 		 tal:omit-tag="not:has_icon">
-		<select class="select2"
-				tal:attributes='id view/id;
-								name string:${view/name}:list;
-								class string:${view/klass} select2;
-								style view/style;
-								title view/title;
-								lang view/lang;
-								onclick view/onclick;
-								ondblclick view/ondblclick;
-								onmousedown view/onmousedown;
-								onmouseup view/onmouseup;
-								onmouseover view/onmouseover;
-								onmousemove view/onmousemove;
-								onmouseout view/onmouseout;
-								onkeypress view/onkeypress;
-								onkeydown view/onkeydown;
-								onkeyup view/onkeyup;
-								disabled view/disabled;
-								tabindex view/tabindex;
-								onfocus view/onfocus;
-								onblur view/onblur;
-								onchange view/onchange;
-								multiple view/multiple;
-								size view/size;
-								data-ams-data tales:object_data(view);'>
+		<select id="${view/id}"
+				name="${view/name}:list"
+				class="${view/klass} select2"
+				style="${view/style}"
+				title="${view/title}"
+				lang="${view/lang}"
+				onclick="${view/onclick}"
+				ondblclick="${view/ondblclick}"
+				onmousedown="${view/onmousedown}"
+				onmouseup="${view/onmouseup}"
+				onmouseover="${view/onmouseover}"
+				onmousemove="${view/onmousemove}"
+				onmouseout="${view/onmouseout}"
+				onkeypress="${view/onkeypress}"
+				onkeydown="${view/onkeydown}"
+				onkeyup="${view/onkeyup}"
+				disabled="${view/disabled}"
+				tabindex="${view/tabindex}"
+				onfocus="${view/onfocus}"
+				onblur="${view/onblur}"
+				onchange="${view/onchange}"
+				multiple="${view/multiple}"
+				size="${view/size}"
+				data-ams-data='${tales:object_data(view)}'>
 			<option tal:repeat="entry view/items"
-					tal:attributes="value entry/value;
-									selected python:entry['value'] in view.value;"
-					tal:content="python:view.get_content(entry) if hasattr(view, 'get_content') else entry['content']"></option>
+					value="${entry/value}"
+					selected="${python:'selected' if entry['value'] in view.value else None}">
+				${python:view.get_content(entry) if hasattr(view, 'get_content') else entry['content']}
+			</option>
 		</select>
 	</div>
 </label>