Commit a30dfac6 authored by Marc Egger's avatar Marc Egger

finishing touches

parent 543910fc
Pipeline #3244 passed with stages
in 3 minutes and 47 seconds
......@@ -191,12 +191,12 @@
privateMethods.spliceTag.call($self, TagIdToRemove, e.data);
});
privateMethods.refreshHiddenTagList.call($self);
if (!ignoreEvents) {
$self.trigger('tm:pushed', [tag, tagId]);
}
privateMethods.refreshHiddenTagList.call($self);
privateMethods.showOrHide.call($self);
//if (tagManagerOptions.maxTags > 0 && tlis.length >= tagManagerOptions.maxTags) {
// obj.hide();
......
......@@ -9,6 +9,10 @@
/* @depend Utils.js */
function reallog(thing) {
console.log(JSON.parse(JSON.stringify(thing)));
}
var QfqNS = QfqNS || {};
(function (n) {
......@@ -57,42 +61,73 @@ var QfqNS = QfqNS || {};
};
n.TypeAhead.installWithTags = function ($element, bloodhoundConfiguration) {
// initialize bloodhound (typeahead suggestion engine)
var suggestions = new Bloodhound(bloodhoundConfiguration);
suggestions.initialize();
// read existing tags from value
// prevent form submit when enter key is pressed
$element.off('keyup');
$element.on('keypress keyup', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
return false;
}
});
// list to keep tracks of existing tags and those added during the current session
// expected JSON format: [{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]
var existingTags = $element.val() !== '' ? JSON.parse($element.val()) : [];
var existingTags = JSON.parse($element.val());
// list of current typeahead suggestions
var typeaheadList = existingTags.slice();
// get list of possible keys a user can press to push a tag (list of keycodes)
var delimiters = $element.data('typeahead-tag-delimiters');
delimiters = delimiters !== undefined ? delimiters : [9, 13, 44];
// validator function for pedantic mode
var pedanticValidator = function (tag) {
// check if tag is in typeahead suggestions
var tagLookup = typeaheadList.filter(function (t) {return t.value.toLowerCase() === tag.toLowerCase();})[0];
return tagLookup !== undefined;
};
// initialize tagsManager
var tagApi = $element.tagsManager({
prefilled: $.map(existingTags, function (t) {return t.value;}),
deleteTagsOnBackspace: false,
hiddenTagListName: $element.attr('name'),
tagClass: 'qfq-typeahead-tag',
delimiters: delimiters,
validator: !!$element.data('typeahead-pedantic') ? pedanticValidator : null,
});
tagApi.bind('tm:pushed', function (e, tag, tagId) {
// when tag is pushed, look up key and add it to existingTags
tagApi.bind('tm:pushed', function (e, tag) {
var tagLookup = typeaheadList.filter(function (t) {return t.value.toLowerCase() === tag.toLowerCase();})[0];
var key = undefined === tagLookup ? 0 : tagLookup;
if (undefined === tagLookup) {
key = 0;
existingTags.push({key: 0, value: tag});
} else {
key = tagLookup.key //todo
existingTags.push({key: tagLookup.key, value: tagLookup.value});
}
//todo
});
// when the hidden input field changes, overwrite value with tag object list
tagApi.bind('tm:hiddenUpdate', function (e, tags, hiddenInput) {
// todo
hiddenInput.val('bubu');
//$('[name="' + hiddenInputName + '"]').val('bubu');
var tagObjects = $.map(tags, function (t) {
return existingTags.filter(function (tt) {return tt.value === t;})[0];
});
hiddenInput.val(JSON.stringify(tagObjects));
});
$element.removeAttr('name');
// add existing tags
$.each(existingTags, function (i, tag) {
tagApi.tagsManager('pushTag', tag.value);
});
// add typahead
$element.typeahead({
// options
hint: n.TypeAhead.getHint($element),
......@@ -115,9 +150,13 @@ var QfqNS = QfqNS || {};
})($element)
}
});
// directly add tag when clicked on in typahead menu
$element.bind('typeahead:selected', function (event, sugg) {
tagApi.tagsManager("pushTag", sugg.value);
});
// update typahead list when typahead changes
$element.bind('typeahead:render', function (event, sugg) {
typeaheadList.length = 0;
typeaheadList.push.apply(typeaheadList, sugg);
......
......@@ -665,6 +665,11 @@ select.qfq-locked:invalid {
width: 100%;
}
// typeAhead tags
span.qfq-typeahead-tag {
margin-right: 5px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: unset;
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Type Ahead Mock</title>
</head>
<body>
<label>Submit to
<select name="submitTo" id="submitTo">
<option>404 error</option>
<option>save_error_matno.json</option>
<option>save_error_geburtstag.json</option>
<option>save_no_redirect.json</option>
<option>save_server_redirect.json</option>
<option>save_client_redirect.json</option>
</select>
</label>
<label>Delete URL
<select name="deleteUrl" id="deleteUrl">
<option>404 error</option>
<option>delete_client_redirect.json</option>
<option>delete_error.json</option>
<option>delete_no_redirect.json</option>
<option>delete_server_redirect.json</option>
</select>
</label>
<label>Upload to
<select name="uploadTo" id="uploadTo">
<option>404 error</option>
<option>uploadhandler.php</option>
<option>uploadhandler_error.php</option>
</select>
</label>
<label>File Delete Url
<select name="fileDeleteUrl" id="fileDeleteUrl">
<option>404 error</option>
<option>delete_file_ok.json</option>
<option>delete_file_error.json</option>
</select>
</label>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"
data-class-on-change="wdc"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<div id="formgroup1" class="form-group">
<div class="col-md-2">
<label for="dropdown1" class="control-label">Text input</label>
</div>
<div class="col-md-6">
<input id="dropdown1" type="text" class="form-control qfq-typeahead" name="dropdown1"
data-typeahead-sip="abcde" data-typeahead-minlength="1" data-typeahead-limit="3">
</div>
</div>
<div id="formgroup2" class="form-group">
<div class="col-md-2">
<label for="dropdown2" class="control-label">Text input 2 (pedantic, required)</label>
</div>
<div class="col-md-6">
<input id="dropdown2" type="text" class="form-control qfq-typeahead" name="dropdown2"
data-typeahead-sip="abcdef" data-typeahead-limit="10" data-typeahead-minlength="1"
data-typeahead-pedantic="true" required>
</div>
<div class="col-md-4">
<p class="help-block with-errors"></p>
</div>
</div>
<div id="formgroup3" class="form-group">
<div class="col-md-2">
<label for="dropdown3" class="control-label">Text input 3 (prefilled)</label>
</div>
<div class="col-md-6">
<input id="dropdown3" type="text" class="form-control qfq-typeahead" name="dropdown3"
data-typeahead-sip="abcdef" data-typeahead-limit="10" data-typeahead-minlength="1"
value="TX">
</div>
</div>
<div id="formgroup4" class="form-group">
<div class="col-md-2">
<label for="dropdown3" class="control-label">Text input 4 (tags)</label>
</div>
<div class="col-md-6">
<input id="dropdown4" type="text" class="form-control qfq-typeahead" name="dropdown4"
data-typeahead-sip="abcdef" data-typeahead-tags="true" data-typeahead-limit="10" data-typeahead-minlength="1" value="Alabama,Coneticut, gugus"
>
</div>
</div>
<div id="formgroup5" class="form-group">
<div class="col-md-2">
<label for="dropdown3" class="control-label">Text input 4 (tags, pedantic)</label>
</div>
<div class="col-md-6">
<input id="dropdown5" type="text" class="form-control qfq-typeahead" name="dropdown5"
data-typeahead-sip="abcdef" data-typeahead-pedantic="true" data-typeahead-tags="true" data-typeahead-limit="10" data-typeahead-minlength="1" value="Alabama,Coneticut"
>
</div>
</div>
</form>
</div>
<script type="text/x-handlebars-template">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/typeahead.bundle.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
// Do not remove, or selenium tests will fail.
QfqNS.QfqPage.prototype.beforeUnloadHandler = function (evt) {
};
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
typeAheadUrl: 'api/typeahead.php'
});
$("#submitTo").on("change", function (evt) {
qfqPage.settings.submitTo = 'api/' + $(evt.target).val();
qfqPage.qfqForm.submitTo = 'api/' + $(evt.target).val();
});
$("#deleteUrl").on("change", function (evt) {
qfqPage.settings.deleteUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.deleteUrl = 'api/' + $(evt.target).val();
});
$("#uploadTo").on("change", function (evt) {
qfqPage.settings.fileUploadTo = 'api/' + $(evt.target).val();
qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val();
});
$("#fileDeleteUrl").on("change", function (evt) {
qfqPage.settings.fileDeleteUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.fileDeleter.targetUrl = 'api/' + $(evt.target).val();
});
$('#myForm').on('invalid', function () {
console.log("Invalid event catched");
});
QfqNS.Log.level = 0;
});
</script>
</body>
</html>
......@@ -137,15 +137,17 @@
<div id="formgroup4" class="form-group">
<div class="col-md-2">
<label for="dropdown3" class="control-label">Text input 4 (tags)</label>
<label for="tags1" class="control-label">Text input 4 (tags)</label>
</div>
<div class="col-md-6">
<input id="dropdown4" type="text" class="form-control qfq-typeahead" name="dropdown4"
<input id="tags1" type="text" class="form-control qfq-typeahead" name="tags1"
data-typeahead-sip="abcdef"
data-typeahead-tags="true"
data-typeahead-limit="10"
data-typeahead-minlength="1"
data-typeahead-tags="true"
data-typeahead-tag-delimiters="[9, 13]"
value="<?php echo $tagsSafeJson; ?>"
>
</div>
......@@ -154,12 +156,18 @@
<div id="formgroup5" class="form-group">
<div class="col-md-2">
<label for="dropdown3" class="control-label">Text input 4 (tags, pedantic)</label>
<label for="tags2" class="control-label">Text input 4 (tags, pedantic)</label>
</div>
<div class="col-md-6">
<input id="dropdown5" type="text" class="form-control qfq-typeahead" name="dropdown5"
data-typeahead-sip="abcdef" data-typeahead-pedantic="true" data-typeahead-tags="true" data-typeahead-limit="10" data-typeahead-minlength="1"
<input id="tags2" type="text" class="form-control qfq-typeahead" name="tags2"
data-typeahead-sip="abcdef"
data-typeahead-limit="10"
data-typeahead-minlength="1"
data-typeahead-tags="true"
data-typeahead-pedantic="true"
data-typeahead-tag-delimiters="[9, 44]"
value="<?php echo $tagsSafeJson; ?>"
>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment