New tag system
This commit is contained in:
dignajar
parent
95e9835867
commit
3120ee3744
|
|
@ -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 ----------- */
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue