New tag system

This commit is contained in:
dignajar 2016-02-13 02:50:49 -03:00
parent 95e9835867
commit 3120ee3744
7 changed files with 152 additions and 135 deletions

View File

@ -179,17 +179,53 @@ button.delete-button:hover {
text-transform: uppercase;
}
#jstagList {
margin-top: 5px;
#bludit-tags {
margin-top: 15px;
}
#jstagList span {
background: #f1f1f1;
border-radius: 3px;
color: #2672ec;
#bludit-tags .uk-button {
padding: 0 12px !important;
margin-left: 10px;
}
#jstagList {
margin-top: 15px;
}
#jstagList span.unselect,
#jstagList span.select {
margin-top: 5px;
margin-right: 5px;
padding: 3px 10px;
padding: 1px 15px;
cursor: pointer;
display: inline-block;
border-radius: 3px;
background: #f1f1f1;
vertical-align: middle;
}
#jstagList span.unselect:before {
font-family: FontAwesome;
content: "\f067";
padding-right: 5px;
}
#jstagList span.unselect {
color: #AAA;
}
#jstagList span.unselect:hover {
color: #888;
}
#jstagList span.select:before {
font-family: FontAwesome;
content: "\f00c";
padding-right: 5px;
}
#jstagList span.select {
color: #2672ec;
}
/* ----------- BLUDIT IMAGES V8 ----------- */

View File

@ -21,9 +21,9 @@ class HTML {
{
$html = '</form>';
$script = '<script>
$script = '<script>
$(document).ready(function() {
$(document).ready(function() {
// Prevent the form submit when press enter key.
$("form").keypress(function(e) {
@ -32,9 +32,10 @@ $(document).ready(function() {
}
});
});
});
</script>';
</script>';
echo $html.$script;
}
@ -67,108 +68,32 @@ $(document).ready(function() {
echo $html;
}
public static function tagsAutocomplete($args)
public static function tags($args)
{
// Tag array for Javascript
$tagArray = 'var tagArray = [];';
if(!empty($args['value'])) {
$tagArray = 'var tagArray = ["'.implode('","', $args['value']).'"]';
}
$args['value'] = '';
// Javascript code
include(PATH_JS.'bludit-tags.js');
// Text input
self::formInputText($args);
$html = '<div id="bludit-tags" class="uk-form-row">';
echo '<div id="jstagList"></div>';
$html .= '<input type="hidden" id="jstags" name="tags" value="">';
$script = '<script>
$html .= '<label for="jstagInput" class="uk-form-label">'.$args['label'].'</label>';
'.$tagArray.'
$html .= '<div class="uk-form-controls">';
$html .= '<input id="jstagInput" type="text" class="uk-width-1-2" autocomplete="off">';
$html .= '<button id="jstagAdd" class="uk-button">Add</button>';
function insertTag(tag)
{
// Clean the input text
$("#jstags").val("");
$html .= '<div id="jstagList">';
if(tag.trim()=="") {
return true;
foreach($args['allTags'] as $tag) {
$html .= '<span class="'.( in_array($tag, $args['selectedTags'])?'select':'unselect' ).'">'.$tag.'</span>';
}
// Check if the tag is already inserted.
var found = $.inArray(tag, tagArray);
if(found == -1) {
tagArray.push(tag);
renderTagList();
}
}
function removeTag(tag)
{
var found = $.inArray(tag, tagArray);
if(found => 0) {
tagArray.splice(found, 1);
renderTagList();
}
}
function renderTagList()
{
if(tagArray.length == 0) {
$("#jstagList").html("");
}
else {
$("#jstagList").html("<span>"+tagArray.join("</span><span>")+"</span>");
}
}
$("#jstags").autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['.$args['words'].'];
var matches = [];
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches);
},
onSelect: function(e, value, item) {
// Insert the tag when select whit the mouse click.
insertTag(value);
}
});
$(document).ready(function() {
// When the page is loaded render the tags
renderTagList();
// Remove the tag when click on it.
$("body").on("click", "#jstagList > span", function() {
value = $(this).html();
removeTag(value);
});
// Insert tag when press enter key.
$("#jstags").keypress(function(e) {
if (e.which == 13) {
var value = $(this).val();
insertTag(value);
}
});
// When form submit.
$("form").submit(function(e) {
var list = tagArray.join(",");
$("#jstags").val(list);
});
});
</script>';
echo $script;
$html .= '</div>';
$html .= '</div>';
$html .= '</div>';
echo $html;
}
public static function formInputPassword($args)

View File

@ -77,13 +77,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
));
// Tags input
HTML::tagsAutocomplete(array(
HTML::tags(array(
'name'=>'tags',
'value'=>$_Page->tags(true),
'tip'=>$L->g('Type the tag and press enter'),
'class'=>'uk-width-1-1 uk-form-large',
'label'=>$L->g('Tags'),
'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
'allTags'=>$dbTags->getAll(),
'selectedTags'=>$_Page->tags(true)
));
echo '</li>';

View File

@ -71,13 +71,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
));
// Tags input
HTML::tagsAutocomplete(array(
HTML::tags(array(
'name'=>'tags',
'value'=>$_Post->tags(true),
'tip'=>$L->g('Type the tag and press enter'),
'class'=>'uk-width-1-1 uk-form-large',
'label'=>$L->g('Tags'),
'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
'allTags'=>$dbTags->getAll(),
'selectedTags'=>$_Post->tags(true)
));
echo '</li>';

View File

@ -64,13 +64,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
));
// Tags input
HTML::tagsAutocomplete(array(
HTML::tags(array(
'name'=>'tags',
'value'=>'',
'tip'=>$L->g('Type the tag and press enter'),
'class'=>'uk-width-1-1 uk-form-large',
'label'=>$L->g('Tags'),
'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
'allTags'=>$dbTags->getAll(),
'selectedTags'=>array()
));
echo '</li>';

View File

@ -64,13 +64,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
));
// Tags input
HTML::tagsAutocomplete(array(
HTML::tags(array(
'name'=>'tags',
'value'=>'',
'tip'=>$L->g('Type the tag and press enter'),
'class'=>'uk-width-1-1 uk-form-large',
'label'=>$L->g('Tags'),
'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
'allTags'=>$dbTags->getAll(),
'selectedTags'=>array()
));
echo '</li>';

View File

@ -0,0 +1,64 @@
<script>
function insertTag() {
var newTag = $("#jstagInput").val();
if(newTag.trim()=="") {
return true;
}
$("#jstagList").append("<span class=\"select\">"+newTag+"</span>");
// Clean the input.
$("#jstagInput").val("");
}
$(document).ready(function() {
// Click on tag unselected.
$(document).on("click", ".unselect", function() {
$(this).removeClass("unselect").addClass("select");
});
// Click on tag selected.
$(document).on("click", ".select", function() {
$(this).removeClass("select").addClass("unselect");
});
// Insert tag when click on the button "add".
$(document).on("click", "#jstagAdd", function(e) {
// Prevent forum submit.
e.preventDefault();
insertTag();
});
// Insert tag when press enter key.
$("#jstagInput").keypress(function(e) {
if(e.which == 13) {
insertTag();
}
});
// Before form submit.
$("form").submit(function(e) {
// For each span.select make an array then implode with comma glue.
var list = $("#jstagList > span.select").map(function() {
return $(this).html();
}).get().join(",");
// Insert the tags separated by comma in the input hiden field.
$("#jstags").val( list );
});
});
</script>