Fixes the typeahead (mostly)
This commit is contained in:
Shannon
+2801
-2813
File diff suppressed because it is too large
Load Diff
+2
-2
@@ -95,7 +95,7 @@ angular.module('umbraco.directives')
|
||||
};
|
||||
})
|
||||
|
||||
.directive('onOutsideClick', function ($timeout) {
|
||||
.directive('onOutsideClick', function ($timeout, angularHelper) {
|
||||
return function (scope, element, attrs) {
|
||||
|
||||
var eventBindings = [];
|
||||
@@ -136,7 +136,7 @@ angular.module('umbraco.directives')
|
||||
return;
|
||||
}
|
||||
|
||||
scope.$apply(attrs.onOutsideClick);
|
||||
angularHelper.safeApply(scope, attrs.onOutsideClick);
|
||||
}
|
||||
|
||||
|
||||
|
||||
+1
-1
@@ -274,7 +274,7 @@ angular.module("umbraco.directives")
|
||||
}
|
||||
|
||||
//// INIT /////
|
||||
$image.load(function(){
|
||||
$image.on("load", function(){
|
||||
$timeout(function(){
|
||||
init($image);
|
||||
});
|
||||
|
||||
+24
-24
@@ -27,34 +27,34 @@ angular.module("umbraco.directives")
|
||||
var $image = element.find("img");
|
||||
scope.loaded = false;
|
||||
|
||||
$image.load(function(){
|
||||
$timeout(function(){
|
||||
$image.width("auto");
|
||||
$image.height("auto");
|
||||
$image.on("load", function() {
|
||||
$timeout(function () {
|
||||
$image.width("auto");
|
||||
$image.height("auto");
|
||||
|
||||
scope.image = {};
|
||||
scope.image.width = $image[0].width;
|
||||
scope.image.height = $image[0].height;
|
||||
scope.image = {};
|
||||
scope.image.width = $image[0].width;
|
||||
scope.image.height = $image[0].height;
|
||||
|
||||
//we force a lower thumbnail size to fit the max size
|
||||
//we do not compare to the image dimensions, but the thumbs
|
||||
if(scope.maxSize){
|
||||
var ratioCalculation = cropperHelper.calculateAspectRatioFit(
|
||||
scope.width,
|
||||
scope.height,
|
||||
scope.maxSize,
|
||||
scope.maxSize,
|
||||
false);
|
||||
//we force a lower thumbnail size to fit the max size
|
||||
//we do not compare to the image dimensions, but the thumbs
|
||||
if (scope.maxSize) {
|
||||
var ratioCalculation = cropperHelper.calculateAspectRatioFit(
|
||||
scope.width,
|
||||
scope.height,
|
||||
scope.maxSize,
|
||||
scope.maxSize,
|
||||
false);
|
||||
|
||||
//so if we have a max size, override the thumb sizes
|
||||
scope.width = ratioCalculation.width;
|
||||
scope.height = ratioCalculation.height;
|
||||
}
|
||||
//so if we have a max size, override the thumb sizes
|
||||
scope.width = ratioCalculation.width;
|
||||
scope.height = ratioCalculation.height;
|
||||
}
|
||||
|
||||
setPreviewStyle();
|
||||
scope.loaded = true;
|
||||
});
|
||||
});
|
||||
setPreviewStyle();
|
||||
scope.loaded = true;
|
||||
});
|
||||
})
|
||||
|
||||
/// WATCHERS ////
|
||||
scope.$watchCollection('[crop, center]', function(newValues, oldValues){
|
||||
|
||||
+28
-35
@@ -34,7 +34,6 @@
|
||||
vm.$onDestroy = onDestroy;
|
||||
|
||||
vm.validateMandatory = validateMandatory;
|
||||
vm.addTagOnEnter = addTagOnEnter;
|
||||
vm.addTag = addTag;
|
||||
vm.removeTag = removeTag;
|
||||
vm.showPrompt = showPrompt;
|
||||
@@ -60,20 +59,17 @@
|
||||
tagsHound = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
dupDetector: function (remoteMatch, localMatch) {
|
||||
return (remoteMatch["value"] == localMatch["value"]);
|
||||
},
|
||||
//pre-fetch the tags for this category
|
||||
prefetch: {
|
||||
url: umbRequestHelper.getApiUrl("tagsDataBaseUrl", "GetTags", { tagGroup: vm.config.group, culture: vm.culture }),
|
||||
//TTL = 5 minutes
|
||||
ttl: 300000,
|
||||
filter: dataTransform
|
||||
transform: dataTransform
|
||||
},
|
||||
//dynamically get the tags for this category (they may have changed on the server)
|
||||
remote: {
|
||||
url: umbRequestHelper.getApiUrl("tagsDataBaseUrl", "GetTags", { tagGroup: vm.config.group, culture: vm.culture }),
|
||||
filter: dataTransform
|
||||
transform: dataTransform
|
||||
}
|
||||
});
|
||||
|
||||
@@ -82,31 +78,36 @@
|
||||
//configure the type ahead
|
||||
$timeout(function () {
|
||||
|
||||
typeahead = $element.find('.tags-' + vm.htmlId).typeahead(
|
||||
{
|
||||
//This causes some strangeness as it duplicates the textbox, best leave off for now.
|
||||
hint: false,
|
||||
highlight: true,
|
||||
cacheKey: new Date(), // Force a cache refresh each time the control is initialized
|
||||
minLength: 1
|
||||
}, {
|
||||
//see: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options
|
||||
// name = the data set name, we'll make this the tag group name
|
||||
name: vm.config.group,
|
||||
displayKey: "value",
|
||||
source: function (query, cb) {
|
||||
tagsHound.get(query, function (suggestions) {
|
||||
var sources = {
|
||||
//see: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options
|
||||
// name = the data set name, we'll make this the tag group name
|
||||
name: vm.config.group,
|
||||
display: "value",
|
||||
//source: tagsHound
|
||||
source: function (query, cb) {
|
||||
tagsHound.search(query,
|
||||
function(suggestions) {
|
||||
cb(removeCurrentTagsFromSuggestions(suggestions));
|
||||
});
|
||||
}
|
||||
}).bind("typeahead:selected", function (obj, datum, name) {
|
||||
}
|
||||
};
|
||||
|
||||
var opts = {
|
||||
//This causes some strangeness as it duplicates the textbox, best leave off for now.
|
||||
hint: false,
|
||||
highlight: true,
|
||||
cacheKey: new Date(), // Force a cache refresh each time the control is initialized
|
||||
minLength: 1
|
||||
};
|
||||
|
||||
typeahead = $element.find('.tags-' + vm.htmlId).typeahead(opts, sources)
|
||||
.bind("typeahead:selected", function (obj, datum, name) {
|
||||
angularHelper.safeApply($rootScope, function () {
|
||||
addTagInternal(datum["value"]);
|
||||
vm.tagToAdd = "";
|
||||
// clear the typed text
|
||||
typeahead.typeahead('val', '');
|
||||
});
|
||||
|
||||
}).bind("typeahead:autocompleted", function (obj, datum, name) {
|
||||
angularHelper.safeApply($rootScope, function () {
|
||||
addTagInternal(datum["value"]);
|
||||
@@ -114,7 +115,7 @@
|
||||
});
|
||||
|
||||
}).bind("typeahead:opened", function (obj) {
|
||||
//console.log("opened ");
|
||||
console.log("opened ");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -167,6 +168,9 @@
|
||||
updateModelValue(vm.viewModel);
|
||||
}
|
||||
}
|
||||
else if (angular.isArray(vm.value)) {
|
||||
vm.viewModel = vm.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,17 +203,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function addTagOnEnter(e) {
|
||||
var code = e.keyCode || e.which;
|
||||
if (code == 13) { //Enter keycode
|
||||
if ($element.find('.tags-' + vm.htmlId).parent().find(".tt-dropdown-menu .tt-cursor").length === 0) {
|
||||
//this is required, otherwise the html form will attempt to submit.
|
||||
e.preventDefault();
|
||||
addTag();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addTag() {
|
||||
//ensure that we're not pressing the enter key whilst selecting a typeahead value from the drop down
|
||||
//we need to use jquery because typeahead duplicates the text box
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
color: @gray-8 !important;
|
||||
}
|
||||
|
||||
.tt-dropdown-menu {
|
||||
.tt-menu {
|
||||
width: 422px;
|
||||
margin-top: 12px;
|
||||
padding: 8px 0;
|
||||
@@ -61,4 +61,4 @@
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,7 +24,6 @@
|
||||
id="{{vm.htmlId}}"
|
||||
class="typeahead tags-{{vm.htmlId}}"
|
||||
ng-model="vm.tagToAdd"
|
||||
ng-keydown="vm.addTagOnEnter($event)"
|
||||
on-blur="vm.addTag()"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterTags" />
|
||||
|
||||
Reference in New Issue
Block a user