add typeahead.js, fix #362
This commit is contained in:
vitalets
parent
88514be8ec
commit
06934b9656
@ -3,6 +3,7 @@ X-editable changelog
|
||||
|
||||
Version 1.5.0 wip
|
||||
----------------------------
|
||||
[enh #362] add twitter typeahead.js (vitalets)
|
||||
[enh] select: add `sourceOptions` to modify source request method and params (vitalets)
|
||||
[enh #377] add bool option `escape` to allow html as content (vitalets)
|
||||
[bug #344] fix determing empty for html content (vitalets)
|
||||
|
||||
@ -21,7 +21,7 @@ Editableform based on Twitter Bootstrap 3
|
||||
var defaultClass = 'input-sm';
|
||||
|
||||
//bs3 add `form-control` class to standard inputs
|
||||
var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time'.split(',');
|
||||
var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time,typeaheadjs'.split(',');
|
||||
if(~$.inArray(this.input.type, stdtypes)) {
|
||||
this.input.$input.addClass('form-control');
|
||||
if(emptyInputClass) {
|
||||
|
||||
1139
src/inputs-ext/typeaheadjs/lib/typeahead.js
Normal file
1139
src/inputs-ext/typeaheadjs/lib/typeahead.js
Normal file
File diff suppressed because it is too large
Load Diff
49
src/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css
Normal file
49
src/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css
Normal file
@ -0,0 +1,49 @@
|
||||
.twitter-typeahead .tt-query,
|
||||
.twitter-typeahead .tt-hint {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tt-dropdown-menu {
|
||||
min-width: 160px;
|
||||
margin-top: 2px;
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-is-under-cursor {
|
||||
color: #fff;
|
||||
background-color: #0081c2;
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-is-under-cursor a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
/*
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
.twitter-typeahead .tt-query,
|
||||
.twitter-typeahead .tt-hint {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
/* height: 34px; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.twitter-typeahead .tt-hint {
|
||||
color: #a1a1a1;
|
||||
z-index: 1;
|
||||
/* padding: 6px 12px;*/
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.twitter-typeahead .tt-query {
|
||||
z-index: 2;
|
||||
/* border-radius: 4px !important; */
|
||||
}
|
||||
/*
|
||||
.input-group-addon + .twitter-typeahead > .tt-query {
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
}
|
||||
|
||||
.input-group-appended > .twitter-typeahead > .tt-query {
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
}
|
||||
*/
|
||||
.tt-dropdown-menu {
|
||||
min-width: 160px;
|
||||
margin-top: 2px;
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-is-under-cursor {
|
||||
color: #fff;
|
||||
background-color: #0081c2;
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-is-under-cursor a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
86
src/inputs-ext/typeaheadjs/typeaheadjs.js
Normal file
86
src/inputs-ext/typeaheadjs/typeaheadjs.js
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
Typeahead.js input, based on [Twitter Typeahead](http://twitter.github.io/typeahead.js)
|
||||
It is mainly replacement of typeahead in Bootstrap 3.
|
||||
|
||||
|
||||
@class typeaheadjs
|
||||
@extends text
|
||||
@since 1.5.0
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="country" data-type="typeaheadjs" data-pk="1" data-url="/post" data-title="Input country"></a>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#country').editable({
|
||||
value: 'ru',
|
||||
typeahead: {
|
||||
name: 'country',
|
||||
local: [
|
||||
{value: 'ru', tokens: ['Russia']},
|
||||
{value: 'gb', tokens: ['Great Britain']},
|
||||
{value: 'us', tokens: ['United States']}
|
||||
],
|
||||
template: function(item) {
|
||||
return item.tokens[0] + ' (' + item.value + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
**/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var Constructor = function (options) {
|
||||
this.init('typeaheadjs', options, Constructor.defaults);
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.text);
|
||||
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.renderClear();
|
||||
this.setClass();
|
||||
this.setAttr('placeholder');
|
||||
this.$input.typeahead(this.options.typeahead);
|
||||
|
||||
// copy `input-sm | input-lg` classes to placeholder input
|
||||
if($.fn.editableform.engine === 'bs3') {
|
||||
if(this.$input.hasClass('input-sm')) {
|
||||
this.$input.siblings('input.tt-hint').addClass('input-sm');
|
||||
}
|
||||
if(this.$input.hasClass('input-lg')) {
|
||||
this.$input.siblings('input.tt-hint').addClass('input-lg');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Constructor.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
|
||||
/**
|
||||
@property tpl
|
||||
@default <input type="text">
|
||||
**/
|
||||
tpl:'<input type="text">',
|
||||
/**
|
||||
Configuration of typeahead itself.
|
||||
[Full list of options](https://github.com/twitter/typeahead.js#dataset).
|
||||
|
||||
@property typeahead
|
||||
@type object
|
||||
@default null
|
||||
**/
|
||||
typeahead: null,
|
||||
/**
|
||||
Whether to show `clear` button
|
||||
|
||||
@property clear
|
||||
@type boolean
|
||||
@default true
|
||||
**/
|
||||
clear: true
|
||||
});
|
||||
|
||||
$.fn.editabletypes.typeaheadjs = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
@ -220,6 +220,16 @@ define(function () {
|
||||
init: function(require) {
|
||||
loadCss(require.toUrl("./address.css"));
|
||||
}
|
||||
},
|
||||
'inputs-ext/typeaheadjs/typeaheadjs': {
|
||||
deps: [
|
||||
'require',
|
||||
'inputs/text',
|
||||
'inputs-ext/typeaheadjs/lib/typeahead'
|
||||
],
|
||||
init: function(require) {
|
||||
loadCss(require.toUrl("./lib/typeahead.js-bootstrap.css"));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -231,7 +241,8 @@ define(function () {
|
||||
shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat(
|
||||
[
|
||||
'inputs/date/datefield',
|
||||
'inputs/datetime/datetimefield'
|
||||
'inputs/datetime/datetimefield',
|
||||
'inputs-ext/typeaheadjs/typeaheadjs'
|
||||
//'inputs-ext/wysihtml5/wysihtml5',
|
||||
//'inputs/typeahead'
|
||||
]);
|
||||
|
||||
@ -56,9 +56,9 @@ require(["loader", jqurl], function(loader) {
|
||||
'test/unit/datefield',
|
||||
'test/unit/date',
|
||||
'test/unit/datetimefield',
|
||||
'test/unit/datetime'
|
||||
'test/unit/datetime',
|
||||
//'test/unit/wysihtml5'
|
||||
//'test/unit/typeahead'
|
||||
'test/unit/typeaheadjs'
|
||||
];
|
||||
break;
|
||||
|
||||
|
||||
66
test/unit/typeaheadjs.js
Normal file
66
test/unit/typeaheadjs.js
Normal file
@ -0,0 +1,66 @@
|
||||
$(function () {
|
||||
|
||||
module("typeaheadjs", {
|
||||
setup: function(){
|
||||
sfx = $('#qunit-fixture'),
|
||||
fx = $('#async-fixture');
|
||||
$.support.transition = false;
|
||||
}
|
||||
});
|
||||
|
||||
asyncTest("should load correct value and save new entered text ", function () {
|
||||
var v = 'ru',
|
||||
e = $('<a href="#" data-pk="1" data-name="text1" data-type="typeaheadjs" data-url="post.php"></a>').appendTo(fx).editable({
|
||||
value: v,
|
||||
typeahead: {
|
||||
name: 'country',
|
||||
local: [
|
||||
{value: 'ru', tokens: ['Russia']},
|
||||
{value: 'gb', tokens: ['Great Britain']},
|
||||
{value: 'us', tokens: ['United States']}
|
||||
],
|
||||
template: function(item) {
|
||||
return item.tokens[0] + ' (' + item.value + ')';
|
||||
}
|
||||
}
|
||||
}),
|
||||
nv = 'gb',
|
||||
newText = 'G';
|
||||
|
||||
equal(e.data().editable.value, v, 'initial value ok');
|
||||
|
||||
e.click();
|
||||
var p = tip(e),
|
||||
$input = p.find('input.tt-query');
|
||||
|
||||
ok(p.is(':visible'), 'popup visible');
|
||||
ok($input.length, 'input exists');
|
||||
equal($input.val(), v, 'input contains correct text');
|
||||
ok($input.typeahead, 'typeahead applied to input');
|
||||
|
||||
// can`t find way to trigger dropdown menu of typeahead
|
||||
var ev = jQuery.Event( "keydown.tt", { keyCode: 64 } );
|
||||
$input.val(nv).trigger('queryChanged');
|
||||
|
||||
/*
|
||||
ok(p.find('.tt-dropdown-menu').is(':visible'), 'dropdown visible');
|
||||
equal(p.find('tt-suggestion').length, 1, 'suggestion exists');
|
||||
p.find('tt-suggestion:eq(0)').mouseover().click();
|
||||
equal($input.val(), nv, 'input contain correct text');
|
||||
*/
|
||||
|
||||
p.find('form').submit();
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
ok(!p.is(':visible'), 'popup closed');
|
||||
equal(e.data('editable').value, nv, 'new text saved to value');
|
||||
equal(e.text(), nv, 'new text shown');
|
||||
|
||||
e.remove();
|
||||
start();
|
||||
}, timeout);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user