ng-hashtag-search-box
Version:
Hashtag search box with inline suggestion
3 lines • 2.98 kB
JavaScript
/*@license MIT Ivan Fraixedes <ivan@fraixed.es> (http://ivan.fraixed.es)*/
angular.module("tagSearchBox",[]).directive("tagSearchBox",function(){function link(scope,elem,attrs){function init(){var hashtags=scope.tags?tagsToHashtags(scope.tags):null;hashtags&&hashtags.length?(spanElem.textContent=hashtags.join(" "),inputElem.setAttribute("placeholder","")):inputElem.setAttribute("placeholder",initPlaceholder)}function inputOnKeyup(evt){return evt.keyCode===enterCode?(scope.onPressEnter(hashtagsTextToTags(spanElem.textContent)),spanElem.textContent="",void inputElem.setAttribute("placeholder",initPlaceholder)):(updateHastagsText(evt.keyCode===backspaceCode?{name:"remove"}:{name:"add",text:inputElem.value}),void(inputElem.value=""))}function inputOnKeydown(evt){return evt.keyCode===tabCode?(evt.preventDefault(),void autoComplete()):void 0}function updateHastagsText(op){var lastIdx,cancelSuggestion=!1,spanText=spanElem.textContent;if(inputElem.setAttribute("placeholder",""),"remove"===op.name){var lastIdx=spanText.length-1;spanText=spanText.substring(0,lastIdx),lastIdx--,lastIdx>=0&&(" "===spanText[lastIdx]||"#"===spanText)&&(spanText=spanText.substring(0,lastIdx),cancelSuggestion=!0),""===spanText&&(inputElem.setAttribute("placeholder",initPlaceholder),cancelSuggestion=!0)}else{if("add"!==op.name)return;var inputHashtag=inputHashtagRegExp.exec(op.text);if(!inputHashtag)return;inputHashtag[1]||inputHashtag[2]?"#"!==spanText[spanText.length-1]&&(spanText+=" #",cancelSuggestion=!0):""===spanText&&(spanText="#",cancelSuggestion=!0),spanText+=inputHashtag[3]}spanElem.textContent=spanText,cancelSuggestion||setSuggestion(scope.onChange(hashtagsTextToTags(spanText)))}function setSuggestion(promise){if(lastSuggestionCanceller(),promise){var cancelled=!1;promise.then(function(suggestion){!cancelled&&suggestion&&inputElem.setAttribute("placeholder",suggestion)}),lastSuggestionCanceller=function(){cancelled=!0}}}function autoComplete(){var suggestion=inputElem.getAttribute("placeholder");suggestion&&(spanElem.textContent+=suggestion)}function tagsToHashtags(tags){var hashtags=[];return tags.forEach(function(t){hashtags.push("#"+t.trim())}),hashtags}function hashtagsTextToTags(hashtagsText){for(var tags=[];null!=(match=hashtagsTextMatcher.exec(hashtagsText));)tags.push(match[1]);return tags}var children=elem.children(),spanElem=children[0],inputElem=children[1],initPlaceholder=attrs.placeholder||"";spanElem.addEventListener("click",inputElem.focus.bind(inputElem)),inputElem.addEventListener("keyup",inputOnKeyup),inputElem.addEventListener("keydown",inputOnKeydown),init();var backspaceCode=8,enterCode=13,tabCode=9,inputHashtagRegExp=/^(\s*)(#+\s*)?#*(\S*)/,lastSuggestionCanceller=function(){},hashtagsTextMatcher=/\s*#(\S+)\s*/g}return{restrict:"E",scope:{tags:"=",onChange:"=",onPressEnter:"="},template:'<span></span><input type="text">',link:link}});
//# sourceMappingURL=/node_modules/ng-hashtag-search-box/dist/ng-hashtag-search-box.js.map