From e2f0cdb96fd2b1226a7aeef854eb3c1b14d7ab33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=9Eafak=20Saylam?= Date: Fri, 14 Apr 2017 09:55:22 +0300 Subject: [PATCH 1/4] Simple Javascript Documention added. --- Resources/doc/simple-javascript.md | 73 ++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 Resources/doc/simple-javascript.md diff --git a/Resources/doc/simple-javascript.md b/Resources/doc/simple-javascript.md new file mode 100644 index 0000000..48e502d --- /dev/null +++ b/Resources/doc/simple-javascript.md @@ -0,0 +1,73 @@ +Simple Javascript enhancement +====================== + +You can enhance user experience with a bit of AJAX, making the tag inputact as a multiple select. You need +[Select2](http://select2.github.io/select2/). + +Here is a sneak preview of what you'll get. + +![tag](https://cloud.githubusercontent.com/assets/179866/7724813/3e1d5b50-fef5-11e4-83f1-e05615518548.png) + +#### 1. Template + +Create a form_row like the following: +(src/AppBundle/Resources/views/post.html.twig) + +```twig +... +{{ form_row(form.tagsText, {'attr': {'style': 'display:none !important'}}) }} +... +``` + +#### 2. Javascript + +Add this snippet to your Javascript: +(src/AppBundle/Resources/views/post.html.twig) + +```javascript +$(document).ready(function () { + (function () { + var $tagInput = $('input[name$="[tagsText]"]'); + $('').insertAfter('#post_tagsText'); + + var selectTags = '#tagsText'; + var arrayTags = $tagInput.val().indexOf(",") > -1 ? $tagInput.val().split(',') : $tagInput.val().split(' ').filter(function(item){ return item.trim().length > 0 }); + + function tags() { + $.each(arrayTags, function (key, value) { + $(selectTags).append($("") + .attr("value",value).attr("selected","selected") + .text(value)); + }); + } + function addTag($tag) { + arrayTags.push($tag); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + function removeTag($tag) { + arrayTags = jQuery.grep(arrayTags, function( a ) { + return a !== $tag; + }); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + + $(selectTags).on("select2:select", function (e) { addTag(e.params.data.text); }); + $(selectTags).on("select2:unselect", function (e) { removeTag(e.params.data.text); }); + + + if ($tagInput.length > 0) { + tags(); + } + + $(selectTags).select2({ + tags: true, + tokenSeparators: [',', ' '], + placeholder: "Enter Tag" + }); + }()); + }); +``` + +[← back to documentation index](index.md) From 889b3a712538d06f9fb105278579460dcf1584a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=9Eafak=20Saylam?= Date: Fri, 14 Apr 2017 10:09:54 +0300 Subject: [PATCH 2/4] Doc Index changed. Simple Javascript doc added. --- Resources/doc/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) mode change 100644 => 100755 Resources/doc/index.md diff --git a/Resources/doc/index.md b/Resources/doc/index.md old mode 100644 new mode 100755 index bd95711..d606df4 --- a/Resources/doc/index.md +++ b/Resources/doc/index.md @@ -328,7 +328,7 @@ If this case even occurs, feel free to open a Pull Request. ### 5. Javascript enhancement -If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md). +If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md) or [simple javascript](simple-javascript.md). Here is a sneak preview of what you'll get. From 395d9ccaa30bd9ec8a9c998c2a1643c4f7e31c0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=9Eafak=20Saylam?= Date: Fri, 14 Apr 2017 10:22:49 +0300 Subject: [PATCH 3/4] Simple javascript integration docs of select2 --- Resources/doc/index.md | 2 +- Resources/doc/simple-javascript.md | 73 ++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 1 deletion(-) mode change 100644 => 100755 Resources/doc/index.md create mode 100644 Resources/doc/simple-javascript.md diff --git a/Resources/doc/index.md b/Resources/doc/index.md old mode 100644 new mode 100755 index bd95711..d606df4 --- a/Resources/doc/index.md +++ b/Resources/doc/index.md @@ -328,7 +328,7 @@ If this case even occurs, feel free to open a Pull Request. ### 5. Javascript enhancement -If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md). +If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md) or [simple javascript](simple-javascript.md). Here is a sneak preview of what you'll get. diff --git a/Resources/doc/simple-javascript.md b/Resources/doc/simple-javascript.md new file mode 100644 index 0000000..48e502d --- /dev/null +++ b/Resources/doc/simple-javascript.md @@ -0,0 +1,73 @@ +Simple Javascript enhancement +====================== + +You can enhance user experience with a bit of AJAX, making the tag inputact as a multiple select. You need +[Select2](http://select2.github.io/select2/). + +Here is a sneak preview of what you'll get. + +![tag](https://cloud.githubusercontent.com/assets/179866/7724813/3e1d5b50-fef5-11e4-83f1-e05615518548.png) + +#### 1. Template + +Create a form_row like the following: +(src/AppBundle/Resources/views/post.html.twig) + +```twig +... +{{ form_row(form.tagsText, {'attr': {'style': 'display:none !important'}}) }} +... +``` + +#### 2. Javascript + +Add this snippet to your Javascript: +(src/AppBundle/Resources/views/post.html.twig) + +```javascript +$(document).ready(function () { + (function () { + var $tagInput = $('input[name$="[tagsText]"]'); + $('').insertAfter('#post_tagsText'); + + var selectTags = '#tagsText'; + var arrayTags = $tagInput.val().indexOf(",") > -1 ? $tagInput.val().split(',') : $tagInput.val().split(' ').filter(function(item){ return item.trim().length > 0 }); + + function tags() { + $.each(arrayTags, function (key, value) { + $(selectTags).append($("") + .attr("value",value).attr("selected","selected") + .text(value)); + }); + } + function addTag($tag) { + arrayTags.push($tag); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + function removeTag($tag) { + arrayTags = jQuery.grep(arrayTags, function( a ) { + return a !== $tag; + }); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + + $(selectTags).on("select2:select", function (e) { addTag(e.params.data.text); }); + $(selectTags).on("select2:unselect", function (e) { removeTag(e.params.data.text); }); + + + if ($tagInput.length > 0) { + tags(); + } + + $(selectTags).select2({ + tags: true, + tokenSeparators: [',', ' '], + placeholder: "Enter Tag" + }); + }()); + }); +``` + +[← back to documentation index](index.md) From b6d358376925f4b1280405960ec4d841b5cc7388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=9Eafak=20Saylam?= Date: Mon, 17 Apr 2017 09:34:53 +0300 Subject: [PATCH 4/4] Alternate Ajax Cookbook added. --- Resources/doc/index.md | 2 +- Resources/doc/javascript.md | 74 ++++++++++++++++++++++++++++-- Resources/doc/simple-javascript.md | 73 ----------------------------- 3 files changed, 71 insertions(+), 78 deletions(-) mode change 100755 => 100644 Resources/doc/index.md delete mode 100644 Resources/doc/simple-javascript.md diff --git a/Resources/doc/index.md b/Resources/doc/index.md old mode 100755 new mode 100644 index d606df4..bd95711 --- a/Resources/doc/index.md +++ b/Resources/doc/index.md @@ -328,7 +328,7 @@ If this case even occurs, feel free to open a Pull Request. ### 5. Javascript enhancement -If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md) or [simple javascript](simple-javascript.md). +If you want to enhance user experience with a bit of Javascript/AJAX, read this [small cookbook](javascript.md). Here is a sneak preview of what you'll get. diff --git a/Resources/doc/javascript.md b/Resources/doc/javascript.md index 423938a..d49c748 100644 --- a/Resources/doc/javascript.md +++ b/Resources/doc/javascript.md @@ -8,7 +8,9 @@ Here is a sneak preview of what you'll get. ![tag](https://cloud.githubusercontent.com/assets/179866/7724813/3e1d5b50-fef5-11e4-83f1-e05615518548.png) -#### 1. Controller +#### COOKBOOK - 1 + +##### 1. Controller Create an action like the following: @@ -24,7 +26,7 @@ Create an action like the following: } ``` -#### 2. Template +##### 2. Template Create a template like the following: @@ -37,7 +39,7 @@ Create a template like the following: ] ``` -#### 3. Form +##### 3. Form Your form needs to know the `tags` route. Here is an example: @@ -92,7 +94,7 @@ class TagsTextType extends AbstractType ``` -#### 4. Javascript +##### 4. Javascript Add this snippet to your Javascript: @@ -158,5 +160,69 @@ $(document).ready(function () { }()); }); ``` +#### ALTERNATE - 2 + +##### 1. Template + +Create a form_row like the following: +(src/AppBundle/Resources/views/post.html.twig) + +```twig +... +{{ form_row(form.tagsText, {'attr': {'style': 'display:none !important'}}) }} +... +``` + +##### 2. Javascript + +Add this snippet to your Javascript: +(src/AppBundle/Resources/views/post.html.twig) + +```javascript +$(document).ready(function () { + (function () { + var $tagInput = $('input[name$="[tagsText]"]'); + $('').insertAfter('#post_tagsText'); + + var selectTags = '#tagsText'; + var arrayTags = $tagInput.val().indexOf(",") > -1 ? $tagInput.val().split(',') : $tagInput.val().split(' ').filter(function(item){ return item.trim().length > 0 }); + + function tags() { + $.each(arrayTags, function (key, value) { + $(selectTags).append($("") + .attr("value",value).attr("selected","selected") + .text(value)); + }); + } + function addTag($tag) { + arrayTags.push($tag); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + function removeTag($tag) { + arrayTags = jQuery.grep(arrayTags, function( a ) { + return a !== $tag; + }); + $tagInput.val(arrayTags); + console.log('tag:'+arrayTags); + } + + $(selectTags).on("select2:select", function (e) { addTag(e.params.data.text); }); + $(selectTags).on("select2:unselect", function (e) { removeTag(e.params.data.text); }); + + + if ($tagInput.length > 0) { + tags(); + } + + $(selectTags).select2({ + tags: true, + tokenSeparators: [',', ' '], + placeholder: "Enter Tag" + }); + }()); + }); +``` + [← back to documentation index](index.md) diff --git a/Resources/doc/simple-javascript.md b/Resources/doc/simple-javascript.md deleted file mode 100644 index 48e502d..0000000 --- a/Resources/doc/simple-javascript.md +++ /dev/null @@ -1,73 +0,0 @@ -Simple Javascript enhancement -====================== - -You can enhance user experience with a bit of AJAX, making the tag inputact as a multiple select. You need -[Select2](http://select2.github.io/select2/). - -Here is a sneak preview of what you'll get. - -![tag](https://cloud.githubusercontent.com/assets/179866/7724813/3e1d5b50-fef5-11e4-83f1-e05615518548.png) - -#### 1. Template - -Create a form_row like the following: -(src/AppBundle/Resources/views/post.html.twig) - -```twig -... -{{ form_row(form.tagsText, {'attr': {'style': 'display:none !important'}}) }} -... -``` - -#### 2. Javascript - -Add this snippet to your Javascript: -(src/AppBundle/Resources/views/post.html.twig) - -```javascript -$(document).ready(function () { - (function () { - var $tagInput = $('input[name$="[tagsText]"]'); - $('').insertAfter('#post_tagsText'); - - var selectTags = '#tagsText'; - var arrayTags = $tagInput.val().indexOf(",") > -1 ? $tagInput.val().split(',') : $tagInput.val().split(' ').filter(function(item){ return item.trim().length > 0 }); - - function tags() { - $.each(arrayTags, function (key, value) { - $(selectTags).append($("") - .attr("value",value).attr("selected","selected") - .text(value)); - }); - } - function addTag($tag) { - arrayTags.push($tag); - $tagInput.val(arrayTags); - console.log('tag:'+arrayTags); - } - function removeTag($tag) { - arrayTags = jQuery.grep(arrayTags, function( a ) { - return a !== $tag; - }); - $tagInput.val(arrayTags); - console.log('tag:'+arrayTags); - } - - $(selectTags).on("select2:select", function (e) { addTag(e.params.data.text); }); - $(selectTags).on("select2:unselect", function (e) { removeTag(e.params.data.text); }); - - - if ($tagInput.length > 0) { - tags(); - } - - $(selectTags).select2({ - tags: true, - tokenSeparators: [',', ' '], - placeholder: "Enter Tag" - }); - }()); - }); -``` - -[← back to documentation index](index.md)