Skip to content

Commit

Permalink
- Added gulp-nunjucks devDependencies in order to completely refact…
Browse files Browse the repository at this point in the history 
…or the `index.html` demos page

- Added new Gulp task for compiling the homepage `index.html` containing all the examples
- Added a new Gulp task for watching & compiling all the examples, individually, so each example could be used for testing purposes
  • Loading branch information
@yairEO
yairEO committed Apr 28, 2024
1 parent 3ecfbc2 commit eacaa77
Show file tree
Hide file tree
Showing 76 changed files with 10,957 additions and 4,443 deletions.
101 changes: 101 additions & 0 deletions docs/examples/dist/RTL.html
View file
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>📌 RTL</title>
<meta name="description" content="Converts HTML input/textarea into Tags component">
<meta name="author" content="Yair Even-Or">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="tag, tags, tagging, tagify, javascript, component, web">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔖</text></svg>">

<!-- Tagify source code & styles -->
<script src="../../../dist/tagify.js"></script>
<link href="../../../dist/tagify.css" rel="stylesheet">

<!-- 3rd-party files for d&d support -->
<link rel="stylesheet" href="https://unpkg.com/@yaireo/dragsort/dist/dragsort.css" media="print" onload="this.media='all'">
<script src="https://unpkg.com/@yaireo/dragsort"></script>

<style>
html, body{ min-height:100%; scroll-behavior: smooth; }
body{
font:14px Arial;
margin:0;
overflow-x:hidden;
}

tags + input, tags + textarea {
position: initial !important;
left: 0 !important;
transform: none !important;
width: 100%;
padding: 6px;
border: 2px solid #999;
margin-bottom: 1em;
border-radius: 5px;
background: #F1F1F1;
}
</style>

<script>
// if IE, add IE tagify's polyfills
!function( d ) {
if( !d.currentScript ){
var s = d.createElement( 'script' );
s.src = 'dist/tagify.polyfills.min.js';
d.head.appendChild( s );
}
}(document)
</script>
</head>

<body>
<style>
.tagify__dropdown--rtl-example {
max-width: none !important;
}

/* each suggestion item in the dropdown should be rendered as a single line of text */
.tagify__dropdown--rtl-example .tagify__dropdown__item {
white-space: nowrap;
}

/* just for fun */
.tagify__dropdown--rtl-example .tagify__dropdown__item > em {
font-weight: 700;
}

/* in this example the tagify itself is narrower than the other examples */
.tagify--rtl-exmaple {
min-width: 300px;
}
</style>
<div dir='rtl'>
<input name='rtl-example' class='tagify--rtl-exmaple' placeholder='לחץ בשדה והוסף ערך'/>
</div>
<script>
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=rtl-example]');

// initialize Tagify on the above input node reference
new Tagify(input, {
whitelist: [
{ value: "מיכאל כהן", full: "<em>מיכאל כהן</em> - פיתוח תוכנה מתקדם ויישום טכנולוגיות חדשניות בתחום התעשייה והייצור" },
{ value: "שרה לוי", full: "<em>שרה לוי</em> - ניהול ופיתוח פתרונות אקולוגיים וסביבתיים למתן יתרון תחרותי לעסקים" },
{ value: "אברהם גולן", full: "<em>אברהם גולן</em> - יישום ופיתוח טכנולוגיות מתקדמות לשיפור פרודוקטיביות ויצירתיות בארגונים" },
{ value: "רחל רביבו", full: "<em>רחל רביבו</em> - מחקר ופיתוח טכנולוגי בתחום החדשנות והיזמות לקידום עסקים ותעשיות" },
{ value: "דוד כהן", full: "<em>דוד כהן</em> - פיתוח ויישום טכנולוגיות מתקדמות לשיפור תשתיות מידע עסקיות" },
{ value: "רבקה אריאל", full: "<em>רבקה אריאל</em> - ייזום ופיתוח מוצרים חדשניים עבור תעשיות יצירתיות ומתקדמות" }
],
dropdown: {
mapValueTo: 'full',
classname: 'tagify__dropdown--rtl-example',
enabled: 0, // shows the suggestiosn dropdown once field is focused
RTL: true,
escapeHTML: false // allows HTML inside each suggestion item
}
})
</script>
</body>
</html>
62 changes: 62 additions & 0 deletions docs/examples/dist/_demos_page.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>📌 _demos_page</title>
<meta name="description" content="Converts HTML input/textarea into Tags component">
<meta name="author" content="Yair Even-Or">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="tag, tags, tagging, tagify, javascript, component, web">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔖</text></svg>">

<!-- Tagify source code & styles -->
<script src="../../../dist/tagify.js"></script>
<link href="../../../dist/tagify.css" rel="stylesheet">

