Added "SEO-enabled" text-line input to display SEO quality based on text length (used for titles)
authorThierry Florac <thierry.florac@onf.fr>
Fri, 08 Dec 2017 11:33:45 +0100
changeset 73 d07ddd028cd0
parent 72 8969b8950fed
child 74 946d4f09ab9f
Added "SEO-enabled" text-line input to display SEO quality based on text length (used for titles)
src/pyams_form/interfaces/form.py
src/pyams_form/widget/__init__.py
src/pyams_form/widget/templates/seo-textline-input.pt
--- a/src/pyams_form/interfaces/form.py	Wed Nov 29 10:31:38 2017 +0100
+++ b/src/pyams_form/interfaces/form.py	Fri Dec 08 11:33:45 2017 +0100
@@ -511,9 +511,16 @@
     """New select2 based widget"""
 
 
+class ISEOTextLineWidget(ITextWidget):
+    """Text line widget with SEO length indicator"""
+
+
 class ITextLineListWidget(ITextWidget):
     """Text line list widget"""
 
+    length = Attribute("Input length")
+    status = Attribute("SEO input status related to text length")
+
 
 #
 # Form events
--- a/src/pyams_form/widget/__init__.py	Wed Nov 29 10:31:38 2017 +0100
+++ b/src/pyams_form/widget/__init__.py	Fri Dec 08 11:33:45 2017 +0100
@@ -20,8 +20,9 @@
 import venusian
 
 # import interfaces
-from pyams_form.interfaces.form import IFormLayer, IResetWidget, ICloseWidget, IDateWidget, IDatetimeWidget, ITimeWidget, \
-    IColorWidget, IHTMLWidget, ISelect2Widget, ITextLineListWidget
+from pyams_form.interfaces.form import IFormLayer, IResetWidget, ICloseWidget, IDateWidget, IDatetimeWidget, \
+    ITimeWidget, \
+    IColorWidget, IHTMLWidget, ISelect2Widget, ITextLineListWidget, ISEOTextLineWidget
 from pyams_form.schema import IResetButton, ICloseButton
 from pyams_skin.interfaces.tinymce import ITinyMCEConfiguration
 from pyams_utils.schema import IColorField, IHTMLField, ITextLineListField
@@ -380,3 +381,31 @@
 @adapter_config(context=(ITextLineListField, IFormLayer), provides=IFieldWidget)
 def TextLineListFieldWidget(field, request):
     return FieldWidget(field, TextLineListWidget(request))
+
+
+#
+# TextLine widget with SEO length status
+#
+
+@widgettemplate_config(mode=INPUT_MODE, template='templates/seo-textline-input.pt', layer=IFormLayer)
+@implementer_only(ISEOTextLineWidget)
+class SEOTextLineWidget(TextWidget):
+    """SEO textline widget"""
+
+    @property
+    def length(self):
+        return len(self.value or '')
+
+    @property
+    def status(self):
+        status = 'success'
+        length = self.length
+        if length < 20 or length > 80:
+            status = 'danger'
+        elif length < 40 or length > 66:
+            status = 'warning'
+        return status
+
+
+def SEOTextLineFieldWidget(field, request):
+    return FieldWidget(field, SEOTextLineWidget(request))
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_form/widget/templates/seo-textline-input.pt	Fri Dec 08 11:33:45 2017 +0100
@@ -0,0 +1,44 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:tal="http://xml.zope.org/namespaces/tal"
+      tal:omit-tag="">
+	<input
+		id="" name="" class="" title="" lang="" disabled=""
+		readonly="" alt="" tabindex="" accesskey="" size="" maxlength=""
+		style="" value="" type="text"
+		tal:attributes="id view/id;
+						name view/name;
+						class view/klass;
+						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;
+						value view/value;
+						disabled view/disabled;
+						tabindex view/tabindex;
+						onfocus view/onfocus;
+						onblur view/onblur;
+						onchange view/onchange;
+						readonly view/readonly;
+						alt view/alt;
+						accesskey view/accesskey;
+						onselect view/onselect;
+						size view/size;
+						maxlength view/maxlength"
+		data-ams-events-handlers='{"keyup": "MyAMS.helpers.setSEOStatus"}' />
+	<div class="progress">
+		<div class="progress-bar" role="progressbar"
+			 aria-valuemin="0" aria-valuemax="100"
+			 tal:attributes="class string:progress-bar progress-bar-${view/status};
+							 aria-valuenow view/length;
+							 style string:width: ${view/length}%;;"></div>
+	</div>
+</html>