From bc57cbd4ae95b740816229dcb23242569d46a58c Mon Sep 17 00:00:00 2001 From: Thomas Wade Date: Sat, 20 Oct 2018 21:24:39 +1030 Subject: [PATCH] WIP: yeet --- data/posts.json | 14 +-- index.html | 2 + scripts/app.js | 4 +- scripts/ng-tags-input.min.js | 1 + styles/ng-tags-input.css | 218 +++++++++++++++++++++++++++++++++++ views/create.html | 7 ++ views/navbuttons.html | 1 + 7 files changed, 232 insertions(+), 15 deletions(-) create mode 100644 scripts/ng-tags-input.min.js create mode 100644 styles/ng-tags-input.css create mode 100644 views/create.html diff --git a/data/posts.json b/data/posts.json index 8d09519..2cb91d3 100644 --- a/data/posts.json +++ b/data/posts.json @@ -1,13 +1 @@ -[ - { - "title": "Wiring Nginx into your home automation platform.", - "author": "Brian Reynolds", - "date": 1540798260000, - "tags": [ - "#Nginx", - "#Home Automation", - "#Dashboard" - ], - "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel bibendum neque. Sed consectetur sem vel fringilla condimentum. Etiam sed enim ligula. Quisque scelerisque dui ut tincidunt tincidunt. Nullam vel urna bibendum, dignissim lectus sit amet, interdum turpis. Vestibulum arcu orci, facilisis non justo id, eleifend euismod augue. Duis eget tellus odio. Praesent vulputate blandit elit quis hendrerit.\n\nDonec tortor dolor, fringilla vel tortor quis, sollicitudin ultrices enim. Ut vitae eros a ipsum mattis cursus. Quisque eget iaculis ex, non sagittis diam. Ut auctor risus justo, nec iaculis massa pharetra non. Nulla non lacus volutpat purus pharetra lacinia at at mauris. Nulla in velit dictum leo aliquam volutpat. Integer quis metus vel magna tempor lacinia. Vestibulum tempor congue magna sed maximus. Vivamus placerat ullamcorper justo non tempor. Nulla bibendum lectus id quam dignissim, sed congue ex ornare. Integer congue orci et magna dapibus, non interdum nulla commodo. Sed tempus non quam mollis tempus. Quisque est orci, blandit quis vestibulum congue, euismod quis augue. Quisque a lectus in ante feugiat pulvinar. Nam suscipit ipsum tortor, id vestibulum tortor sollicitudin ut. Cras imperdiet congue lectus scelerisque consequat.\n\nInteger ornare orci a quam auctor, ut pulvinar nulla cursus. Sed posuere mollis imperdiet. Integer hendrerit lacinia dui eget rutrum. Nunc eget libero volutpat, dictum mauris nec, commodo nisi. Fusce augue est, pharetra et placerat non, feugiat eget mi. Nunc nisi erat, auctor et augue vitae, viverra elementum erat. Duis laoreet diam id tellus aliquet, iaculis vehicula orci pulvinar. Curabitur id porttitor lacus. Nulla tempus ultricies tristique. Quisque fringilla euismod arcu quis fermentum.\n\nDuis justo urna, auctor hendrerit congue placerat, congue quis ipsum. Suspendisse in porta ante. Nam ultricies gravida augue, eget maximus quam tincidunt in. Vestibulum ligula mauris, lacinia non hendrerit at, consectetur a nulla. Etiam eleifend justo id rutrum fermentum. Ut sed sapien at tellus dapibus aliquam sit amet aliquet ex. Proin bibendum ac dolor in elementum. Integer vitae pulvinar quam, vel malesuada elit. Nam odio lectus, euismod ac erat ac, commodo porta ipsum. Mauris quis vehicula odio, id mollis lacus. Quisque tempor tortor metus, pulvinar ornare tellus interdum ac. Donec non ultricies diam. Morbi ut sollicitudin velit. Vestibulum a mi quis erat dapibus ullamcorper. Etiam porta dui id tortor ultricies, et tincidunt lacus ultricies. Suspendisse sollicitudin neque ullamcorper, fermentum magna vitae, finibus odio.\n\nFusce sit amet ipsum ultrices, efficitur dolor sit amet, mollis quam. Nam vitae ex dui. Vestibulum sagittis faucibus mauris ac faucibus. Morbi erat mauris, vestibulum eu ultrices ac, rhoncus vel augue. Maecenas sit amet eros at leo lobortis posuere eget tincidunt urna. Sed iaculis nisi vitae ex pretium, eu volutpat ante dapibus. Nam finibus fermentum ipsum non tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In vel bibendum neque. Sed consectetur sem vel fringilla condimentum. Etiam sed enim ligula. Quisque scelerisque dui ut tincidunt tincidunt. Nullam vel urna bibendum, dignissim lectus sit amet, interdum turpis. Vestibulum arcu orci, facilisis non justo id, eleifend euismod augue. Duis eget tellus odio. Praesent vulputate blandit elit quis hendrerit.\n\nDonec tortor dolor, fringilla vel tortor quis, sollicitudin ultrices enim. Ut vitae eros a ipsum mattis cursus. Quisque eget iaculis ex, non sagittis diam. Ut auctor risus justo, nec iaculis massa pharetra non. Nulla non lacus volutpat purus pharetra lacinia at at mauris. Nulla in velit dictum leo aliquam volutpat. Integer quis metus vel magna tempor lacinia. Vestibulum tempor congue magna sed maximus. Vivamus placerat ullamcorper justo non tempor. Nulla bibendum lectus id quam dignissim, sed congue ex ornare. Integer congue orci et magna dapibus, non interdum nulla commodo. Sed tempus non quam mollis tempus. Quisque est orci, blandit quis vestibulum congue, euismod quis augue. Quisque a lectus in ante feugiat pulvinar. Nam suscipit ipsum tortor, id vestibulum tortor sollicitudin ut. Cras imperdiet congue lectus scelerisque consequat.\n\nInteger ornare orci a quam auctor, ut pulvinar nulla cursus. Sed posuere mollis imperdiet. Integer hendrerit lacinia dui eget rutrum. Nunc eget libero volutpat, dictum mauris nec, commodo nisi. Fusce augue est, pharetra et placerat non, feugiat eget mi. Nunc nisi erat, auctor et augue vitae, viverra elementum erat. Duis laoreet diam id tellus aliquet, iaculis vehicula orci pulvinar. Curabitur id porttitor lacus. Nulla tempus ultricies tristique. Quisque fringilla euismod arcu quis fermentum.\n\nDuis justo urna, auctor hendrerit congue placerat, congue quis ipsum. Suspendisse in porta ante. Nam ultricies gravida augue, eget maximus quam tincidunt in. Vestibulum ligula mauris, lacinia non hendrerit at, consectetur a nulla. Etiam eleifend justo id rutrum fermentum. Ut sed sapien at tellus dapibus aliquam sit amet aliquet ex. Proin bibendum ac dolor in elementum. Integer vitae pulvinar quam, vel malesuada elit. Nam odio lectus, euismod ac erat ac, commodo porta ipsum. Mauris quis vehicula odio, id mollis lacus. Quisque tempor tortor metus, pulvinar ornare tellus interdum ac. Donec non ultricies diam. Morbi ut sollicitudin velit. Vestibulum a mi quis erat dapibus ullamcorper. Etiam porta dui id tortor ultricies, et tincidunt lacus ultricies. Suspendisse sollicitudin neque ullamcorper, fermentum magna vitae, finibus odio." - } -] +[{"title":"Broccoli Confetti","author":"moo","date":1519600915000,"tags":["#soup"],"content":"giant messss\n\nart <3: [www.deviantart.com/snapbaxx](www.deviantart.com/snapbaxx)"},{"title":"What the heck is goin' on?","author":"K+Lab","date":1540007313000,"tags":["#Funk","#Soul Force Five","#What happened to the","#Soul phenomenon?"],"content":"Don't make me get the G-Funk-onomicon and summon up the holy power of the bass automaton."},{"title":"Wiring Nginx into your home automation platform.","author":"Brian Reynolds","date":1540798260000,"tags":["#Nginx","#Home Automation","#Dashboard"],"content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel bibendum neque. Sed consectetur sem vel fringilla condimentum. Etiam sed enim ligula. Quisque scelerisque dui ut tincidunt tincidunt. Nullam vel urna bibendum, dignissim lectus sit amet, interdum turpis. Vestibulum arcu orci, facilisis non justo id, eleifend euismod augue. Duis eget tellus odio. Praesent vulputate blandit elit quis hendrerit.\n\nDonec tortor dolor, fringilla vel tortor quis, sollicitudin ultrices enim. Ut vitae eros a ipsum mattis cursus. Quisque eget iaculis ex, non sagittis diam. Ut auctor risus justo, nec iaculis massa pharetra non. Nulla non lacus volutpat purus pharetra lacinia at at mauris. Nulla in velit dictum leo aliquam volutpat. Integer quis metus vel magna tempor lacinia. Vestibulum tempor congue magna sed maximus. Vivamus placerat ullamcorper justo non tempor. Nulla bibendum lectus id quam dignissim, sed congue ex ornare. Integer congue orci et magna dapibus, non interdum nulla commodo. Sed tempus non quam mollis tempus. Quisque est orci, blandit quis vestibulum congue, euismod quis augue. Quisque a lectus in ante feugiat pulvinar. Nam suscipit ipsum tortor, id vestibulum tortor sollicitudin ut. Cras imperdiet congue lectus scelerisque consequat.\n\nInteger ornare orci a quam auctor, ut pulvinar nulla cursus. Sed posuere mollis imperdiet. Integer hendrerit lacinia dui eget rutrum. Nunc eget libero volutpat, dictum mauris nec, commodo nisi. Fusce augue est, pharetra et placerat non, feugiat eget mi. Nunc nisi erat, auctor et augue vitae, viverra elementum erat. Duis laoreet diam id tellus aliquet, iaculis vehicula orci pulvinar. Curabitur id porttitor lacus. Nulla tempus ultricies tristique. Quisque fringilla euismod arcu quis fermentum.\n\nDuis justo urna, auctor hendrerit congue placerat, congue quis ipsum. Suspendisse in porta ante. Nam ultricies gravida augue, eget maximus quam tincidunt in. Vestibulum ligula mauris, lacinia non hendrerit at, consectetur a nulla. Etiam eleifend justo id rutrum fermentum. Ut sed sapien at tellus dapibus aliquam sit amet aliquet ex. Proin bibendum ac dolor in elementum. Integer vitae pulvinar quam, vel malesuada elit. Nam odio lectus, euismod ac erat ac, commodo porta ipsum. Mauris quis vehicula odio, id mollis lacus. Quisque tempor tortor metus, pulvinar ornare tellus interdum ac. Donec non ultricies diam. Morbi ut sollicitudin velit. Vestibulum a mi quis erat dapibus ullamcorper. Etiam porta dui id tortor ultricies, et tincidunt lacus ultricies. Suspendisse sollicitudin neque ullamcorper, fermentum magna vitae, finibus odio.\n\nFusce sit amet ipsum ultrices, efficitur dolor sit amet, mollis quam. Nam vitae ex dui. Vestibulum sagittis faucibus mauris ac faucibus. Morbi erat mauris, vestibulum eu ultrices ac, rhoncus vel augue. Maecenas sit amet eros at leo lobortis posuere eget tincidunt urna. Sed iaculis nisi vitae ex pretium, eu volutpat ante dapibus. Nam finibus fermentum ipsum non tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In vel bibendum neque. Sed consectetur sem vel fringilla condimentum. Etiam sed enim ligula. Quisque scelerisque dui ut tincidunt tincidunt. Nullam vel urna bibendum, dignissim lectus sit amet, interdum turpis. Vestibulum arcu orci, facilisis non justo id, eleifend euismod augue. Duis eget tellus odio. Praesent vulputate blandit elit quis hendrerit.\n\nDonec tortor dolor, fringilla vel tortor quis, sollicitudin ultrices enim. Ut vitae eros a ipsum mattis cursus. Quisque eget iaculis ex, non sagittis diam. Ut auctor risus justo, nec iaculis massa pharetra non. Nulla non lacus volutpat purus pharetra lacinia at at mauris. Nulla in velit dictum leo aliquam volutpat. Integer quis metus vel magna tempor lacinia. Vestibulum tempor congue magna sed maximus. Vivamus placerat ullamcorper justo non tempor. Nulla bibendum lectus id quam dignissim, sed congue ex ornare. Integer congue orci et magna dapibus, non interdum nulla commodo. Sed tempus non quam mollis tempus. Quisque est orci, blandit quis vestibulum congue, euismod quis augue. Quisque a lectus in ante feugiat pulvinar. Nam suscipit ipsum tortor, id vestibulum tortor sollicitudin ut. Cras imperdiet congue lectus scelerisque consequat.\n\nInteger ornare orci a quam auctor, ut pulvinar nulla cursus. Sed posuere mollis imperdiet. Integer hendrerit lacinia dui eget rutrum. Nunc eget libero volutpat, dictum mauris nec, commodo nisi. Fusce augue est, pharetra et placerat non, feugiat eget mi. Nunc nisi erat, auctor et augue vitae, viverra elementum erat. Duis laoreet diam id tellus aliquet, iaculis vehicula orci pulvinar. Curabitur id porttitor lacus. Nulla tempus ultricies tristique. Quisque fringilla euismod arcu quis fermentum.\n\nDuis justo urna, auctor hendrerit congue placerat, congue quis ipsum. Suspendisse in porta ante. Nam ultricies gravida augue, eget maximus quam tincidunt in. Vestibulum ligula mauris, lacinia non hendrerit at, consectetur a nulla. Etiam eleifend justo id rutrum fermentum. Ut sed sapien at tellus dapibus aliquam sit amet aliquet ex. Proin bibendum ac dolor in elementum. Integer vitae pulvinar quam, vel malesuada elit. Nam odio lectus, euismod ac erat ac, commodo porta ipsum. Mauris quis vehicula odio, id mollis lacus. Quisque tempor tortor metus, pulvinar ornare tellus interdum ac. Donec non ultricies diam. Morbi ut sollicitudin velit. Vestibulum a mi quis erat dapibus ullamcorper. Etiam porta dui id tortor ultricies, et tincidunt lacus ultricies. Suspendisse sollicitudin neque ullamcorper, fermentum magna vitae, finibus odio."},{"title":"Take us to the wasteland where we gonna repopulate and...","author":"Splitbreed","date":1540007313000,"tags":["#Funk","#Soul Force Five","#Repopulate and..."],"content":"... send a signal to the Soul Force Five, intergalactic magnate of the hive mind."}] diff --git a/index.html b/index.html index a1734dc..059af92 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,13 @@ + {{title}} + diff --git a/scripts/app.js b/scripts/app.js index c699c1f..9645393 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1,4 +1,4 @@ -var app = angular.module("app", ["ngRoute", "ngSanitize"]); +var app = angular.module("app", ["ngRoute", "ngSanitize", "ngTagsInput"]); app.config( function ($routeProvider) @@ -30,7 +30,7 @@ app.controller("create", ["$scope", "$http", $scope.content = ""; $scope.tags = []; - $scope.postSubmit = function() + $scope.onSubmit = function() { // Create the post object post = { diff --git a/scripts/ng-tags-input.min.js b/scripts/ng-tags-input.min.js new file mode 100644 index 0000000..6baf3be --- /dev/null +++ b/scripts/ng-tags-input.min.js @@ -0,0 +1 @@ +/*! ngTagsInput v3.2.0 License: MIT */!function(){"use strict";var a={backspace:8,tab:9,enter:13,escape:27,space:32,up:38,down:40,left:37,right:39,"delete":46,comma:188},b=9007199254740991,c=["text","email","url"],d=angular.module("ngTagsInput",[]);d.directive("tagsInput",["$timeout","$document","$window","$q","tagsInputConfig","tiUtil",function(d,e,f,g,h,i){function j(a,b,c,d){var e,f,h,j,k={};return e=function(b){return i.safeToString(b[a.displayProperty])},f=function(b,c){b[a.displayProperty]=c},h=function(b){var d=e(b),f=d&&d.length>=a.minLength&&d.length<=a.maxLength&&a.allowedTagsPattern.test(d)&&!i.findInObjectArray(k.items,b,a.keyProperty||a.displayProperty);return g.when(f&&c({$tag:b})).then(i.promisifyValue)},j=function(a){return g.when(d({$tag:a})).then(i.promisifyValue)},k.items=[],k.addText=function(a){var b={};return f(b,a),k.add(b)},k.add=function(c){var d=e(c);return a.replaceSpacesWithDashes&&(d=i.replaceSpacesWithDashes(d)),f(c,d),h(c).then(function(){k.items.push(c),b.trigger("tag-added",{$tag:c})})["catch"](function(){d&&b.trigger("invalid-tag",{$tag:c})})},k.remove=function(a){var c=k.items[a];return j(c).then(function(){return k.items.splice(a,1),k.clearSelection(),b.trigger("tag-removed",{$tag:c}),c})},k.select=function(a){0>a?a=k.items.length-1:a>=k.items.length&&(a=0),k.index=a,k.selected=k.items[a]},k.selectPrior=function(){k.select(--k.index)},k.selectNext=function(){k.select(++k.index)},k.removeSelected=function(){return k.remove(k.index)},k.clearSelection=function(){k.selected=null,k.index=-1},k.getItems=function(){return a.useStrings?k.items.map(e):k.items},k.clearSelection(),k}function k(a){return-1!==c.indexOf(a)}return{restrict:"E",require:"ngModel",scope:{tags:"=ngModel",text:"=?",templateScope:"=?",tagClass:"&",onTagAdding:"&",onTagAdded:"&",onInvalidTag:"&",onTagRemoving:"&",onTagRemoved:"&",onTagClicked:"&"},replace:!1,transclude:!0,templateUrl:"ngTagsInput/tags-input.html",controller:["$scope","$attrs","$element",function(a,c,d){a.events=i.simplePubSub(),h.load("tagsInput",a,c,{template:[String,"ngTagsInput/tag-item.html"],type:[String,"text",k],placeholder:[String,"Add a tag"],tabindex:[Number,null],removeTagSymbol:[String,String.fromCharCode(215)],replaceSpacesWithDashes:[Boolean,!0],minLength:[Number,3],maxLength:[Number,b],addOnEnter:[Boolean,!0],addOnSpace:[Boolean,!1],addOnComma:[Boolean,!0],addOnBlur:[Boolean,!0],addOnPaste:[Boolean,!1],pasteSplitPattern:[RegExp,/,/],allowedTagsPattern:[RegExp,/.+/],enableEditingLastTag:[Boolean,!1],minTags:[Number,0],maxTags:[Number,b],displayProperty:[String,"text"],keyProperty:[String,""],allowLeftoverText:[Boolean,!1],addFromAutocompleteOnly:[Boolean,!1],spellcheck:[Boolean,!0],useStrings:[Boolean,!1]}),a.tagList=new j(a.options,a.events,i.handleUndefinedResult(a.onTagAdding,!0),i.handleUndefinedResult(a.onTagRemoving,!0)),this.registerAutocomplete=function(){d.find("input");return{addTag:function(b){return a.tagList.add(b)},getTags:function(){return a.tagList.items},getCurrentTagText:function(){return a.newTag.text()},getOptions:function(){return a.options},getTemplateScope:function(){return a.templateScope},on:function(b,c){return a.events.on(b,c,!0),this}}},this.registerTagItem=function(){return{getOptions:function(){return a.options},removeTag:function(b){a.disabled||a.tagList.remove(b)}}}}],link:function(b,c,g,h){var j,k,l=[a.enter,a.comma,a.space,a.backspace,a["delete"],a.left,a.right],m=b.tagList,n=b.events,o=b.options,p=c.find("input"),q=["minTags","maxTags","allowLeftoverText"];j=function(){h.$setValidity("maxTags",m.items.length<=o.maxTags),h.$setValidity("minTags",m.items.length>=o.minTags),h.$setValidity("leftoverText",b.hasFocus||o.allowLeftoverText?!0:!b.newTag.text())},k=function(){d(function(){p[0].focus()})},h.$isEmpty=function(a){return!a||!a.length},b.newTag={text:function(a){return angular.isDefined(a)?(b.text=a,void n.trigger("input-change",a)):b.text||""},invalid:null},b.track=function(a){return a[o.keyProperty||o.displayProperty]},b.getTagClass=function(a,c){var d=a===m.selected;return[b.tagClass({$tag:a,$index:c,$selected:d}),{selected:d}]},b.$watch("tags",function(a){if(a){if(m.items=i.makeObjectArray(a,o.displayProperty),o.useStrings)return;b.tags=m.items}else m.items=[]}),b.$watch("tags.length",function(){j(),h.$validate()}),g.$observe("disabled",function(a){b.disabled=a}),b.eventHandlers={input:{keydown:function(a){n.trigger("input-keydown",a)},focus:function(){b.hasFocus||(b.hasFocus=!0,n.trigger("input-focus"))},blur:function(){d(function(){var a=e.prop("activeElement"),d=a===p[0],f=c[0].contains(a);(d||!f)&&(b.hasFocus=!1,n.trigger("input-blur"))})},paste:function(a){a.getTextData=function(){var b=a.clipboardData||a.originalEvent&&a.originalEvent.clipboardData;return b?b.getData("text/plain"):f.clipboardData.getData("Text")},n.trigger("input-paste",a)}},host:{click:function(){b.disabled||k()}},tag:{click:function(a){n.trigger("tag-clicked",{$tag:a})}}},n.on("tag-added",b.onTagAdded).on("invalid-tag",b.onInvalidTag).on("tag-removed",b.onTagRemoved).on("tag-clicked",b.onTagClicked).on("tag-added",function(){b.newTag.text("")}).on("tag-added tag-removed",function(){b.tags=m.getItems(),h.$setDirty(),k()}).on("invalid-tag",function(){b.newTag.invalid=!0}).on("option-change",function(a){-1!==q.indexOf(a.name)&&j()}).on("input-change",function(){m.clearSelection(),b.newTag.invalid=null}).on("input-focus",function(){c.triggerHandler("focus"),h.$setValidity("leftoverText",!0)}).on("input-blur",function(){o.addOnBlur&&!o.addFromAutocompleteOnly&&m.addText(b.newTag.text()),c.triggerHandler("blur"),j()}).on("input-keydown",function(c){var d,e,f,g,h=c.keyCode,j={};i.isModifierOn(c)||-1===l.indexOf(h)||(j[a.enter]=o.addOnEnter,j[a.comma]=o.addOnComma,j[a.space]=o.addOnSpace,d=!o.addFromAutocompleteOnly&&j[h],e=(h===a.backspace||h===a["delete"])&&m.selected,g=h===a.backspace&&0===b.newTag.text().length&&o.enableEditingLastTag,f=(h===a.backspace||h===a.left||h===a.right)&&0===b.newTag.text().length&&!o.enableEditingLastTag,d?m.addText(b.newTag.text()):g?(m.selectPrior(),m.removeSelected().then(function(a){a&&b.newTag.text(a[o.displayProperty])})):e?m.removeSelected():f&&(h===a.left||h===a.backspace?m.selectPrior():h===a.right&&m.selectNext()),(d||f||e||g)&&c.preventDefault())}).on("input-paste",function(a){if(o.addOnPaste){var b=a.getTextData(),c=b.split(o.pasteSplitPattern);c.length>1&&(c.forEach(function(a){m.addText(a)}),a.preventDefault())}})}}}]),d.directive("tiTagItem",["tiUtil",function(a){return{restrict:"E",require:"^tagsInput",template:'',scope:{$scope:"=scope",data:"="},link:function(b,c,d,e){var f=e.registerTagItem(),g=f.getOptions();b.$$template=g.template,b.$$removeTagSymbol=g.removeTagSymbol,b.$getDisplayText=function(){return a.safeToString(b.data[g.displayProperty])},b.$removeTag=function(){f.removeTag(b.$index)},b.$watch("$parent.$index",function(a){b.$index=a})}}}]),d.directive("autoComplete",["$document","$timeout","$sce","$q","tagsInputConfig","tiUtil",function(b,c,d,e,f,g){function h(a,b,c){var d,f,h,i={};return h=function(){return b.tagsInput.keyProperty||b.tagsInput.displayProperty},d=function(a,c){return a.filter(function(a){return!g.findInObjectArray(c,a,h(),function(a,c){return b.tagsInput.replaceSpacesWithDashes&&(a=g.replaceSpacesWithDashes(a),c=g.replaceSpacesWithDashes(c)),g.defaultComparer(a,c)})})},i.reset=function(){f=null,i.items=[],i.visible=!1,i.index=-1,i.selected=null,i.query=null},i.show=function(){b.selectFirstMatch?i.select(0):i.selected=null,i.visible=!0},i.load=g.debounce(function(c,j){i.query=c;var k=e.when(a({$query:c}));f=k,k.then(function(a){k===f&&(a=g.makeObjectArray(a.data||a,h()),a=d(a,j),i.items=a.slice(0,b.maxResultsToShow),i.items.length>0?i.show():i.reset())})},b.debounceDelay),i.selectNext=function(){i.select(++i.index)},i.selectPrior=function(){i.select(--i.index)},i.select=function(a){0>a?a=i.items.length-1:a>=i.items.length&&(a=0),i.index=a,i.selected=i.items[a],c.trigger("suggestion-selected",a)},i.reset(),i}function i(a,b){var c=a.find("li").eq(b),d=c.parent(),e=c.prop("offsetTop"),f=c.prop("offsetHeight"),g=d.prop("clientHeight"),h=d.prop("scrollTop");h>e?d.prop("scrollTop",e):e+f>g+h&&d.prop("scrollTop",e+f-g)}return{restrict:"E",require:"^tagsInput",scope:{source:"&",matchClass:"&"},templateUrl:"ngTagsInput/auto-complete.html",controller:["$scope","$element","$attrs",function(a,b,c){a.events=g.simplePubSub(),f.load("autoComplete",a,c,{template:[String,"ngTagsInput/auto-complete-match.html"],debounceDelay:[Number,100],minLength:[Number,3],highlightMatchedText:[Boolean,!0],maxResultsToShow:[Number,10],loadOnDownArrow:[Boolean,!1],loadOnEmpty:[Boolean,!1],loadOnFocus:[Boolean,!1],selectFirstMatch:[Boolean,!0],displayProperty:[String,""]}),a.suggestionList=new h(a.source,a.options,a.events),this.registerAutocompleteMatch=function(){return{getOptions:function(){return a.options},getQuery:function(){return a.suggestionList.query}}}}],link:function(b,c,d,e){var f,h=[a.enter,a.tab,a.escape,a.up,a.down],j=b.suggestionList,k=e.registerAutocomplete(),l=b.options,m=b.events;l.tagsInput=k.getOptions(),f=function(a){return a&&a.length>=l.minLength||!a&&l.loadOnEmpty},b.templateScope=k.getTemplateScope(),b.addSuggestionByIndex=function(a){j.select(a),b.addSuggestion()},b.addSuggestion=function(){var a=!1;return j.selected&&(k.addTag(angular.copy(j.selected)),j.reset(),a=!0),a},b.track=function(a){return a[l.tagsInput.keyProperty||l.tagsInput.displayProperty]},b.getSuggestionClass=function(a,c){var d=a===j.selected;return[b.matchClass({$match:a,$index:c,$selected:d}),{selected:d}]},k.on("tag-added tag-removed invalid-tag input-blur",function(){j.reset()}).on("input-change",function(a){f(a)?j.load(a,k.getTags()):j.reset()}).on("input-focus",function(){var a=k.getCurrentTagText();l.loadOnFocus&&f(a)&&j.load(a,k.getTags())}).on("input-keydown",function(c){var d=c.keyCode,e=!1;if(!g.isModifierOn(c)&&-1!==h.indexOf(d))return j.visible?d===a.down?(j.selectNext(),e=!0):d===a.up?(j.selectPrior(),e=!0):d===a.escape?(j.reset(),e=!0):(d===a.enter||d===a.tab)&&(e=b.addSuggestion()):d===a.down&&b.options.loadOnDownArrow&&(j.load(k.getCurrentTagText(),k.getTags()),e=!0),e?(c.preventDefault(),c.stopImmediatePropagation(),!1):void 0}),m.on("suggestion-selected",function(a){i(c,a)})}}}]),d.directive("tiAutocompleteMatch",["$sce","tiUtil",function(a,b){return{restrict:"E",require:"^autoComplete",template:'',scope:{$scope:"=scope",data:"="},link:function(c,d,e,f){var g=f.registerAutocompleteMatch(),h=g.getOptions();c.$$template=h.template,c.$index=c.$parent.$index,c.$highlight=function(c){return h.highlightMatchedText&&(c=b.safeHighlight(c,g.getQuery())),a.trustAsHtml(c)},c.$getDisplayText=function(){return b.safeToString(c.data[h.displayProperty||h.tagsInput.displayProperty])}}}}]),d.directive("tiTranscludeAppend",function(){return function(a,b,c,d,e){e(function(a){b.append(a)})}}),d.directive("tiAutosize",["tagsInputConfig",function(a){return{restrict:"A",require:"ngModel",link:function(b,c,d,e){var f,g,h=a.getTextAutosizeThreshold();f=angular.element(''),f.css("display","none").css("visibility","hidden").css("width","auto").css("white-space","pre"),c.parent().append(f),g=function(a){var b,e=a;return angular.isString(e)&&0===e.length&&(e=d.placeholder),e&&(f.text(e),f.css("display",""),b=f.prop("offsetWidth"),f.css("display","none")),c.css("width",b?b+h+"px":""),a},e.$parsers.unshift(g),e.$formatters.unshift(g),d.$observe("placeholder",function(a){e.$modelValue||g(a)})}}}]),d.directive("tiBindAttrs",function(){return function(a,b,c){a.$watch(c.tiBindAttrs,function(a){angular.forEach(a,function(a,b){c.$set(b,a)})},!0)}}),d.provider("tagsInputConfig",function(){var a={},b={},c=3;this.setDefaults=function(b,c){return a[b]=c,this},this.setActiveInterpolation=function(a,c){return b[a]=c,this},this.setTextAutosizeThreshold=function(a){return c=a,this},this.$get=["$interpolate",function(d){var e={};return e[String]=function(a){return a},e[Number]=function(a){return parseInt(a,10)},e[Boolean]=function(a){return"true"===a.toLowerCase()},e[RegExp]=function(a){return new RegExp(a)},{load:function(c,f,g,h){var i=function(){return!0};f.options={},angular.forEach(h,function(h,j){var k,l,m,n,o,p;k=h[0],l=h[1],m=h[2]||i,n=e[k],o=function(){var b=a[c]&&a[c][j];return angular.isDefined(b)?b:l},p=function(a){f.options[j]=a&&m(a)?n(a):o()},b[c]&&b[c][j]?g.$observe(j,function(a){p(a),f.events.trigger("option-change",{name:j,newValue:a})}):p(g[j]&&d(g[j])(f.$parent))})},getTextAutosizeThreshold:function(){return c}}}]}),d.factory("tiUtil",["$timeout","$q",function(a,b){var c={};return c.debounce=function(b,c){var d;return function(){var e=arguments;a.cancel(d),d=a(function(){b.apply(null,e)},c)}},c.makeObjectArray=function(a,b){if(!angular.isArray(a)||0===a.length||angular.isObject(a[0]))return a;var c=[];return a.forEach(function(a){var d={};d[b]=a,c.push(d)}),c},c.findInObjectArray=function(a,b,d,e){var f=null;return e=e||c.defaultComparer,a.some(function(a){return e(a[d],b[d])?(f=a,!0):void 0}),f},c.defaultComparer=function(a,b){return c.safeToString(a).toLowerCase()===c.safeToString(b).toLowerCase()},c.safeHighlight=function(a,b){function d(a){return a.replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1")}if(a=c.encodeHTML(a),b=c.encodeHTML(b),!b)return a;var e=new RegExp("&[^;]+;|"+d(b),"gi");return a.replace(e,function(a){return a.toLowerCase()===b.toLowerCase()?""+a+"":a})},c.safeToString=function(a){return angular.isUndefined(a)||null==a?"":a.toString().trim()},c.encodeHTML=function(a){return c.safeToString(a).replace(/&/g,"&").replace(//g,">")},c.handleUndefinedResult=function(a,b){return function(){var c=a.apply(null,arguments);return angular.isUndefined(c)?b:c}},c.replaceSpacesWithDashes=function(a){return c.safeToString(a).replace(/\s/g,"-")},c.isModifierOn=function(a){return a.shiftKey||a.ctrlKey||a.altKey||a.metaKey},c.promisifyValue=function(a){return a=angular.isUndefined(a)?!0:a,b[a?"when":"reject"]()},c.simplePubSub=function(){var a={};return{on:function(b,c,d){return b.split(" ").forEach(function(b){a[b]||(a[b]=[]);var e=d?[].unshift:[].push;e.call(a[b],c)}),this},trigger:function(b,d){var e=a[b]||[];return e.every(function(a){return c.handleUndefinedResult(a,!0)(d)}),this}}},c}]),d.run(["$templateCache",function(a){a.put("ngTagsInput/tags-input.html",'
'),a.put("ngTagsInput/tag-item.html",' '),a.put("ngTagsInput/auto-complete.html",'
'),a.put("ngTagsInput/auto-complete-match.html",'')}])}(); \ No newline at end of file diff --git a/styles/ng-tags-input.css b/styles/ng-tags-input.css new file mode 100644 index 0000000..9952d89 --- /dev/null +++ b/styles/ng-tags-input.css @@ -0,0 +1,218 @@ +tags-input +{ + display: block; +} +tags-input *, +tags-input *:before, +tags-input *:after +{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +tags-input .host +{ + position: relative; + + height: 100%; + margin-top: 5px; + margin-bottom: 5px; +} +tags-input .host:active +{ + outline: none; +} + +tags-input .tags +{ + overflow: hidden; + + height: 100%; + padding: 1px; + + cursor: text; + word-wrap: break-word; + + border: 1px solid darkgray; + background-color: #fff; + /* box-shadow: 1px 1px 1px 0 lightgray inset; */ + + -moz-appearance: textfield; + -webkit-appearance: textfield; +} +/* tags-input .tags.focused +{ + outline: none; + -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6); + -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6); + box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6); +} */ +tags-input .tags .tag-list +{ + margin: 0; + padding: 0; + + list-style-type: none; +} +tags-input .tags .tag-item +{ + font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 25px; + + display: inline-block; + float: left; + + height: 26px; + margin: 2px; + padding: 0 5px; + + color: #fff; + /* border: 1px solid #acacac; */ + /* border-radius: 3px; */ + /* background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); + background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */ + background-color: #000; +} +tags-input .tags .tag-item.selected +{ + /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); + background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */ +} +tags-input .tags .tag-item .remove-button +{ + font: bold 16px Arial, sans-serif; + + margin: 0 0 0 5px; + padding: 0; + + cursor: pointer; + vertical-align: middle; + + color: #fff8; + border: none; + background: none; +} +tags-input .tags .tag-item .remove-button:active +{ + color: #f00; +} +tags-input .tags .input +{ + font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + + float: left; + + height: 26px; + margin: 2px; + padding: 0; + padding-left: 5px; + + border: 0; + outline: none; +} +tags-input .tags .input.invalid-tag +{ + color: #f00; +} +tags-input .tags .input::-ms-clear +{ + display: none; +} +tags-input.ng-invalid .tags +{ + -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); + -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); + box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); +} +tags-input[disabled] .host:focus +{ + outline: none; +} +tags-input[disabled] .tags +{ + cursor: default; + + background-color: #eee; +} +tags-input[disabled] .tags .tag-item +{ + opacity: .65; + background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%); + background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%); +} +tags-input[disabled] .tags .tag-item .remove-button +{ + cursor: default; +} +tags-input[disabled] .tags .tag-item .remove-button:active +{ + color: #585858; +} +tags-input[disabled] .tags .input +{ + cursor: default; + + background-color: #eee; +} + +tags-input .autocomplete +{ + position: absolute; + z-index: 999; + + width: 100%; + margin-top: 5px; + padding: 5px 0; + + border: 1px solid rgba(0, 0, 0, .2); + background-color: #fff; + -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); +} +tags-input .autocomplete .suggestion-list +{ + position: relative; + + overflow-y: auto; + + max-height: 280px; + margin: 0; + padding: 0; + + list-style-type: none; +} +tags-input .autocomplete .suggestion-item +{ + font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; + + overflow: hidden; + + padding: 5px 10px; + + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + + color: #000; + background-color: #fff; +} +tags-input .autocomplete .suggestion-item.selected +{ + color: #fff; + background-color: #0097cf; +} +tags-input .autocomplete .suggestion-item.selected em +{ + color: #fff; + background-color: #0097cf; +} +tags-input .autocomplete .suggestion-item em +{ + font: normal bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; + + color: #000; + background-color: #fff; +} + +/*# sourceMappingURL=ng-tags-input.css.map */ diff --git a/views/create.html b/views/create.html new file mode 100644 index 0000000..0fc4920 --- /dev/null +++ b/views/create.html @@ -0,0 +1,7 @@ +
+
+
+
+
+ + diff --git a/views/navbuttons.html b/views/navbuttons.html index 8cf8a30..ebbdb6b 100644 --- a/views/navbuttons.html +++ b/views/navbuttons.html @@ -2,4 +2,5 @@ Blog About FAQ + Create