<!-- 3rd-party files for d&d support -->
<link rel="stylesheet" href="https://unpkg.com/@yaireo/dragsort/dist/dragsort.css" media="print" onload="this.media='all'">
<script src="https://unpkg.com/@yaireo/dragsort"></script>

<style>
html, body{ min-height:100%; scroll-behavior: smooth; }
body{
font:14px Arial;
margin:0;
overflow-x:hidden;
}

tags + input, tags + textarea {
position: initial !important;
left: 0 !important;
transform: none !important;
width: 100%;
padding: 6px;
border: 2px solid #999;
margin-bottom: 1em;
border-radius: 5px;
background: #F1F1F1;
}
</style>

<script>
// if IE, add IE tagify's polyfills
!function( d ) {
if( !d.currentScript ){
var s = d.createElement( 'script' );
s.src = 'dist/tagify.polyfills.min.js';
d.head.appendChild( s );
}
}(document)
</script>
</head>

<body>
<style>

</style>

<script>

</script>
</body>
</html>
142 changes: 142 additions & 0 deletions docs/examples/dist/advance-options.html
View file
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>📌 advance-options</title>
<meta name="description" content="Converts HTML input/textarea into Tags component">
<meta name="author" content="Yair Even-Or">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="tag, tags, tagging, tagify, javascript, component, web">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔖</text></svg>">

<!-- Tagify source code & styles -->
<script src="../../../dist/tagify.js"></script>
<link href="../../../dist/tagify.css" rel="stylesheet">

<!-- 3rd-party files for d&d support -->
<link rel="stylesheet" href="https://unpkg.com/@yaireo/dragsort/dist/dragsort.css" media="print" onload="this.media='all'">
<script src="https://unpkg.com/@yaireo/dragsort"></script>

<style>
html, body{ min-height:100%; scroll-behavior: smooth; }
body{
font:14px Arial;
margin:0;
overflow-x:hidden;
}

tags + input, tags + textarea {
position: initial !important;
left: 0 !important;
transform: none !important;
width: 100%;
padding: 6px;
border: 2px solid #999;
margin-bottom: 1em;
border-radius: 5px;
background: #F1F1F1;
}
</style>

<script>
// if IE, add IE tagify's polyfills
!function( d ) {
if( !d.currentScript ){
var s = d.createElement( 'script' );
s.src = 'dist/tagify.polyfills.min.js';
d.head.appendChild( s );
}
}(document)
</script>
</head>

<body>
<style>
.advance-options .tagify__tag{
--tag-hover: var(--tag-bg);
}
</style>
<input class='advance-options' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'>
<script>
var input = document.querySelector('input.advance-options'),
tagify = new Tagify(input, {
pattern : /^.{0,20}$/, // Validate typed tag(s) by Regex. Here maximum chars length is defined as "20"
delimiters : ",| ", // add new tags when a comma or a space character is entered
trim : false, // if "delimiters" setting is using space as a delimeter, then "trim" should be set to "false"
keepInvalidTags : true, // do not remove invalid tags (but keep them marked as invalid)
// createInvalidTags: false,
editTags : {
clicks: 2, // single click to edit a tag
keepInvalid: false // if after editing, tag is invalid, auto-revert
},
maxTags : 6,
blacklist : ["foo", "bar", "baz"],
whitelist : ["temple","stun","detective","sign","passion","routine","deck","discriminate","relaxation","fraud","attractive","soft","forecast","point","thank","stage","eliminate","effective","flood","passive","skilled","separation","contact","compromise","reality","district","nationalist","leg","porter","conviction","worker","vegetable","commerce","conception","particle","honor","stick","tail","pumpkin","core","mouse","egg","population","unique","behavior","onion","disaster","cute","pipe","sock","dialect","horse","swear","owner","cope","global","improvement","artist","shed","constant","bond","brink","shower","spot","inject","bowel","homosexual","trust","exclude","tough","sickness","prevalence","sister","resolution","cattle","cultural","innocent","burial","bundle","thaw","respectable","thirsty","exposure","team","creed","facade","calendar","filter","utter","dominate","predator","discover","theorist","hospitality","damage","woman","rub","crop","unpleasant","halt","inch","birthday","lack","throne","maximum","pause","digress","fossil","policy","instrument","trunk","frame","measure","hall","support","convenience","house","partnership","inspector","looting","ranch","asset","rally","explicit","leak","monarch","ethics","applied","aviation","dentist","great","ethnic","sodium","truth","constellation","lease","guide","break","conclusion","button","recording","horizon","council","paradox","bride","weigh","like","noble","transition","accumulation","arrow","stitch","academy","glimpse","case","researcher","constitutional","notion","bathroom","revolutionary","soldier","vehicle","betray","gear","pan","quarter","embarrassment","golf","shark","constitution","club","college","duty","eaux","know","collection","burst","fun","animal","expectation","persist","insure","tick","account","initiative","tourist","member","example","plant","river","ratio","view","coast","latest","invite","help","falsify","allocation","degree","feel","resort","means","excuse","injury","pupil","shaft","allow","ton","tube","dress","speaker","double","theater","opposed","holiday","screw","cutting","picture","laborer","conservation","kneel","miracle","brand","nomination","characteristic","referral","carbon","valley","hot","climb","wrestle","motorist","update","loot","mosquito","delivery","eagle","guideline","hurt","feedback","finish","traffic","competence","serve","archive","feeling","hope","seal","ear","oven","vote","ballot","study","negative","declaration","particular","pattern","suburb","intervention","brake","frequency","drink","affair","contemporary","prince","dry","mole","lazy","undermine","radio","legislation","circumstance","bear","left","pony","industry","mastermind","criticism","sheep","failure","chain","depressed","launch","script","green","weave","please","surprise","doctor","revive","banquet","belong","correction","door","image","integrity","intermediate","sense","formal","cane","gloom","toast","pension","exception","prey","random","nose","predict","needle","satisfaction","establish","fit","vigorous","urgency","X-ray","equinox","variety","proclaim","conceive","bulb","vegetarian","available","stake","publicity","strikebreaker","portrait","sink","frog","ruin","studio","match","electron","captain","channel","navy","set","recommend","appoint","liberal","missile","sample","result","poor","efflux","glance","timetable","advertise","personality","aunt","dog"],
transformTag : transformTag,
backspace : "edit",
placeholder : "Type something",
dropdown : {
enabled: 1, // show suggestion after 1 typed character
fuzzySearch: false, // match only suggestions that starts with the typed characters
position: 'text', // position suggestions list next to typed text
caseSensitive: true, // allow adding duplicate items if their case is different
},
templates: {
dropdownItemNoMatch: function(data) {
return `<div class='${this.settings.classNames.dropdownItem}' value="noMatch" tabindex="0" role="option">No suggestion found for: <strong>${data.value}</strong></div>`
}
}
})

