improve form and add taggle

templates/form_macros.html.tera

@@ -1,3 +1,5 @@
+{# TEXT #}
+
 {% macro text(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
@@ -8,6 +10,9 @@
 	   value="{{field.value}}">
 {% endmacro %}
 
+
+{# TEXT AREA #}
+
 {% macro longtext(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
@@ -15,6 +20,9 @@
 <textarea id="field-{{field.key}}" name="{{field.key}}">{{field.value}}</textarea>
 {% endmacro %}
 
+
+{# FREE SELECT #}
+
 {% macro free_select(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
@@ -24,14 +32,16 @@
 	   type="text"
 	   list="suggestions-{{field.key}}"
 	   value="{{field.value}}">
-
 <datalist id="suggestions-{{field.key}}">
-{% for option in field.options %}
+{%- for option in field.options %}
 	<option value="{{option}}">
-{% endfor %}
+{%- endfor %}
 </datalist>
 {% endmacro %}
 
+
+{# NUMBER #}
+
 {% macro number(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
@@ -45,23 +55,77 @@
 	   max="{{field.max}}">
 {% endmacro %}
 
+
+{# CHECKBOX #}
+
 {% macro checkbox(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
 </label>
-<input id="field-{{field.key}}"
-	   name="{{field.key}}"
-	   type="checkbox"
-	   {% if field.checked %}checked{% endif %}>
+<label class="checkbox-wrap" for="field-{{field.key}}">
+	<input id="field-{{field.key}}"
+		   name="{{field.key}}"
+		   type="checkbox"
+		   {% if field.checked %}checked{% endif %}>
+</label>
 {% endmacro %}
 
+
+{# SELECT #}
+
 {% macro select(field) %}
 <label for="field-{{field.key}}">
 	{{field.label}}
 </label>
 <select id="field-{{field.key}}" name="{{field.key}}">
-{% for option in field.options %}
-	<option value="{{option}}">{{option}}</option>
-{% endfor %}
+{%- for option in field.options %}
+	<option value="{{option}}" {% if field.value == option %}selected{% endif %}>{{option}}</option>
+{%- endfor %}
 </select>
 {% endmacro %}
+
+
+{# TAGS #}
+
+{% macro tags(field,free=false) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<input type="hidden" id="field-{{field.key}}" name="{{field.key}}" value="{{field.value}}">
+<div class="tag-input" id="tag-input-{{field.key}}"></div>
+<datalist id="suggestions-{{field.key}}">
+{%- for option in field.options %}
+	<option value="{{option}}">
+{%- endfor %}
+</datalist>
+<script>
+	!(function() {
+		let taggle;
+		let hiden_field = document.querySelector('#field-{{field.key}}');
+
+		let onchange = () => {
+			let values = taggle.tag.values.join(" ");
+			hiden_field.setAttribute("value", values);
+		};
+
+		taggle = new Taggle('tag-input-{{field.key}}', {
+			placeholder: 'Enter tags...',
+			allowDuplicates: false,
+			tags: {{field.tags_json | safe }},
+			allowedTags: {% if not free %}{{field.all_tags_json | safe}}{% else %}[]{% endif %},
+			onTagAdd: onchange,
+			onTagRemove: onchange,
+		});
+
+		document.querySelector('#tag-input-{{field.key}} .taggle_input')
+			.setAttribute('list', 'suggestions-{{field.key}}');
+	})();
+</script>
+{% endmacro %}
+
+
+{# FREE TAGS #}
+
+{% macro free_tags(field) %}
+{{ self::tags(field=field, free=true) }}
+{% endmacro %}

templates/index.html.tera

@@ -5,43 +5,41 @@
 	Form
 {%- endblock title %}
 
-{% block content %}
+{% block content -%}
+<form action="/add" method="POST" class="Form">
+{%- for field in fields %}
+<!-- {{ field.key }} -->
+<div class="Row">
+	{%- if field.kind == "string" -%}
+		{{ form::text(field=field) }}
 
-<form action="/add" method="POST">
-	{% for field in fields %}
-	<div class="Row">
-		{% if field.kind == "string" %}
+	{%- elif field.kind == "text" -%}
+		{{ form::longtext(field=field) }}
 
-			{{ form::text(field=field) }}
+	{%- elif field.kind == "number" -%}
+		{{ form::number(field=field) }}
 
-		{% elif field.kind == "text" %}
+	{%- elif field.kind == "bool" -%}
+		{{ form::checkbox(field=field) }}
 
-			{{ form::longtext(field=field) }}
+	{%- elif field.kind == "select" -%}
+		{{ form::select(field=field) }}
 
-		{% elif field.kind == "number" %}
+	{%- elif field.kind == "free_select" -%}
+		{{ form::free_select(field=field) }}
 
-			{{ form::number(field=field) }}
+	{%- elif field.kind == "tags" -%}
+		{{ form::tags(field=field) }}
 
-		{% elif field.kind == "bool" %}
+	{%- elif field.kind == "free_tags" -%}
+		{{ form::free_tags(field=field) }}
 
-			{{ form::checkbox(field=field) }}
+	{%- else -%}
+		{{ field.key }}
 
-		{% elif field.kind == "select" %}
-
-			{{ form::select(field=field) }}
-
-		{% elif field.kind == "free_select" %}
-
-			{{ form::free_select(field=field) }}
-
-		{% else %}
-
-			{{ field.key }}
-
-		{% endif %}
-	</div>
-	{% endfor %}
-
-	<button type="submit">Add</button>
+	{%- endif -%}
+</div>
+{%- endfor %}
+<button type="submit">Add</button>
 </form>
-{% endblock content %}
+{%- endblock content %}

templates/layout.html.tera

@@ -4,6 +4,8 @@
 	<meta charset="UTF-8">
 	<title>{% block title %}{% endblock title %}</title>
 	<link rel="stylesheet" href="style.css">
+	<link rel="stylesheet" href="taggle.css">
+	<script src="taggle.min.js"></script>
 </head>
 <body>
 {% block content %}{% endblock content %}

templates/static/style.css

@@ -2,26 +2,76 @@
 	box-sizing: border-box;
 }
 
-form .Row {
+html, textarea, select {
+	font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif;
+}
+
+.Form .Row {
 	display: flex;
 	padding: .25rem;
 }
 
-form .Row label {
+input[type="text"],
+input[type="number"],
+textarea,
+.tag-input {
+	border: 1px solid silver;
+	padding: 0.5rem;
+	border-radius: 5px;
+	font-size: 1rem;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus,
+.tag-input.active {
+	box-shadow: inset 0 0 0 1px #3c97ff;
+	border-color: #3c97ff;
+	outline: 0 none !important;
+}
+
+.Form label {
 	flex-shrink: 0;
 	width: 10rem;
+	height: 2.1rem;
+	line-height: 2.1rem;
+	vertical-align: middle;
 	text-align: right;
 	display: inline-block;
 	padding-right: .5rem;
+	align-self: flex-start;
 }
 
-form .Row input,
-form .Row select {
+.Form input[type="text"],
+.Form input[type="number"],
+.Form select {
 	height: 2.1rem;
+	width: 15rem;
 }
 
-form .Row textarea {
+.Form textarea {
 	flex-shrink: 1;
 	width: 30rem;
 	height: 6rem;
 }
+
+.Form label.checkbox-wrap {
+	width: 15rem;
+	padding-right: 1rem;
+	text-align: left !important;
+}
+
+.tag-input {
+	position: relative;
+	width: 30rem;
+	padding-bottom: 0rem !important;
+}
+
+.tag-input input,
+.tag-input input:focus {
+	border: 0 transparent;
+	padding: 0;
+	margin: 0;
+	box-shadow: none;
+	outline: 0 none !important;
+}

templates/static/taggle.css

@@ -0,0 +1,113 @@
+/*
+    Basic styles to get you started in styling taggle
+    https://jsfiddle.net/okcoker/aqnspdtr/8/
+*/
+
+/*.textarea {
+    width: 100%;
+    height: 300px;
+    border: 1px solid red;
+}*/
+
+.taggle_list {
+    float: left;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.taggle_input {
+    border: none;
+    outline: none;
+    font-size: 16px;
+    /*font-weight: 300;*/
+}
+
+.taggle_list li {
+    float: left;
+    display: inline-block;
+    white-space: nowrap;
+    font-weight: 500;
+    margin-bottom: .5rem;
+}
+
+.taggle_list .taggle {
+    margin-right: 8px;
+    background: #E2E1DF;
+    padding: .45rem;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+    transition: all .3s;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.taggle_list .taggle_hot {
+    background: #cac8c4;
+}
+
+.taggle_list .taggle .close {
+    font-size: 1.5rem;
+    position: absolute;
+    top: 10px;
+    right: 3px;
+    text-decoration: none;
+    padding: 0;
+    line-height: 0.5;
+    color: #ccc;
+    color: rgba(0, 0, 0, 0.2);
+    padding-bottom: 4px;
+    display: none;
+    border: 0;
+    background: none;
+    cursor: pointer;
+}
+
+.taggle_list .taggle:hover {
+    /*padding: 5px;*/
+    padding-right: 20px;
+    background: #ccc;
+    /*transition: all .3s;*/
+}
+
+.taggle_list .taggle:hover > .close {
+    display: block;
+}
+
+.taggle_list .taggle .close:hover {
+    color: #b5003b;
+}
+
+.taggle_placeholder {
+    position: absolute;
+    color: #CCC;
+    top: 12px;
+    left: 8px;
+    /*transition: opacity, .25s;*/
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.taggle_input {
+    padding: 8px;
+    padding-left: 0;
+    float: left;
+    margin-top: -5px;
+    background: none;
+    width: 100% !important;
+    max-width: 100%;
+}
+
+.taggle_sizer {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: -500px;
+    z-index: -1;
+    visibility: hidden;
+}