// generate a random color (in HSL format, which I like to use)
function getRandomColor(){
function rand(min, max) {
return min + Math.random() * (max - min);
}

var h = rand(1, 360)|0,
s = rand(40, 70)|0,
l = rand(65, 72)|0;

return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}

function transformTag( tagData ){
tagData.color = getRandomColor();
tagData.style = "--tag-bg:" + tagData.color;

if( tagData.value.toLowerCase() == 'shit' )
tagData.value = 's✲✲t'
}

tagify.on('add', function(e){
console.log(e.detail)
})

tagify.on('invalid', function(e){
console.log(e, e.detail);
})

var clickDebounce;

tagify.on('click', function(e){
const {tag:tagElm, data:tagData} = e.detail;

// a delay is needed to distinguish between regular click and double-click.
// this allows enough time for a possible double-click, and noly fires if such
// did not occur.
clearTimeout(clickDebounce);
clickDebounce = setTimeout(() => {
tagData.color = getRandomColor();
tagData.style = "--tag-bg:" + tagData.color;
tagify.replaceTag(tagElm, tagData);
}, 200);
})

tagify.on('dblclick', function(e){
// when souble clicking, do not change the color of the tag
clearTimeout(clickDebounce);
})
</script>
</body>
</html>
66 changes: 66 additions & 0 deletions docs/examples/dist/basic.html
View file
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>📌 basic</title>
<meta name="description" content="Converts HTML input/textarea into Tags component">
<meta name="author" content="Yair Even-Or">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="tag, tags, tagging, tagify, javascript, component, web">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔖</text></svg>">

<!-- Tagify source code & styles -->
<script src="../../../dist/tagify.js"></script>
<link href="../../../dist/tagify.css" rel="stylesheet">

<!-- 3rd-party files for d&d support -->
<link rel="stylesheet" href="https://unpkg.com/@yaireo/dragsort/dist/dragsort.css" media="print" onload="this.media='all'">
<script src="https://unpkg.com/@yaireo/dragsort"></script>

<style>
html, body{ min-height:100%; scroll-behavior: smooth; }
body{
font:14px Arial;
margin:0;
overflow-x:hidden;
}

tags + input, tags + textarea {
position: initial !important;
left: 0 !important;
transform: none !important;
width: 100%;
padding: 6px;
border: 2px solid #999;
margin-bottom: 1em;
border-radius: 5px;
background: #F1F1F1;
}
</style>

<script>
// if IE, add IE tagify's polyfills
!function( d ) {
if( !d.currentScript ){
var s = d.createElement( 'script' );
s.src = 'dist/tagify.polyfills.min.js';
d.head.appendChild( s );
}
}(document)
</script>
</head>

<body>
<style>

</style>
<input name='basic' value='tag1, tag2' autofocus>
<script>
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');

// initialize Tagify on the above input node reference
new Tagify(input)
</script>
</body>
</html>

0 comments on commit eacaa77

Please sign in to comment.