diff --git a/src/EventHub.Web/abp.resourcemapping.js b/src/EventHub.Web/abp.resourcemapping.js index d5c1afb..d611cc2 100644 --- a/src/EventHub.Web/abp.resourcemapping.js +++ b/src/EventHub.Web/abp.resourcemapping.js @@ -9,5 +9,6 @@ mappings: { "@node_modules/daterangepicker/*": "@libs/date-range-picker/", "@node_modules/owl.carousel/dist/**": "@libs/owl.carousel/", + "@node_modules/awesomplete/**": "@libs/awesomplete/", } -}; \ No newline at end of file +}; diff --git a/src/EventHub.Web/package.json b/src/EventHub.Web/package.json index 1e79505..3f7e21f 100644 --- a/src/EventHub.Web/package.json +++ b/src/EventHub.Web/package.json @@ -4,7 +4,8 @@ "private": true, "dependencies": { "@abp/aspnetcore.mvc.ui.theme.basic": "~5.0.0-rc.1", + "awesomplete": "^1.1.5", "daterangepicker": "^3.1.0", "owl.carousel": "^2.3.4" } -} \ No newline at end of file +} diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/.codeclimate.yml b/src/EventHub.Web/wwwroot/libs/awesomplete/.codeclimate.yml new file mode 100644 index 0000000..5f9c00e --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/.codeclimate.yml @@ -0,0 +1,14 @@ +engines: + eslint: + enabled: true + fixme: + enabled: true +ratings: + paths: + - "**.js" +exclude_paths: +- "**.min.js" +- karma*.conf.js +- prism/**/* +- test/**/* +- .* diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/.eslintrc b/src/EventHub.Web/wwwroot/libs/awesomplete/.eslintrc new file mode 100644 index 0000000..cefc88d --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/.eslintrc @@ -0,0 +1,254 @@ +ecmaFeatures: {} +rules: + no-alert: 0 + no-array-constructor: 0 + no-bitwise: 0 + no-caller: 0 + no-catch-shadow: 0 + no-class-assign: 0 + no-cond-assign: 2 + no-console: 2 + no-const-assign: 0 + no-constant-condition: 2 + no-continue: 0 + no-control-regex: 2 + no-debugger: 2 + no-delete-var: 2 + no-div-regex: 0 + no-dupe-keys: 2 + no-dupe-args: 2 + no-duplicate-case: 2 + no-else-return: 0 + no-empty: 2 + no-empty-character-class: 2 + no-empty-label: 0 + no-eq-null: 0 + no-eval: 0 + no-ex-assign: 2 + no-extend-native: 0 + no-extra-bind: 0 + no-extra-boolean-cast: 2 + no-extra-parens: 0 + no-extra-semi: 2 + no-fallthrough: 2 + no-floating-decimal: 0 + no-func-assign: 2 + no-implicit-coercion: 0 + no-implied-eval: 0 + no-inline-comments: 0 + no-inner-declarations: + - 2 + - functions + no-invalid-regexp: 2 + no-invalid-this: 0 + no-irregular-whitespace: 2 + no-iterator: 0 + no-label-var: 0 + no-labels: 0 + no-lone-blocks: 0 + no-lonely-if: 0 + no-loop-func: 0 + no-mixed-requires: + - 0 + - false + no-mixed-spaces-and-tabs: + - 2 + - smart-tabs + linebreak-style: + - 0 + - unix + no-multi-spaces: 0 + no-multi-str: 0 + no-multiple-empty-lines: + - 0 + - max: 2 + no-native-reassign: 0 + no-negated-in-lhs: 2 + no-nested-ternary: 0 + no-new: 0 + no-new-func: 0 + no-new-object: 0 + no-new-require: 0 + no-new-wrappers: 0 + no-obj-calls: 2 + no-octal: 2 + no-octal-escape: 0 + no-param-reassign: 0 + no-path-concat: 0 + no-plusplus: 0 + no-process-env: 0 + no-process-exit: 0 + no-proto: 0 + no-redeclare: 2 + no-regex-spaces: 2 + no-reserved-keys: 0 + no-restricted-modules: 0 + no-return-assign: 0 + no-script-url: 0 + no-self-compare: 0 + no-sequences: 0 + no-shadow: 0 + no-shadow-restricted-names: 0 + no-spaced-func: 0 + no-sparse-arrays: 2 + no-sync: 0 + no-ternary: 0 + no-trailing-spaces: 0 + no-this-before-super: 0 + no-throw-literal: 0 + no-undef: 2 + no-undef-init: 0 + no-undefined: 0 + no-unexpected-multiline: 0 + no-underscore-dangle: 0 + no-unneeded-ternary: 0 + no-unreachable: 2 + no-unused-expressions: 0 + no-unused-vars: + - 2 + - vars: all + args: after-used + no-use-before-define: 0 + no-useless-call: 0 + no-void: 0 + no-var: 0 + no-warning-comments: + - 0 + - terms: + - todo + - fixme + - xxx + location: start + no-with: 0 + array-bracket-spacing: + - 0 + - never + arrow-parens: 0 + arrow-spacing: 0 + accessor-pairs: 0 + block-scoped-var: 0 + brace-style: + - 0 + - 1tbs + callback-return: 0 + camelcase: 0 + comma-dangle: + - 2 + - never + comma-spacing: 0 + comma-style: 0 + complexity: + - 2 + - 11 + computed-property-spacing: + - 0 + - never + consistent-return: 0 + consistent-this: + - 0 + - that + constructor-super: 0 + curly: + - 0 + - all + default-case: 0 + dot-location: 0 + dot-notation: + - 0 + - allowKeywords: true + eol-last: 0 + eqeqeq: 0 + func-names: 0 + func-style: + - 0 + - declaration + generator-star-spacing: 0 + guard-for-in: 0 + handle-callback-err: 0 + indent: 0 + init-declarations: 0 + key-spacing: + - 0 + - beforeColon: false + afterColon: true + lines-around-comment: 0 + max-depth: + - 0 + - 4 + max-len: + - 0 + - 80 + - 4 + max-nested-callbacks: + - 0 + - 2 + max-params: + - 0 + - 3 + max-statements: + - 0 + - 10 + new-cap: 0 + new-parens: 0 + newline-after-var: 0 + object-curly-spacing: + - 0 + - never + object-shorthand: 0 + one-var: 0 + operator-assignment: + - 0 + - always + operator-linebreak: 0 + padded-blocks: 0 + prefer-const: 0 + prefer-spread: 0 + prefer-reflect: 0 + quote-props: 0 + quotes: + - 2 + - double + - avoid-escape + radix: 0 + require-yield: 0 + semi: 0 + semi-spacing: + - 0 + - before: false + after: true + sort-vars: 0 + space-after-keywords: + - 0 + - always + space-before-blocks: + - 0 + - always + space-before-function-paren: + - 0 + - always + space-in-parens: + - 0 + - never + space-infix-ops: 0 + space-return-throw-case: 0 + space-unary-ops: + - 0 + - words: true + nonwords: false + spaced-comment: 0 + strict: 0 + use-isnan: 2 + valid-jsdoc: 0 + valid-typeof: 2 + vars-on-top: 0 + wrap-iife: 0 + wrap-regex: 0 + yoda: + - 0 + - never +env: + browser: true + node: true + jquery: true + amd: true + commonjs: true diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/.travis.yml b/src/EventHub.Web/wwwroot/libs/awesomplete/.travis.yml new file mode 100644 index 0000000..149e75d --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/.travis.yml @@ -0,0 +1,28 @@ +language: node_js + +node_js: + - "0.10" + +branches: + only: + - gh-pages + - /v\d+\.\d+/ + +install: + - npm install -g codeclimate-test-reporter + - npm install + +before_script: + - export CHROME_BIN=chromium-browser + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start + +after_script: + - codeclimate-test-reporter < ./coverage/lcov.info + +deploy: + provider: npm + email: $NPM_EMAIL + api_key: $NPM_TOKEN + on: + tags: true diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/CHANGELOG.md b/src/EventHub.Web/wwwroot/libs/awesomplete/CHANGELOG.md new file mode 100644 index 0000000..f83ec43 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/CHANGELOG.md @@ -0,0 +1,22 @@ +# 1.1.1 (2016-06-25) + +## Fixes + +* Improved docs +* Emit close reason with `awesomplete-close` events ([8c0ff62](https://github.com/LeaVerou/awesomplete/commit/8c0ff6225c96af2f5f3b7312d7ba7b69f71be575)). See [Events](http://leaverou.github.io/awesomplete/#events). +* Fire `awesomplete-close` event only if open ([2cef2c2](https://github.com/LeaVerou/awesomplete/commit/2cef2c28a6f74ee5c0b294d2c3c7d2bad72bd466)) + +# 1.1.0 (2016-03-16) + +## Features + +* Separate label/value for each suggestion on the list +* New `suggestions` property with suggestion items only (to be rendered in completer) +* New `data` method to convert/change suggestion item data and corresponding `Awesomplete.DATA` +* The `item` and `replace` methods have a corresponding `Awesomplete.ITEM` and `Awesomplete.REPLACE` defaults now +* Ajax and Combobox examples +* Nearly 100% test coverage with Travis CI and Code Climate + +# 1.0.0 (2015-04-23) + +## First release diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/CONTRIBUTING.md b/src/EventHub.Web/wwwroot/libs/awesomplete/CONTRIBUTING.md new file mode 100644 index 0000000..af0c206 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/CONTRIBUTING.md @@ -0,0 +1,59 @@ +##Contributing + +**Prerequisites** + +Install [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/). On OSX with [Homebrew](http://brew.sh/) installed it is as easy as: +``` +brew install node +``` + +Install dependencies: +``` +npm install +``` + +**Running tests** + +Run tests once and exit: +``` +npm test +``` + +Continuous mode. Whenever any source or test file changes, tests will run automatically: +``` +karma start +``` + +Chrome starts automatically and stops on ```Ctrl+C```. You can also open ```http://localhost:9876/``` in any other browser and it will run the tests as long as the tab is open. + +**Adding a test** + +[Jasmine](http://jasmine.github.io/) is the testing framework used by Awesomplete. + +To write a test (or suite of tests) start by adding a `describe` function which receives a string describing what is being tested and a function containing what you expect the test to do. Inside the function use the `it` block to arrange and assert a functionality. + +A test would look like this: + +```javascript +describe("A fact", function(){ + it("is always true",function(){ + var fact = true; + expect(fact).toBe(true); + }); +}); +``` + +See existing tests in ```test``` directory as an example. More expectations and examples on how to use Jasmine can be found on the official [documentation](http://jasmine.github.io/2.2/introduction.html). + +**Build** + +Run the build with the following command: + +``` +gulp +``` + +The build will: + +1. Minify `awesomplete.js` and generate `awesomplete.min.js`. +2. Merge `awesomplete.base.css` and `awesomplete.theme.css` and generate `awesomplete.css`. \ No newline at end of file diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/LICENSE b/src/EventHub.Web/wwwroot/libs/awesomplete/LICENSE new file mode 100644 index 0000000..ee76987 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Lea Verou + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/README.md b/src/EventHub.Web/wwwroot/libs/awesomplete/README.md new file mode 100644 index 0000000..434f385 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/README.md @@ -0,0 +1,98 @@ +# Awesomplete +[![npm version](https://img.shields.io/npm/v/awesomplete.svg)](https://www.npmjs.com/package/awesomplete) +[![Build Status](https://img.shields.io/travis/LeaVerou/awesomplete/gh-pages.svg)](https://travis-ci.org/LeaVerou/awesomplete) +[![Code Climate](https://img.shields.io/codeclimate/github/LeaVerou/awesomplete.svg)](https://codeclimate.com/github/LeaVerou/awesomplete) +[![Test Coverage](https://img.shields.io/codeclimate/coverage/github/LeaVerou/awesomplete.svg)](https://codeclimate.com/github/LeaVerou/awesomplete/coverage) + +https://leaverou.github.io/awesomplete/ + +Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. + +## Installation +There are a few ways to obtain the needed files. +Here are 2 of them: +1. CDN server + +```sh +https://cdnjs.com/libraries/awesomplete +``` + +2. Another way to get up and running is by using `yarn` or `npm`: + +```sh +yarn add awesomplete +``` + +```sh +npm install awesomplete --save +``` + +More information about the npm package can be found [here](https://www.npmjs.com/package/awesomplete). + +## Basic Usage + +Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags: + +```html + + +``` + +Then you can add an Awesomplete widget by adding the following input tag: + +```html + +``` + +Add `class="awesomplete"` for it to be automatically processed (you can still specify many options via HTML attributes) +Otherwise you can instantiate with a few lines of JS code, which allow for more customization. + +There are many ways to link an input to a list of suggestions. +The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load: + +```html + + + + + + + + + + +``` + +Or the following, if you don’t want to use a ``, or if you don’t want to use IDs (since any selector will work in data-list): + +```html + + +``` + +There are multiple customizations and properties able to be instantiated within the JS. Libraries and definitions of the properties are available in the Links below. + +## License + +Awesomplete is released under the MIT License. See [LICENSE][1] file for +details. + +## Links + +The official site for the library is at . + +Documentation for the API and other topics is at +. + +Created by Lea Verou and other fantastic contributors. + +[1]: https://github.com/LeaVerou/awesomplete/blob/gh-pages/LICENSE diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.base.css b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.base.css new file mode 100644 index 0000000..8e5ec12 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.base.css @@ -0,0 +1,33 @@ +.awesomplete [hidden] { + display: none; +} + +.awesomplete .visually-hidden { + position: absolute; + clip: rect(0, 0, 0, 0); +} + +.awesomplete { + display: inline-block; + position: relative; +} + +.awesomplete > input { + display: block; +} + +.awesomplete > ul { + position: absolute; + left: 0; + z-index: 1; + min-width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0; + margin: 0; + background: #fff; +} + +.awesomplete > ul:empty { + display: none; +} diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css new file mode 100644 index 0000000..0b2ea34 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css @@ -0,0 +1,104 @@ +.awesomplete [hidden] { + display: none; +} + +.awesomplete .visually-hidden { + position: absolute; + clip: rect(0, 0, 0, 0); +} + +.awesomplete { + display: inline-block; + position: relative; +} + +.awesomplete > input { + display: block; +} + +.awesomplete > ul { + position: absolute; + left: 0; + z-index: 1; + min-width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0; + margin: 0; + background: #fff; +} + +.awesomplete > ul:empty { + display: none; +} + +.awesomplete > ul { + border-radius: .3em; + margin: .2em 0 0; + background: hsla(0,0%,100%,.9); + background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); + border: 1px solid rgba(0,0,0,.3); + box-shadow: .05em .2em .6em rgba(0,0,0,.2); + text-shadow: none; +} + +@supports (transform: scale(0)) { + .awesomplete > ul { + transition: .3s cubic-bezier(.4,.2,.5,1.4); + transform-origin: 1.43em -.43em; + } + + .awesomplete > ul[hidden], + .awesomplete > ul:empty { + opacity: 0; + transform: scale(0); + display: block; + transition-timing-function: ease; + } +} + + /* Pointer */ + .awesomplete > ul:before { + content: ""; + position: absolute; + top: -.43em; + left: 1em; + width: 0; height: 0; + padding: .4em; + background: white; + border: inherit; + border-right: 0; + border-bottom: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + + .awesomplete > ul > li { + position: relative; + padding: .2em .5em; + cursor: pointer; + } + + .awesomplete > ul > li:hover { + background: hsl(200, 40%, 80%); + color: black; + } + + .awesomplete > ul > li[aria-selected="true"] { + background: hsl(205, 40%, 40%); + color: white; + } + + .awesomplete mark { + background: hsl(65, 100%, 50%); + } + + .awesomplete li:hover mark { + background: hsl(68, 100%, 41%); + } + + .awesomplete li[aria-selected="true"] mark { + background: hsl(86, 100%, 21%); + color: inherit; + } +/*# sourceMappingURL=awesomplete.css.map */ diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css.map b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css.map new file mode 100644 index 0000000..3d57839 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["awesomplete.base.css","awesomplete.theme.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"awesomplete.css","sourcesContent":[".awesomplete [hidden] {\n display: none;\n}\n\n.awesomplete .visually-hidden {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n}\n\n.awesomplete {\n display: inline-block;\n position: relative;\n}\n\n.awesomplete > input {\n display: block;\n}\n\n.awesomplete > ul {\n position: absolute;\n left: 0;\n z-index: 1;\n min-width: 100%;\n box-sizing: border-box;\n list-style: none;\n padding: 0;\n margin: 0;\n background: #fff;\n}\n\n.awesomplete > ul:empty {\n display: none;\n}\n",".awesomplete > ul {\n\tborder-radius: .3em;\n\tmargin: .2em 0 0;\n\tbackground: hsla(0,0%,100%,.9);\n\tbackground: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));\n\tborder: 1px solid rgba(0,0,0,.3);\n\tbox-shadow: .05em .2em .6em rgba(0,0,0,.2);\n\ttext-shadow: none;\n}\n\n@supports (transform: scale(0)) {\n\t.awesomplete > ul {\n\t\ttransition: .3s cubic-bezier(.4,.2,.5,1.4);\n\t\ttransform-origin: 1.43em -.43em;\n\t}\n\t\n\t.awesomplete > ul[hidden],\n\t.awesomplete > ul:empty {\n\t\topacity: 0;\n\t\ttransform: scale(0);\n\t\tdisplay: block;\n\t\ttransition-timing-function: ease;\n\t}\n}\n\n\t/* Pointer */\n\t.awesomplete > ul:before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: -.43em;\n\t\tleft: 1em;\n\t\twidth: 0; height: 0;\n\t\tpadding: .4em;\n\t\tbackground: white;\n\t\tborder: inherit;\n\t\tborder-right: 0;\n\t\tborder-bottom: 0;\n\t\t-webkit-transform: rotate(45deg);\n\t\ttransform: rotate(45deg);\n\t}\n\n\t.awesomplete > ul > li {\n\t\tposition: relative;\n\t\tpadding: .2em .5em;\n\t\tcursor: pointer;\n\t}\n\t\n\t.awesomplete > ul > li:hover {\n\t\tbackground: hsl(200, 40%, 80%);\n\t\tcolor: black;\n\t}\n\t\n\t.awesomplete > ul > li[aria-selected=\"true\"] {\n\t\tbackground: hsl(205, 40%, 40%);\n\t\tcolor: white;\n\t}\n\t\n\t\t.awesomplete mark {\n\t\t\tbackground: hsl(65, 100%, 50%);\n\t\t}\n\t\t\n\t\t.awesomplete li:hover mark {\n\t\t\tbackground: hsl(68, 100%, 41%);\n\t\t}\n\t\t\n\t\t.awesomplete li[aria-selected=\"true\"] mark {\n\t\t\tbackground: hsl(86, 100%, 21%);\n\t\t\tcolor: inherit;\n\t\t}"]} \ No newline at end of file diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.js b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.js new file mode 100644 index 0000000..396fb71 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.js @@ -0,0 +1,552 @@ +/** + * Simple, lightweight, usable local autocomplete library for modern browsers + * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P + * @author Lea Verou http://leaverou.github.io/awesomplete + * MIT license + */ + +(function () { + +var _ = function (input, o) { + var me = this; + + // Keep track of number of instances for unique IDs + _.count = (_.count || 0) + 1; + this.count = _.count; + + // Setup + + this.isOpened = false; + + this.input = $(input); + this.input.setAttribute("autocomplete", "off"); + this.input.setAttribute("aria-expanded", "false"); + this.input.setAttribute("aria-owns", "awesomplete_list_" + this.count); + this.input.setAttribute("role", "combobox"); + + // store constructor options in case we need to distinguish + // between default and customized behavior later on + this.options = o = o || {}; + + configure(this, { + minChars: 2, + maxItems: 10, + autoFirst: false, + data: _.DATA, + filter: _.FILTER_CONTAINS, + sort: o.sort === false ? false : _.SORT_BYLENGTH, + container: _.CONTAINER, + item: _.ITEM, + replace: _.REPLACE, + tabSelect: false + }, o); + + this.index = -1; + + // Create necessary elements + + this.container = this.container(input); + + this.ul = $.create("ul", { + hidden: "hidden", + role: "listbox", + id: "awesomplete_list_" + this.count, + inside: this.container + }); + + this.status = $.create("span", { + className: "visually-hidden", + role: "status", + "aria-live": "assertive", + "aria-atomic": true, + inside: this.container, + textContent: this.minChars != 0 ? ("Type " + this.minChars + " or more characters for results.") : "Begin typing for results." + }); + + // Bind events + + this._events = { + input: { + "input": this.evaluate.bind(this), + "blur": this.close.bind(this, { reason: "blur" }), + "keydown": function(evt) { + var c = evt.keyCode; + + // If the dropdown `ul` is in view, then act on keydown for the following keys: + // Enter / Esc / Up / Down + if(me.opened) { + if (c === 13 && me.selected) { // Enter + evt.preventDefault(); + me.select(undefined, undefined, evt); + } + else if (c === 9 && me.selected && me.tabSelect) { + me.select(undefined, undefined, evt); + } + else if (c === 27) { // Esc + me.close({ reason: "esc" }); + } + else if (c === 38 || c === 40) { // Down/Up arrow + evt.preventDefault(); + me[c === 38? "previous" : "next"](); + } + } + } + }, + form: { + "submit": this.close.bind(this, { reason: "submit" }) + }, + ul: { + // Prevent the default mousedowm, which ensures the input is not blurred. + // The actual selection will happen on click. This also ensures dragging the + // cursor away from the list item will cancel the selection + "mousedown": function(evt) { + evt.preventDefault(); + }, + // The click event is fired even if the corresponding mousedown event has called preventDefault + "click": function(evt) { + var li = evt.target; + + if (li !== this) { + + while (li && !/li/i.test(li.nodeName)) { + li = li.parentNode; + } + + if (li && evt.button === 0) { // Only select on left click + evt.preventDefault(); + me.select(li, evt.target, evt); + } + } + } + } + }; + + $.bind(this.input, this._events.input); + $.bind(this.input.form, this._events.form); + $.bind(this.ul, this._events.ul); + + if (this.input.hasAttribute("list")) { + this.list = "#" + this.input.getAttribute("list"); + this.input.removeAttribute("list"); + } + else { + this.list = this.input.getAttribute("data-list") || o.list || []; + } + + _.all.push(this); +}; + +_.prototype = { + set list(list) { + if (Array.isArray(list)) { + this._list = list; + } + else if (typeof list === "string" && list.indexOf(",") > -1) { + this._list = list.split(/\s*,\s*/); + } + else { // Element or CSS selector + list = $(list); + + if (list && list.children) { + var items = []; + slice.apply(list.children).forEach(function (el) { + if (!el.disabled) { + var text = el.textContent.trim(); + var value = el.value || text; + var label = el.label || text; + if (value !== "") { + items.push({ label: label, value: value }); + } + } + }); + this._list = items; + } + } + + if (document.activeElement === this.input) { + this.evaluate(); + } + }, + + get selected() { + return this.index > -1; + }, + + get opened() { + return this.isOpened; + }, + + close: function (o) { + if (!this.opened) { + return; + } + + this.input.setAttribute("aria-expanded", "false"); + this.ul.setAttribute("hidden", ""); + this.isOpened = false; + this.index = -1; + + this.status.setAttribute("hidden", ""); + + $.fire(this.input, "awesomplete-close", o || {}); + }, + + open: function () { + this.input.setAttribute("aria-expanded", "true"); + this.ul.removeAttribute("hidden"); + this.isOpened = true; + + this.status.removeAttribute("hidden"); + + if (this.autoFirst && this.index === -1) { + this.goto(0); + } + + $.fire(this.input, "awesomplete-open"); + }, + + destroy: function() { + //remove events from the input and its form + $.unbind(this.input, this._events.input); + $.unbind(this.input.form, this._events.form); + + // cleanup container if it was created by Awesomplete but leave it alone otherwise + if (!this.options.container) { + //move the input out of the awesomplete container and remove the container and its children + var parentNode = this.container.parentNode; + + parentNode.insertBefore(this.input, this.container); + parentNode.removeChild(this.container); + } + + //remove autocomplete and aria-autocomplete attributes + this.input.removeAttribute("autocomplete"); + this.input.removeAttribute("aria-autocomplete"); + + //remove this awesomeplete instance from the global array of instances + var indexOfAwesomplete = _.all.indexOf(this); + + if (indexOfAwesomplete !== -1) { + _.all.splice(indexOfAwesomplete, 1); + } + }, + + next: function () { + var count = this.ul.children.length; + this.goto(this.index < count - 1 ? this.index + 1 : (count ? 0 : -1) ); + }, + + previous: function () { + var count = this.ul.children.length; + var pos = this.index - 1; + + this.goto(this.selected && pos !== -1 ? pos : count - 1); + }, + + // Should not be used, highlights specific item without any checks! + goto: function (i) { + var lis = this.ul.children; + + if (this.selected) { + lis[this.index].setAttribute("aria-selected", "false"); + } + + this.index = i; + + if (i > -1 && lis.length > 0) { + lis[i].setAttribute("aria-selected", "true"); + + this.status.textContent = lis[i].textContent + ", list item " + (i + 1) + " of " + lis.length; + + this.input.setAttribute("aria-activedescendant", this.ul.id + "_item_" + this.index); + + // scroll to highlighted element in case parent's height is fixed + this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight; + + $.fire(this.input, "awesomplete-highlight", { + text: this.suggestions[this.index] + }); + } + }, + + select: function (selected, origin, originalEvent) { + if (selected) { + this.index = $.siblingIndex(selected); + } else { + selected = this.ul.children[this.index]; + } + + if (selected) { + var suggestion = this.suggestions[this.index]; + + var allowed = $.fire(this.input, "awesomplete-select", { + text: suggestion, + origin: origin || selected, + originalEvent: originalEvent + }); + + if (allowed) { + this.replace(suggestion); + this.close({ reason: "select" }); + $.fire(this.input, "awesomplete-selectcomplete", { + text: suggestion, + originalEvent: originalEvent + }); + } + } + }, + + evaluate: function() { + var me = this; + var value = this.input.value; + + if (value.length >= this.minChars && this._list && this._list.length > 0) { + this.index = -1; + // Populate list with options that match + this.ul.innerHTML = ""; + + this.suggestions = this._list + .map(function(item) { + return new Suggestion(me.data(item, value)); + }) + .filter(function(item) { + return me.filter(item, value); + }); + + if (this.sort !== false) { + this.suggestions = this.suggestions.sort(this.sort); + } + + this.suggestions = this.suggestions.slice(0, this.maxItems); + + this.suggestions.forEach(function(text, index) { + me.ul.appendChild(me.item(text, value, index)); + }); + + if (this.ul.children.length === 0) { + + this.status.textContent = "No results found"; + + this.close({ reason: "nomatches" }); + + } else { + this.open(); + + this.status.textContent = this.ul.children.length + " results found"; + } + } + else { + this.close({ reason: "nomatches" }); + + this.status.textContent = "No results found"; + } + } +}; + +// Static methods/properties + +_.all = []; + +_.FILTER_CONTAINS = function (text, input) { + return RegExp($.regExpEscape(input.trim()), "i").test(text); +}; + +_.FILTER_STARTSWITH = function (text, input) { + return RegExp("^" + $.regExpEscape(input.trim()), "i").test(text); +}; + +_.SORT_BYLENGTH = function (a, b) { + if (a.length !== b.length) { + return a.length - b.length; + } + + return a < b? -1 : 1; +}; + +_.CONTAINER = function (input) { + return $.create("div", { + className: "awesomplete", + around: input + }); +} + +_.ITEM = function (text, input, item_id) { + var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "$&"); + return $.create("li", { + innerHTML: html, + "role": "option", + "aria-selected": "false", + "id": "awesomplete_list_" + this.count + "_item_" + item_id + }); +}; + +_.REPLACE = function (text) { + this.input.value = text.value; +}; + +_.DATA = function (item/*, input*/) { return item; }; + +// Private functions + +function Suggestion(data) { + var o = Array.isArray(data) + ? { label: data[0], value: data[1] } + : typeof data === "object" && "label" in data && "value" in data ? data : { label: data, value: data }; + + this.label = o.label || o.value; + this.value = o.value; +} +Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), "length", { + get: function() { return this.label.length; } +}); +Suggestion.prototype.toString = Suggestion.prototype.valueOf = function () { + return "" + this.label; +}; + +function configure(instance, properties, o) { + for (var i in properties) { + var initial = properties[i], + attrValue = instance.input.getAttribute("data-" + i.toLowerCase()); + + if (typeof initial === "number") { + instance[i] = parseInt(attrValue); + } + else if (initial === false) { // Boolean options must be false by default anyway + instance[i] = attrValue !== null; + } + else if (initial instanceof Function) { + instance[i] = null; + } + else { + instance[i] = attrValue; + } + + if (!instance[i] && instance[i] !== 0) { + instance[i] = (i in o)? o[i] : initial; + } + } +} + +// Helpers + +var slice = Array.prototype.slice; + +function $(expr, con) { + return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; +} + +function $$(expr, con) { + return slice.call((con || document).querySelectorAll(expr)); +} + +$.create = function(tag, o) { + var element = document.createElement(tag); + + for (var i in o) { + var val = o[i]; + + if (i === "inside") { + $(val).appendChild(element); + } + else if (i === "around") { + var ref = $(val); + ref.parentNode.insertBefore(element, ref); + element.appendChild(ref); + + if (ref.getAttribute("autofocus") != null) { + ref.focus(); + } + } + else if (i in element) { + element[i] = val; + } + else { + element.setAttribute(i, val); + } + } + + return element; +}; + +$.bind = function(element, o) { + if (element) { + for (var event in o) { + var callback = o[event]; + + event.split(/\s+/).forEach(function (event) { + element.addEventListener(event, callback); + }); + } + } +}; + +$.unbind = function(element, o) { + if (element) { + for (var event in o) { + var callback = o[event]; + + event.split(/\s+/).forEach(function(event) { + element.removeEventListener(event, callback); + }); + } + } +}; + +$.fire = function(target, type, properties) { + var evt = document.createEvent("HTMLEvents"); + + evt.initEvent(type, true, true ); + + for (var j in properties) { + evt[j] = properties[j]; + } + + return target.dispatchEvent(evt); +}; + +$.regExpEscape = function (s) { + return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"); +}; + +$.siblingIndex = function (el) { + /* eslint-disable no-cond-assign */ + for (var i = 0; el = el.previousElementSibling; i++); + return i; +}; + +// Initialization + +function init() { + $$("input.awesomplete").forEach(function (input) { + new _(input); + }); +} + +// Make sure to export Awesomplete on self when in a browser +if (typeof self !== "undefined") { + self.Awesomplete = _; +} + +// Are we in a browser? Check for Document constructor +if (typeof Document !== "undefined") { + // DOM already loaded? + if (document.readyState !== "loading") { + init(); + } + else { + // Wait for it + document.addEventListener("DOMContentLoaded", init); + } +} + +_.$ = $; +_.$$ = $$; + +// Expose Awesomplete as a CJS module +if (typeof module === "object" && module.exports) { + module.exports = _; +} + +return _; + +}()); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js new file mode 100644 index 0000000..a895194 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js @@ -0,0 +1,3 @@ +// Awesomplete - Lea Verou - MIT license +!function(){function t(t){var e=Array.isArray(t)?{label:t[0],value:t[1]}:"object"==typeof t&&"label"in t&&"value"in t?t:{label:t,value:t};this.label=e.label||e.value,this.value=e.value}function e(t,e,i){for(var n in e){var s=e[n],r=t.input.getAttribute("data-"+n.toLowerCase());"number"==typeof s?t[n]=parseInt(r):!1===s?t[n]=null!==r:s instanceof Function?t[n]=null:t[n]=r,t[n]||0===t[n]||(t[n]=n in i?i[n]:s)}}function i(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function n(t,e){return o.call((e||document).querySelectorAll(t))}function s(){n("input.awesomplete").forEach(function(t){new r(t)})}var r=function(t,n){var s=this;r.count=(r.count||0)+1,this.count=r.count,this.isOpened=!1,this.input=i(t),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("aria-owns","awesomplete_list_"+this.count),this.input.setAttribute("role","combobox"),this.options=n=n||{},e(this,{minChars:2,maxItems:10,autoFirst:!1,data:r.DATA,filter:r.FILTER_CONTAINS,sort:!1!==n.sort&&r.SORT_BYLENGTH,container:r.CONTAINER,item:r.ITEM,replace:r.REPLACE,tabSelect:!1},n),this.index=-1,this.container=this.container(t),this.ul=i.create("ul",{hidden:"hidden",role:"listbox",id:"awesomplete_list_"+this.count,inside:this.container}),this.status=i.create("span",{className:"visually-hidden",role:"status","aria-live":"assertive","aria-atomic":!0,inside:this.container,textContent:0!=this.minChars?"Type "+this.minChars+" or more characters for results.":"Begin typing for results."}),this._events={input:{input:this.evaluate.bind(this),blur:this.close.bind(this,{reason:"blur"}),keydown:function(t){var e=t.keyCode;s.opened&&(13===e&&s.selected?(t.preventDefault(),s.select()):9===e&&s.selected&&s.tabSelect?s.select():27===e?s.close({reason:"esc"}):38!==e&&40!==e||(t.preventDefault(),s[38===e?"previous":"next"]()))}},form:{submit:this.close.bind(this,{reason:"submit"})},ul:{mousedown:function(t){t.preventDefault()},click:function(t){var e=t.target;if(e!==this){for(;e&&!/li/i.test(e.nodeName);)e=e.parentNode;e&&0===t.button&&(t.preventDefault(),s.select(e,t.target))}}}},i.bind(this.input,this._events.input),i.bind(this.input.form,this._events.form),i.bind(this.ul,this._events.ul),this.input.hasAttribute("list")?(this.list="#"+this.input.getAttribute("list"),this.input.removeAttribute("list")):this.list=this.input.getAttribute("data-list")||n.list||[],r.all.push(this)};r.prototype={set list(t){if(Array.isArray(t))this._list=t;else if("string"==typeof t&&t.indexOf(",")>-1)this._list=t.split(/\s*,\s*/);else if((t=i(t))&&t.children){var e=[];o.apply(t.children).forEach(function(t){if(!t.disabled){var i=t.textContent.trim(),n=t.value||i,s=t.label||i;""!==n&&e.push({label:s,value:n})}}),this._list=e}document.activeElement===this.input&&this.evaluate()},get selected(){return this.index>-1},get opened(){return this.isOpened},close:function(t){this.opened&&(this.input.setAttribute("aria-expanded","false"),this.ul.setAttribute("hidden",""),this.isOpened=!1,this.index=-1,this.status.setAttribute("hidden",""),i.fire(this.input,"awesomplete-close",t||{}))},open:function(){this.input.setAttribute("aria-expanded","true"),this.ul.removeAttribute("hidden"),this.isOpened=!0,this.status.removeAttribute("hidden"),this.autoFirst&&-1===this.index&&this.goto(0),i.fire(this.input,"awesomplete-open")},destroy:function(){if(i.unbind(this.input,this._events.input),i.unbind(this.input.form,this._events.form),!this.options.container){var t=this.container.parentNode;t.insertBefore(this.input,this.container),t.removeChild(this.container)}this.input.removeAttribute("autocomplete"),this.input.removeAttribute("aria-autocomplete");var e=r.all.indexOf(this);-1!==e&&r.all.splice(e,1)},next:function(){var t=this.ul.children.length;this.goto(this.index-1&&e.length>0&&(e[t].setAttribute("aria-selected","true"),this.status.textContent=e[t].textContent+", list item "+(t+1)+" of "+e.length,this.input.setAttribute("aria-activedescendant",this.ul.id+"_item_"+this.index),this.ul.scrollTop=e[t].offsetTop-this.ul.clientHeight+e[t].clientHeight,i.fire(this.input,"awesomplete-highlight",{text:this.suggestions[this.index]}))},select:function(t,e){if(t?this.index=i.siblingIndex(t):t=this.ul.children[this.index],t){var n=this.suggestions[this.index];i.fire(this.input,"awesomplete-select",{text:n,origin:e||t})&&(this.replace(n),this.close({reason:"select"}),i.fire(this.input,"awesomplete-selectcomplete",{text:n}))}},evaluate:function(){var e=this,i=this.input.value;i.length>=this.minChars&&this._list&&this._list.length>0?(this.index=-1,this.ul.innerHTML="",this.suggestions=this._list.map(function(n){return new t(e.data(n,i))}).filter(function(t){return e.filter(t,i)}),!1!==this.sort&&(this.suggestions=this.suggestions.sort(this.sort)),this.suggestions=this.suggestions.slice(0,this.maxItems),this.suggestions.forEach(function(t,n){e.ul.appendChild(e.item(t,i,n))}),0===this.ul.children.length?(this.status.textContent="No results found",this.close({reason:"nomatches"})):(this.open(),this.status.textContent=this.ul.children.length+" results found")):(this.close({reason:"nomatches"}),this.status.textContent="No results found")}},r.all=[],r.FILTER_CONTAINS=function(t,e){return RegExp(i.regExpEscape(e.trim()),"i").test(t)},r.FILTER_STARTSWITH=function(t,e){return RegExp("^"+i.regExpEscape(e.trim()),"i").test(t)},r.SORT_BYLENGTH=function(t,e){return t.length!==e.length?t.length-e.length:t$&"),role:"option","aria-selected":"false",id:"awesomplete_list_"+this.count+"_item_"+n})},r.REPLACE=function(t){this.input.value=t.value},r.DATA=function(t){return t},Object.defineProperty(t.prototype=Object.create(String.prototype),"length",{get:function(){return this.label.length}}),t.prototype.toString=t.prototype.valueOf=function(){return""+this.label};var o=Array.prototype.slice;i.create=function(t,e){var n=document.createElement(t);for(var s in e){var r=e[s];if("inside"===s)i(r).appendChild(n);else if("around"===s){var o=i(r);o.parentNode.insertBefore(n,o),n.appendChild(o),null!=o.getAttribute("autofocus")&&o.focus()}else s in n?n[s]=r:n.setAttribute(s,r)}return n},i.bind=function(t,e){if(t)for(var i in e){var n=e[i];i.split(/\s+/).forEach(function(e){t.addEventListener(e,n)})}},i.unbind=function(t,e){if(t)for(var i in e){var n=e[i];i.split(/\s+/).forEach(function(e){t.removeEventListener(e,n)})}},i.fire=function(t,e,i){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0);for(var s in i)n[s]=i[s];return t.dispatchEvent(n)},i.regExpEscape=function(t){return t.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")},i.siblingIndex=function(t){for(var e=0;t=t.previousElementSibling;e++);return e},"undefined"!=typeof self&&(self.Awesomplete=r),"undefined"!=typeof Document&&("loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",s)),r.$=i,r.$$=n,"object"==typeof module&&module.exports&&(module.exports=r)}(); +//# sourceMappingURL=awesomplete.min.js.map diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js.map b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js.map new file mode 100644 index 0000000..6ad1411 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["awesomplete.js"],"names":["Suggestion","data","o","Array","isArray","label","value","this","configure","instance","properties","i","initial","attrValue","input","getAttribute","toLowerCase","parseInt","Function","$","expr","con","document","querySelector","$$","slice","call","querySelectorAll","init","forEach","_","me","count","isOpened","setAttribute","options","minChars","maxItems","autoFirst","DATA","filter","FILTER_CONTAINS","sort","SORT_BYLENGTH","container","CONTAINER","item","ITEM","replace","REPLACE","tabSelect","index","ul","create","hidden","role","id","inside","status","className","aria-live","aria-atomic","textContent","_events","evaluate","bind","blur","close","reason","keydown","evt","c","keyCode","opened","selected","preventDefault","select","form","submit","mousedown","click","li","target","test","nodeName","parentNode","button","hasAttribute","list","removeAttribute","all","push","prototype","_list","indexOf","split","children","items","apply","el","disabled","text","trim","activeElement","fire","open","goto","destroy","unbind","insertBefore","removeChild","indexOfAwesomplete","splice","next","length","previous","pos","lis","scrollTop","offsetTop","clientHeight","suggestions","origin","siblingIndex","suggestion","innerHTML","map","appendChild","RegExp","regExpEscape","FILTER_STARTSWITH","a","b","around","item_id","aria-selected","Object","defineProperty","String","get","toString","valueOf","tag","element","createElement","val","ref","focus","event","callback","addEventListener","removeEventListener","type","createEvent","initEvent","j","dispatchEvent","s","previousElementSibling","self","Awesomplete","Document","readyState","module","exports"],"mappings":"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","file":"awesomplete.min.js","sourcesContent":["/**\n * Simple, lightweight, usable local autocomplete library for modern browsers\n * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P\n * @author Lea Verou http://leaverou.github.io/awesomplete\n * MIT license\n */\n\n(function () {\n\nvar _ = function (input, o) {\n\tvar me = this;\n\n // Keep track of number of instances for unique IDs\n _.count = (_.count || 0) + 1;\n this.count = _.count;\n\n\t// Setup\n\n\tthis.isOpened = false;\n\n\tthis.input = $(input);\n\tthis.input.setAttribute(\"autocomplete\", \"off\");\n\tthis.input.setAttribute(\"aria-expanded\", \"false\");\n\tthis.input.setAttribute(\"aria-owns\", \"awesomplete_list_\" + this.count);\n\tthis.input.setAttribute(\"role\", \"combobox\");\n\n\t// store constructor options in case we need to distinguish\n\t// between default and customized behavior later on\n\tthis.options = o = o || {};\n\n\tconfigure(this, {\n\t\tminChars: 2,\n\t\tmaxItems: 10,\n\t\tautoFirst: false,\n\t\tdata: _.DATA,\n\t\tfilter: _.FILTER_CONTAINS,\n\t\tsort: o.sort === false ? false : _.SORT_BYLENGTH,\n\t\tcontainer: _.CONTAINER,\n\t\titem: _.ITEM,\n\t\treplace: _.REPLACE,\n\t\ttabSelect: false\n\t}, o);\n\n\tthis.index = -1;\n\n\t// Create necessary elements\n\n\tthis.container = this.container(input);\n\n\tthis.ul = $.create(\"ul\", {\n\t\thidden: \"hidden\",\n role: \"listbox\",\n id: \"awesomplete_list_\" + this.count,\n\t\tinside: this.container\n\t});\n\n\tthis.status = $.create(\"span\", {\n\t\tclassName: \"visually-hidden\",\n\t\trole: \"status\",\n\t\t\"aria-live\": \"assertive\",\n \"aria-atomic\": true,\n inside: this.container,\n textContent: this.minChars != 0 ? (\"Type \" + this.minChars + \" or more characters for results.\") : \"Begin typing for results.\"\n\t});\n\n\t// Bind events\n\n\tthis._events = {\n\t\tinput: {\n\t\t\t\"input\": this.evaluate.bind(this),\n\t\t\t\"blur\": this.close.bind(this, { reason: \"blur\" }),\n\t\t\t\"keydown\": function(evt) {\n\t\t\t\tvar c = evt.keyCode;\n\n\t\t\t\t// If the dropdown `ul` is in view, then act on keydown for the following keys:\n\t\t\t\t// Enter / Esc / Up / Down\n\t\t\t\tif(me.opened) {\n\t\t\t\t\tif (c === 13 && me.selected) { // Enter\n\t\t\t\t\t\tevt.preventDefault();\n\t\t\t\t\t\tme.select();\n\t\t\t\t\t}\n\t\t\t\t\telse if (c === 9 && me.selected && me.tabSelect) {\n\t\t\t\t\t\tme.select();\n\t\t\t\t\t}\n\t\t\t\t\telse if (c === 27) { // Esc\n\t\t\t\t\t\tme.close({ reason: \"esc\" });\n\t\t\t\t\t}\n\t\t\t\t\telse if (c === 38 || c === 40) { // Down/Up arrow\n\t\t\t\t\t\tevt.preventDefault();\n\t\t\t\t\t\tme[c === 38? \"previous\" : \"next\"]();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tform: {\n\t\t\t\"submit\": this.close.bind(this, { reason: \"submit\" })\n\t\t},\n\t\tul: {\n\t\t\t// Prevent the default mousedowm, which ensures the input is not blurred.\n\t\t\t// The actual selection will happen on click. This also ensures dragging the\n\t\t\t// cursor away from the list item will cancel the selection\n\t\t\t\"mousedown\": function(evt) {\n\t\t\t\tevt.preventDefault();\n\t\t\t},\n\t\t\t// The click event is fired even if the corresponding mousedown event has called preventDefault\n\t\t\t\"click\": function(evt) {\n\t\t\t\tvar li = evt.target;\n\n\t\t\t\tif (li !== this) {\n\n\t\t\t\t\twhile (li && !/li/i.test(li.nodeName)) {\n\t\t\t\t\t\tli = li.parentNode;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (li && evt.button === 0) { // Only select on left click\n\t\t\t\t\t\tevt.preventDefault();\n\t\t\t\t\t\tme.select(li, evt.target);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\t$.bind(this.input, this._events.input);\n\t$.bind(this.input.form, this._events.form);\n\t$.bind(this.ul, this._events.ul);\n\n\tif (this.input.hasAttribute(\"list\")) {\n\t\tthis.list = \"#\" + this.input.getAttribute(\"list\");\n\t\tthis.input.removeAttribute(\"list\");\n\t}\n\telse {\n\t\tthis.list = this.input.getAttribute(\"data-list\") || o.list || [];\n\t}\n\n\t_.all.push(this);\n};\n\n_.prototype = {\n\tset list(list) {\n\t\tif (Array.isArray(list)) {\n\t\t\tthis._list = list;\n\t\t}\n\t\telse if (typeof list === \"string\" && list.indexOf(\",\") > -1) {\n\t\t\t\tthis._list = list.split(/\\s*,\\s*/);\n\t\t}\n\t\telse { // Element or CSS selector\n\t\t\tlist = $(list);\n\n\t\t\tif (list && list.children) {\n\t\t\t\tvar items = [];\n\t\t\t\tslice.apply(list.children).forEach(function (el) {\n\t\t\t\t\tif (!el.disabled) {\n\t\t\t\t\t\tvar text = el.textContent.trim();\n\t\t\t\t\t\tvar value = el.value || text;\n\t\t\t\t\t\tvar label = el.label || text;\n\t\t\t\t\t\tif (value !== \"\") {\n\t\t\t\t\t\t\titems.push({ label: label, value: value });\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis._list = items;\n\t\t\t}\n\t\t}\n\n\t\tif (document.activeElement === this.input) {\n\t\t\tthis.evaluate();\n\t\t}\n\t},\n\n\tget selected() {\n\t\treturn this.index > -1;\n\t},\n\n\tget opened() {\n\t\treturn this.isOpened;\n\t},\n\n\tclose: function (o) {\n\t\tif (!this.opened) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.input.setAttribute(\"aria-expanded\", \"false\");\n\t\tthis.ul.setAttribute(\"hidden\", \"\");\n\t\tthis.isOpened = false;\n\t\tthis.index = -1;\n\n\t\tthis.status.setAttribute(\"hidden\", \"\");\n\n\t\t$.fire(this.input, \"awesomplete-close\", o || {});\n\t},\n\n\topen: function () {\n\t\tthis.input.setAttribute(\"aria-expanded\", \"true\");\n\t\tthis.ul.removeAttribute(\"hidden\");\n\t\tthis.isOpened = true;\n\n\t\tthis.status.removeAttribute(\"hidden\");\n\n\t\tif (this.autoFirst && this.index === -1) {\n\t\t\tthis.goto(0);\n\t\t}\n\n\t\t$.fire(this.input, \"awesomplete-open\");\n\t},\n\n\tdestroy: function() {\n\t\t//remove events from the input and its form\n\t\t$.unbind(this.input, this._events.input);\n\t\t$.unbind(this.input.form, this._events.form);\n\n\t\t// cleanup container if it was created by Awesomplete but leave it alone otherwise\n\t\tif (!this.options.container) {\n\t\t\t//move the input out of the awesomplete container and remove the container and its children\n\t\t\tvar parentNode = this.container.parentNode;\n\n\t\t\tparentNode.insertBefore(this.input, this.container);\n\t\t\tparentNode.removeChild(this.container);\n\t\t}\n\n\t\t//remove autocomplete and aria-autocomplete attributes\n\t\tthis.input.removeAttribute(\"autocomplete\");\n\t\tthis.input.removeAttribute(\"aria-autocomplete\");\n\n\t\t//remove this awesomeplete instance from the global array of instances\n\t\tvar indexOfAwesomplete = _.all.indexOf(this);\n\n\t\tif (indexOfAwesomplete !== -1) {\n\t\t\t_.all.splice(indexOfAwesomplete, 1);\n\t\t}\n\t},\n\n\tnext: function () {\n\t\tvar count = this.ul.children.length;\n\t\tthis.goto(this.index < count - 1 ? this.index + 1 : (count ? 0 : -1) );\n\t},\n\n\tprevious: function () {\n\t\tvar count = this.ul.children.length;\n\t\tvar pos = this.index - 1;\n\n\t\tthis.goto(this.selected && pos !== -1 ? pos : count - 1);\n\t},\n\n\t// Should not be used, highlights specific item without any checks!\n\tgoto: function (i) {\n\t\tvar lis = this.ul.children;\n\n\t\tif (this.selected) {\n\t\t\tlis[this.index].setAttribute(\"aria-selected\", \"false\");\n\t\t}\n\n\t\tthis.index = i;\n\n\t\tif (i > -1 && lis.length > 0) {\n\t\t\tlis[i].setAttribute(\"aria-selected\", \"true\");\n\n\t\t\tthis.status.textContent = lis[i].textContent + \", list item \" + (i + 1) + \" of \" + lis.length;\n\n this.input.setAttribute(\"aria-activedescendant\", this.ul.id + \"_item_\" + this.index);\n\n\t\t\t// scroll to highlighted element in case parent's height is fixed\n\t\t\tthis.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;\n\n\t\t\t$.fire(this.input, \"awesomplete-highlight\", {\n\t\t\t\ttext: this.suggestions[this.index]\n\t\t\t});\n\t\t}\n\t},\n\n\tselect: function (selected, origin) {\n\t\tif (selected) {\n\t\t\tthis.index = $.siblingIndex(selected);\n\t\t} else {\n\t\t\tselected = this.ul.children[this.index];\n\t\t}\n\n\t\tif (selected) {\n\t\t\tvar suggestion = this.suggestions[this.index];\n\n\t\t\tvar allowed = $.fire(this.input, \"awesomplete-select\", {\n\t\t\t\ttext: suggestion,\n\t\t\t\torigin: origin || selected\n\t\t\t});\n\n\t\t\tif (allowed) {\n\t\t\t\tthis.replace(suggestion);\n\t\t\t\tthis.close({ reason: \"select\" });\n\t\t\t\t$.fire(this.input, \"awesomplete-selectcomplete\", {\n\t\t\t\t\ttext: suggestion\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\n\n\tevaluate: function() {\n\t\tvar me = this;\n\t\tvar value = this.input.value;\n\n\t\tif (value.length >= this.minChars && this._list && this._list.length > 0) {\n\t\t\tthis.index = -1;\n\t\t\t// Populate list with options that match\n\t\t\tthis.ul.innerHTML = \"\";\n\n\t\t\tthis.suggestions = this._list\n\t\t\t\t.map(function(item) {\n\t\t\t\t\treturn new Suggestion(me.data(item, value));\n\t\t\t\t})\n\t\t\t\t.filter(function(item) {\n\t\t\t\t\treturn me.filter(item, value);\n\t\t\t\t});\n\n\t\t\tif (this.sort !== false) {\n\t\t\t\tthis.suggestions = this.suggestions.sort(this.sort);\n\t\t\t}\n\n\t\t\tthis.suggestions = this.suggestions.slice(0, this.maxItems);\n\n\t\t\tthis.suggestions.forEach(function(text, index) {\n\t\t\t\t\tme.ul.appendChild(me.item(text, value, index));\n\t\t\t\t});\n\n\t\t\tif (this.ul.children.length === 0) {\n\n this.status.textContent = \"No results found\";\n\n\t\t\t\tthis.close({ reason: \"nomatches\" });\n\n\t\t\t} else {\n\t\t\t\tthis.open();\n\n this.status.textContent = this.ul.children.length + \" results found\";\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tthis.close({ reason: \"nomatches\" });\n\n this.status.textContent = \"No results found\";\n\t\t}\n\t}\n};\n\n// Static methods/properties\n\n_.all = [];\n\n_.FILTER_CONTAINS = function (text, input) {\n\treturn RegExp($.regExpEscape(input.trim()), \"i\").test(text);\n};\n\n_.FILTER_STARTSWITH = function (text, input) {\n\treturn RegExp(\"^\" + $.regExpEscape(input.trim()), \"i\").test(text);\n};\n\n_.SORT_BYLENGTH = function (a, b) {\n\tif (a.length !== b.length) {\n\t\treturn a.length - b.length;\n\t}\n\n\treturn a < b? -1 : 1;\n};\n\n_.CONTAINER = function (input) {\n\treturn $.create(\"div\", {\n\t\tclassName: \"awesomplete\",\n\t\taround: input\n\t});\n}\n\n_.ITEM = function (text, input, item_id) {\n\tvar html = input.trim() === \"\" ? text : text.replace(RegExp($.regExpEscape(input.trim()), \"gi\"), \"$&\");\n\treturn $.create(\"li\", {\n\t\tinnerHTML: html,\n\t\t\"role\": \"option\",\n\t\t\"aria-selected\": \"false\",\n\t\t\"id\": \"awesomplete_list_\" + this.count + \"_item_\" + item_id\n\t});\n};\n\n_.REPLACE = function (text) {\n\tthis.input.value = text.value;\n};\n\n_.DATA = function (item/*, input*/) { return item; };\n\n// Private functions\n\nfunction Suggestion(data) {\n\tvar o = Array.isArray(data)\n\t ? { label: data[0], value: data[1] }\n\t : typeof data === \"object\" && \"label\" in data && \"value\" in data ? data : { label: data, value: data };\n\n\tthis.label = o.label || o.value;\n\tthis.value = o.value;\n}\nObject.defineProperty(Suggestion.prototype = Object.create(String.prototype), \"length\", {\n\tget: function() { return this.label.length; }\n});\nSuggestion.prototype.toString = Suggestion.prototype.valueOf = function () {\n\treturn \"\" + this.label;\n};\n\nfunction configure(instance, properties, o) {\n\tfor (var i in properties) {\n\t\tvar initial = properties[i],\n\t\t attrValue = instance.input.getAttribute(\"data-\" + i.toLowerCase());\n\n\t\tif (typeof initial === \"number\") {\n\t\t\tinstance[i] = parseInt(attrValue);\n\t\t}\n\t\telse if (initial === false) { // Boolean options must be false by default anyway\n\t\t\tinstance[i] = attrValue !== null;\n\t\t}\n\t\telse if (initial instanceof Function) {\n\t\t\tinstance[i] = null;\n\t\t}\n\t\telse {\n\t\t\tinstance[i] = attrValue;\n\t\t}\n\n\t\tif (!instance[i] && instance[i] !== 0) {\n\t\t\tinstance[i] = (i in o)? o[i] : initial;\n\t\t}\n\t}\n}\n\n// Helpers\n\nvar slice = Array.prototype.slice;\n\nfunction $(expr, con) {\n\treturn typeof expr === \"string\"? (con || document).querySelector(expr) : expr || null;\n}\n\nfunction $$(expr, con) {\n\treturn slice.call((con || document).querySelectorAll(expr));\n}\n\n$.create = function(tag, o) {\n\tvar element = document.createElement(tag);\n\n\tfor (var i in o) {\n\t\tvar val = o[i];\n\n\t\tif (i === \"inside\") {\n\t\t\t$(val).appendChild(element);\n\t\t}\n\t\telse if (i === \"around\") {\n\t\t\tvar ref = $(val);\n\t\t\tref.parentNode.insertBefore(element, ref);\n\t\t\telement.appendChild(ref);\n\n\t\t\tif (ref.getAttribute(\"autofocus\") != null) {\n\t\t\t\tref.focus();\n\t\t\t}\n\t\t}\n\t\telse if (i in element) {\n\t\t\telement[i] = val;\n\t\t}\n\t\telse {\n\t\t\telement.setAttribute(i, val);\n\t\t}\n\t}\n\n\treturn element;\n};\n\n$.bind = function(element, o) {\n\tif (element) {\n\t\tfor (var event in o) {\n\t\t\tvar callback = o[event];\n\n\t\t\tevent.split(/\\s+/).forEach(function (event) {\n\t\t\t\telement.addEventListener(event, callback);\n\t\t\t});\n\t\t}\n\t}\n};\n\n$.unbind = function(element, o) {\n\tif (element) {\n\t\tfor (var event in o) {\n\t\t\tvar callback = o[event];\n\n\t\t\tevent.split(/\\s+/).forEach(function(event) {\n\t\t\t\telement.removeEventListener(event, callback);\n\t\t\t});\n\t\t}\n\t}\n};\n\n$.fire = function(target, type, properties) {\n\tvar evt = document.createEvent(\"HTMLEvents\");\n\n\tevt.initEvent(type, true, true );\n\n\tfor (var j in properties) {\n\t\tevt[j] = properties[j];\n\t}\n\n\treturn target.dispatchEvent(evt);\n};\n\n$.regExpEscape = function (s) {\n\treturn s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\");\n};\n\n$.siblingIndex = function (el) {\n\t/* eslint-disable no-cond-assign */\n\tfor (var i = 0; el = el.previousElementSibling; i++);\n\treturn i;\n};\n\n// Initialization\n\nfunction init() {\n\t$$(\"input.awesomplete\").forEach(function (input) {\n\t\tnew _(input);\n\t});\n}\n\n// Make sure to export Awesomplete on self when in a browser\nif (typeof self !== \"undefined\") {\n\tself.Awesomplete = _;\n}\n\n// Are we in a browser? Check for Document constructor\nif (typeof Document !== \"undefined\") {\n\t// DOM already loaded?\n\tif (document.readyState !== \"loading\") {\n\t\tinit();\n\t}\n\telse {\n\t\t// Wait for it\n\t\tdocument.addEventListener(\"DOMContentLoaded\", init);\n\t}\n}\n\n_.$ = $;\n_.$$ = $$;\n\n// Expose Awesomplete as a CJS module\nif (typeof module === \"object\" && module.exports) {\n\tmodule.exports = _;\n}\n\nreturn _;\n\n}());\n"]} \ No newline at end of file diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.theme.css b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.theme.css new file mode 100644 index 0000000..8a964f1 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/awesomplete.theme.css @@ -0,0 +1,69 @@ +.awesomplete > ul { + border-radius: .3em; + margin: .2em 0 0; + background: hsla(0,0%,100%,.9); + background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); + border: 1px solid rgba(0,0,0,.3); + box-shadow: .05em .2em .6em rgba(0,0,0,.2); + text-shadow: none; +} + +@supports (transform: scale(0)) { + .awesomplete > ul { + transition: .3s cubic-bezier(.4,.2,.5,1.4); + transform-origin: 1.43em -.43em; + } + + .awesomplete > ul[hidden], + .awesomplete > ul:empty { + opacity: 0; + transform: scale(0); + display: block; + transition-timing-function: ease; + } +} + + /* Pointer */ + .awesomplete > ul:before { + content: ""; + position: absolute; + top: -.43em; + left: 1em; + width: 0; height: 0; + padding: .4em; + background: white; + border: inherit; + border-right: 0; + border-bottom: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + + .awesomplete > ul > li { + position: relative; + padding: .2em .5em; + cursor: pointer; + } + + .awesomplete > ul > li:hover { + background: hsl(200, 40%, 80%); + color: black; + } + + .awesomplete > ul > li[aria-selected="true"] { + background: hsl(205, 40%, 40%); + color: white; + } + + .awesomplete mark { + background: hsl(65, 100%, 50%); + } + + .awesomplete li:hover mark { + background: hsl(68, 100%, 41%); + } + + .awesomplete li[aria-selected="true"] mark { + background: hsl(86, 100%, 21%); + color: inherit; + } \ No newline at end of file diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/bower.json b/src/EventHub.Web/wwwroot/libs/awesomplete/bower.json new file mode 100644 index 0000000..c372cf8 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/bower.json @@ -0,0 +1,17 @@ +{ + "name": "awesomplete", + "main": [ + "./awesomplete.css", + "./awesomplete.js" + ], + "homepage": "https://github.com/LeaVerou/awesomplete", + "authors": [ + "Lea Verou <>" + ], + "description": "Ultra lightweight, usable autocomplete with zero dependencies.", + "keywords": [ + "autocomplete", + "lightweight" + ], + "license": "MIT" +} diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/gulpfile.js b/src/EventHub.Web/wwwroot/libs/awesomplete/gulpfile.js new file mode 100644 index 0000000..89db87b --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/gulpfile.js @@ -0,0 +1,31 @@ +var gulp = require('gulp'); +var uglify = require('gulp-uglify'); +var rename = require('gulp-rename'); +var header = require('gulp-header'); +var concat = require('gulp-concat'); +var sourcemaps = require('gulp-sourcemaps'); + +var banner = "// Awesomplete - Lea Verou - MIT license\n"; + +gulp.task('minify', function() { + return gulp.src(['awesomplete.js']) + .pipe(sourcemaps.init()) + .pipe(uglify()) + .pipe(rename({ suffix: '.min' })) + .pipe(header(banner)) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest('.')); +}); + +gulp.task('concat', function() { + + return gulp.src(['awesomplete.base.css', 'awesomplete.theme.css']) + .pipe(sourcemaps.init()) + .pipe(concat('awesomplete.css')) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest('.')); + + +}); + +gulp.task('default', ['minify', 'concat']); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/index.html b/src/EventHub.Web/wwwroot/libs/awesomplete/index.html new file mode 100644 index 0000000..be08ec9 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/index.html @@ -0,0 +1,501 @@ + + + + + +Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou + + + + + + + + + +
+ +

Awesomplete

+ +2KB minified & gzipped! + +

Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because <datalist> still doesn’t cut it.

+ + +
+ +
+ +

Demo (no JS, minimal options)

+ + +

Note that by default you need to type at least 2 characters for the popup to show up, though that’s super easy to customize. With Awesomplete, making something like this can be as simple as:

+ +
<input class="awesomplete"
+       data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
+ +
// No extra JS needed for basic usage!
+ +
+ +
+ +

Basic usage

+

Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual <link rel="stylesheet" href="awesomplete.css" /> and <script src="awesomplete.js" async></script> tags.

+ +

For the autocomplete, you just need an <input> text field (might work on <textarea> and elements with contentEditable, but that hasn’t been tested). Add class="awesomplete" for it to be automatically processed (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization.

+

There are many ways to link an input to a list of suggestions. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:

+ +
<input class="awesomplete" list="mylist" />
+<datalist id="mylist">
+	<option>Ada</option>
+	<option>Java</option>
+	<option>JavaScript</option>
+	<option>Brainfuck</option>
+	<option>LOLCODE</option>
+	<option>Node.js</option>
+	<option>Ruby on Rails</option>
+</datalist>
+ +
// None!
+ +

Or the following, if you don’t want to use a <datalist>, or if you don’t want to use IDs (since any selector will work in data-list):

+ +
<input class="awesomplete" data-list="#mylist" />
+<ul id="mylist">
+	<li>Ada</li>
+	<li>Java</li>
+	<li>JavaScript</li>
+	<li>Brainfuck</li>
+	<li>LOLCODE</li>
+	<li>Node.js</li>
+	<li>Ruby on Rails</li>
+</ul>
+ +
// None!
+ +

Or the following, if we want to instantiate in JS:

+ +
<input id="myinput" />
+<ul id="mylist">
+	<li>Ada</li>
+	<li>Java</li>
+	<li>JavaScript</li>
+	<li>Brainfuck</li>
+	<li>LOLCODE</li>
+	<li>Node.js</li>
+	<li>Ruby on Rails</li>
+</ul>
+
var input = document.getElementById("myinput");
+new Awesomplete(input, {list: "#mylist"});
+ +

We can use an element reference for the list instead of a selector:

+ +
<input id="myinput" />
+<ul id="mylist">
+	<li>Ada</li>
+	<li>Java</li>
+	<li>JavaScript</li>
+	<li>Brainfuck</li>
+	<li>LOLCODE</li>
+	<li>Node.js</li>
+	<li>Ruby on Rails</li>
+</ul>
+
var input = document.getElementById("myinput");
+new Awesomplete(input, {list: document.querySelector("#mylist")});
+ +

We can also directly use an array of strings:

+ +
<input id="myinput" />
+ 
var input = document.getElementById("myinput");
+new Awesomplete(input, {
+	list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"]
+});
+ +

We can even set it (or override it) later and it will just work:

+ +
<input id="myinput" />
+ 
var input = document.getElementById("myinput");
+var awesomplete = new Awesomplete(input);
+
+/* ...more code... */
+
+awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"];
+ +

Suggestions with different label and value are supported too. The label will be shown in autocompleter and the value will be inserted into the input. If you want to insert the label into the input you can provide your own replace function

+ +
<input id="myinput" />
+ 
var input = document.getElementById("myinput");
+
+// Show label but insert value into the input:
+new Awesomplete(input, {
+	list: [
+		{ label: "Belarus", value: "BY" },
+		{ label: "China", value: "CN" },
+		{ label: "United States", value: "US" }
+	]
+});
+
+// Same with arrays:
+new Awesomplete(input, {
+	list: [
+		[ "Belarus", "BY" ],
+		[ "China", "CN" ],
+		[ "United States", "US" ]
+	]
+});
+
+// Show label and insert label into the input:
+new Awesomplete(input, {
+	list: [
+		{ label: "Belarus", value: "BY" },
+		{ label: "China", value: "CN" },
+		{ label: "United States", value: "US" }
+	],
+	// insert label instead of value into the input.
+	replace: function(suggestion) {
+		this.input.value = suggestion.label;
+	}
+});
+
+ +
+ +
+

Customize

+ +

All settings discussed in this section are settable via either a data- attribute on the <input> element or a JS property on the second argument of the Awesomplete constructor, like so:

+ + 
new Awesomplete(inputReference, {
+	minChars: 3,
+	maxItems: 15,
+	...
+});
+

You can of course combine both HTML attributes and JS properties. In case of conflict (e.g. you’ve specified both a data-minchars on the text field and a minChars JS property, the HTML attribute wins. You can also use the JS properties to change a parameter after the object has been created, in which case the change will apply even if there is a conflicting HTML attribute.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
JS propertyHTML attributeDescriptionValueDefault
listdata-listWhere to find the list of suggestions. Described in more detail in the “Basic usage” section above.
    +
  • Array of strings
    • +
  • HTML element
    • +
  • CSS selector (no groups, i.e. no commas)
    • +
  • String containing a comma-separated list of items
    • +
N/A
minCharsdata-mincharsMinimum characters the user has to type before the autocomplete popup shows up.Number2
maxItemsdata-maxitemsMaximum number of suggestions to display.Number10
autoFirstdata-autofirstShould the first element be automatically selected? Demo: Booleanfalse
+ +
+ +
+

Extend

+

The following JS properties do not have equivalent HTML attributes, because their values are functions. They allow you to completely change the way Awesomplete works:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescriptionValueDefault
filterControls how entries get matched. By default, the input can match anywhere in the string and it’s a case insensitive match.Function that takes two parameters, the first one being the current suggestion text that’s being tested and the second a string with the user’s input it’s matched against. Returns true if the match is successful and false if it is not. For example, to only match strings that start with the user’s input, case sensitive, we can do this: +
filter: function (text, input) {
+	return text.indexOf(input) === 0;
+}
For case-insensitive matching from the start of the word, there is a predefined filter that you can use, Awesomplete.FILTER_STARTSWITH + 		Awesomplete.FILTER_CONTAINS: Text can match anywhere, case insensitive.
sortControls how list items are ordered.Sort function (will be passed directly to Array.prototype.sort()) to sort the items after they have been filtered and before they are truncated and converted to HTML elements. If value is false, sorting will be disabled.Sorted by length first, order second.
containerControls how list container element is generated.Function that takes one parameter, the user’s input and returns an element.Generates <div> with class awesomplete
itemControls how list items are generated.Function that takes two parameters, the first one being the suggestion text and the second one the user’s input and returns a list item.Generates list items with the user’s input highlighted via <mark>.
replaceControls how the user’s selection replaces the user’s input. For example, this is useful if you want the selection to only partially replace the user’s input.Function that takes one parameter, the text of the selected option, and is responsible for replacing the current input value with it. + 
function (text) {
+	this.input.value = text;
+}
dataControls suggestions' label and value. This is useful if you have list items in custom format, or want to change list items based on user's input.Function that takes two parameters, the first one being the original list item and the second a string with the user’s input and returns a list item in one of supported by default formats: +
    +
  • "JavaScript"
    • +
  • { label: "JavaScript", value: "JS" }
    • +
  • [ "JavaScript", "JS" ]
    • +
+To use objects without label or value properties, e.g. name and id instead, you can do this: +
data: function (item, input) {
+	return { label: item.name, value: item.id };
+}
+You can use any object for label and value and it will be converted to String where necessary: +
list: [ new Date("2015-01-01"), ... ]
+Original list items as Date objects will be accessible in filter, sort, item and replace functions, but by default we'll just see Date objects converted to strings in autocompleter and the same value will be inserted to the input. +
+We can also generate list items based on user's input. See E-mail autocomplete example in Advanced Examples section. + 		Awesomplete.DATA: Identity function which just returns the original list item.
+
+ +
+

Events

+ +

Custom events are thrown in several places and are often cancellable. To avoid conflicts, all custom events are prefixed with awesomplete-.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionevent.preventDefault()?
awesomplete-selectThe user has made a selection (either via pressing enter or clicking on an item), but it has not been applied yet. Callback will be passed an object with text (selected suggestion), origin (DOM element) properties and originalEvent the original triggering DOM event.Yes. The selection will not be applied and the popup will not close.
awesomplete-selectcompleteThe user has made a selection (either via pressing enter or clicking on an item), and it has been applied. Callback will be passed an object with a text property containing the selected suggestion and originalEvent the original triggering DOM event.No
awesomplete-openThe popup just appeared.No
awesomplete-closeThe popup just closed. Callback will be passed an object with a reason property that indicates why the event was fired. Reasons include "blur", "esc", "submit", "select", and "nomatches".No
awesomplete-highlightThe highlighted item just changed (in response to pressing an arrow key or via an API call). Callback will be passed an object with a text property containing the highlighted suggestion.No
+
+ +
+

API

+ +

There are several methods on every Awesomplete instance that you can call to customize behavior:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
open()Opens the popup.
close()Closes the popup.
next()Highlights the next item in the popup.
previous()Highlights the previous item in the popup.
goto(i)Highlights the item with index i in the popup (-1 to deselect all). Avoid using this directly and try to use next() or previous() instead when possible.
select()Selects the currently highlighted item, replaces the text field’s value with it and closes the popup.
evaluate()Evaluates the current state of the widget and regenerates the list of suggestions or closes the popup if none are available. You need to call it if you dynamically set list while the popup is open.
destroy()Clean up and remove the instance from the input.
+
+ +
+

Advanced Examples

+

These examples show how powerful Awesomplete’s minimal API can be.

+ +
+

E-mail autocomplete

+ + 
<input type="email" />
+
+
+ +
+

Multiple values

+ + 
<input data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" data-multiple />
+
+
+ +
+

Ajax example (restcountries.eu api)

+ +
+
+ +
+

Combobox dropdown

+ + 
<input data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" class="dropdown-input" />
+
+
+ +
+

Download!

+ + + +

Pull requests are very welcome, as long as you maintain the code style and ask before adding tons of LOCs to the codebase!

+
+ + + + + + + + + + + + + + diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/index.js b/src/EventHub.Web/wwwroot/libs/awesomplete/index.js new file mode 100644 index 0000000..f081872 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/index.js @@ -0,0 +1,16 @@ +/* global Awesomplete, $:true, $$:true */ +$ = Awesomplete.$; +$$ = Awesomplete.$$; + +document.addEventListener("DOMContentLoaded", function() { + var nav = $("nav") + $$("section > h1").forEach(function (h1) { + if (h1.parentNode.id) { + $.create("a", { + href: "#" + h1.parentNode.id, + textContent: h1.textContent.replace(/\(.+?\)/g, ""), + inside: nav + }); + } + }); +}); \ No newline at end of file diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/karma.conf.js b/src/EventHub.Web/wwwroot/libs/awesomplete/karma.conf.js new file mode 100644 index 0000000..f4146f4 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/karma.conf.js @@ -0,0 +1,70 @@ +module.exports = function(config) { + config.set({ + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine', 'jasmine-def', 'fixture'], + + // list of files / patterns to load in the browser + files: [ + 'awesomplete.js', + 'test/specHelper.js', + { + pattern: 'test/fixtures/**/*.html', + watched: true, included: true, served: true + }, + 'test/**/*Spec.js' + ], + + // list of files to exclude + exclude: [ + '**/*.swp' + ], + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + 'awesomplete.js': ['coverage'], + '**/*.html' : ['html2js'] + }, + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['dots', 'coverage'], + coverageReporter: { + type: 'lcov', + subdir: '.' + }, + // web server port + port: 9876, + + // enable / disable colors in the output (reporters and logs) + colors: true, + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: process.env.TRAVIS ? ['ChromeTravisCI'] : ['Chrome'], + + // need this to run Chrome on Travis CI + customLaunchers: { + ChromeTravisCI: { + base: 'Chrome', + flags: ['--no-sandbox'] + } + }, + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: false + }); +}; diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/package.json b/src/EventHub.Web/wwwroot/libs/awesomplete/package.json new file mode 100644 index 0000000..6122946 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/package.json @@ -0,0 +1,32 @@ +{ + "name": "awesomplete", + "version": "1.1.5", + "description": "http://leaverou.github.io/awesomplete/", + "main": "awesomplete.js", + "scripts": { + "test": "karma start --single-run" + }, + "repository": "LeaVerou/awesomplete", + "author": "Lea Verou", + "license": "MIT", + "bugs": { + "url": "https://github.com/LeaVerou/awesomplete/issues" + }, + "homepage": "https://leaverou.github.io/awesomplete/", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-header": "^1.7.1", + "gulp-rename": "^1.2.2", + "gulp-sourcemaps": "^1.6.0", + "gulp-uglify": "^2.0.0", + "jasmine-core": "^2.4.1", + "karma": "^0.13.19", + "karma-chrome-launcher": "^0.2.2", + "karma-coverage": "^0.5.3", + "karma-fixture": "^0.2.5", + "karma-html2js-preprocessor": "^0.1.0", + "karma-jasmine": "^0.3.6", + "karma-jasmine-def": "^0.1.0" + } +} diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.css b/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.css new file mode 100644 index 0000000..4606f50 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.css @@ -0,0 +1,139 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+json */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.js b/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.js new file mode 100644 index 0000000..7ad05a3 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/prism/prism.js @@ -0,0 +1,7 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+json */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];b&&P.push(b);var A=new a(i,g?t.tokenize(m,g):m,h);P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var l={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}t.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; +Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; +Prism.languages.json={property:/".*?"(?=\s*:)/gi,string:/"(?!:)(\\?[^"])*?"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json; diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/style.css b/src/EventHub.Web/wwwroot/libs/awesomplete/style.css new file mode 100644 index 0000000..68763ff --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/style.css @@ -0,0 +1,292 @@ +body { + max-width: 50rem; + padding: 1rem; + margin: auto; + background: hsl(35, 80%, 94%); + color: hsl(35, 50%, 20%); + text-shadow: 0 1px 1px white; + font: 120%/1.6 Baskerville, Palatino Linotype, Palatino, serif; +} + +a { + color: #58a; +} + +h1 { + text-align: center; + font-weight: 600; +} + + section > h1 { + margin-top: 2em; + } + +h2 { + color: hsl(35, 50%, 40%); + font-weight: 600; + font-size: 120%; +} + +ul { + margin: 0; + padding-left: .8em; +} + +strong { + font-weight: 600; +} + +abbr { + border-bottom: .1em dotted hsl(40, 80%, 40%); + cursor: help; +} + +input, button { + font: inherit; + text-shadow: inherit; +} + +button { + padding: .1em .5em; + border-radius: .3em; + background: hsl(80, 80%, 80%); + background: linear-gradient(hsl(40, 70%, 80%), hsl(40, 70%, 70%)); + border: 1px solid rgba(0,0,0,.3); + box-shadow: 0 1px white inset, 0 .3em .3em -.3em rgba(0,0,0,.3); +} + +input { + width: 12em; + padding: .1em .3em; + border: 0; + border: 1px solid hsl(35, 80%, 60%); + background: hsla(0,0%,100%,.2); + border-radius: .3em; + box-shadow: .05em .1em .3em rgba(0,0,0,.3) inset; +} + +@keyframes pulsate { + to { + box-shadow: .05em .1em .3em rgba(0,0,0,.3) inset, 0 0 .3em .1em #58a; + } +} + +input:focus { + outline: none; + border: 1px solid #58a; + animation: pulsate 2s infinite alternate linear; + background: hsla(0,0%,100%,.5); +} + +header { + max-width: 37rem; + margin: 0 auto 2em; + text-align: center; + font-size: 150%; + font-style: italic; +} + + header h1 { + margin: .1em 0; + text-align: center; + color: hsl(35, 50%, 40%); + font-size: 400%; + line-height: 1; + font-style: italic; + font-weight: normal; + } + + header p { + margin: 0; + } + + header p a { + text-decoration: none; + color: inherit; + } + + .size { + position: absolute; + top: 1em; + right: 1em; + width: 4em; + padding: .8em .6em 1em; + background: hsl(40, 80%, 40%); + color: hsl(35, 80%, 94%); + text-shadow: none; + text-align: center; + line-height: 1.1; + text-indent: -.1em; + outline: .1em dotted; + outline-offset: -.3em; + text-decoration: none; + border-radius: .15em; + } + + .size:hover { + background: #58a; + } + + .size strong { + display: block; + margin-bottom: .1em; + font-size: 150%; + line-height: 1; + font-weight: 900; + font-style: normal; + } + + .size .amp { + position: absolute; + left: 0; right: 0; + bottom: 0; + color: hsla(35, 80%, 94%,.3); + font-size: 350%; + } + + nav { + margin-top: .5em; + } + + nav a { + position: relative; + display: inline-block; + padding: 0 .4em; + margin: 0 .1em; + + color: hsl(35, 80%, 94%); + text-shadow: none; + text-decoration: none; + font-size: 80%; + } + + nav a::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + z-index: -1; + border-radius: .2em; + background: hsl(40, 80%, 40%); + -webkit-transform: skew(-16deg); + transform: skew(-16deg); + } + + nav a[href="#download"] { + font-weight: 600; + } + + nav a[href="#download"]::before { + background: hsl(65, 85%, 35%); + } + + nav a:hover::before { + background: #58a; + } + + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: hsl(35, 70%, 88%); + font-size: 80%; + border-radius: .3em; +} + +footer { + padding: .6em; + border-top: 1px solid rgba(0,0,0,.3); + margin-top: 1em; + text-align: center; +} + +pre { + position: relative; +} + +pre::before { + position: absolute; + top: 0; + right: .5em; + padding: .3em .4em; + border-radius: 0 0 .3em .3em; + background: hsl(35, 50%, 60%); + color: hsl(35, 80%, 90%); + text-shadow: none; + font: bold 100%/1 Baskerville, Palatino Linotype, Palatino, serif; +} + +pre.language-markup::before { + content: "HTML"; +} + +pre.language-javascript::before { + content: "JS"; +} + +table { + table-layout: fixed; + border-spacing: 0; + border-collapse: collapse; +} + +th { + font-size: 75%; +} + +td { + vertical-align: top; + padding: .5em; + border: 1px solid rgba(0,0,0,.1); +} + +:not(pre) > code[class*="language-"] { + background: none; +} + +.github-star { + position: absolute; + top: 1em; + left: 1em; +} + +#carbonads { + position: absolute; + top: 100%; + top: calc(100vh - 15em); + right: 1em; + max-width: 10em; + max-width: -webkit-min-content; + max-width: min-content; + font-size: 75%; +} + + #carbonads a { + text-decoration: none; + color: inherit; + } + + #carbonads img { + display: block; + } + +#combobox .dropdown-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +#combobox .dropdown-btn { + vertical-align: top; + height: 36.5px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +#combobox .caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/closeSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/closeSpec.js new file mode 100644 index 0000000..ae1bea0 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/closeSpec.js @@ -0,0 +1,39 @@ +describe("awesomplete.close", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }) }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + this.subject.open(); + this.subject.next(); + }); + + it("closes completer", function () { + this.subject.close(); + expect(this.subject.ul.hasAttribute("hidden")).toBe(true); + }); + + it("makes no item selected", function () { + this.subject.close(); + expect(this.subject.index).toBe(-1); + }); + + it("fires awesomplete-close event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-close"); + this.subject.close(); + + expect(handler).toHaveBeenCalledWith( + jasmine.any(document.createEvent("HTMLEvents").constructor) + ); + }); + + it("returns early if already closed", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-close"); + this.subject.close(); + this.subject.close(); + + expect(handler.calls.count()).toBe(1); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/evaluateSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/evaluateSpec.js new file mode 100644 index 0000000..b8107bb --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/evaluateSpec.js @@ -0,0 +1,96 @@ +describe("awesomplete.evaluate", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + describe("with too short input value", function () { + beforeEach(function () { + $.type(this.subject.input, "i"); + }); + + it("closes completer", function () { + spyOn(this.subject, "close"); + this.subject.evaluate(); + + expect(this.subject.close).toHaveBeenCalledWith({ + reason: "nomatches" + }); + }); + }); + + describe("with no items found", function () { + beforeEach(function () { + $.type(this.subject.input, "nosuchitem"); + }); + + it("closes completer", function () { + spyOn(this.subject, "close"); + this.subject.evaluate(); + + expect(this.subject.close).toHaveBeenCalledWith({ + reason: "nomatches" + }); + }); + }); + + describe("with some items found", function () { + beforeEach(function () { + $.type(this.subject.input, "ite"); + }); + + it("opens completer", function () { + spyOn(this.subject, "open"); + this.subject.evaluate(); + + expect(this.subject.open).toHaveBeenCalled(); + }); + + it("fills completer with found items", function () { + this.subject.evaluate(); + expect(this.subject.ul.children.length).toBe(3); + }); + + it("shows no more than maxItems", function () { + this.subject.maxItems = 2; + this.subject.evaluate(); + expect(this.subject.ul.children.length).toBe(2); + }); + + it("makes no item selected", function () { + this.subject.evaluate(); + expect(this.subject.index).toBe(-1); + }); + }); + + describe("with minChars: 0", function () { + beforeEach(function () { + this.subject.minChars = 0; + }); + + it("opens completer", function () { + spyOn(this.subject, "open"); + this.subject.evaluate(); + + expect(this.subject.open).toHaveBeenCalled(); + }); + + it("fills completer with all items", function () { + this.subject.evaluate(); + expect(this.subject.ul.children.length).toBe(3); + }); + + it("shows no more than maxItems", function () { + this.subject.maxItems = 2; + this.subject.evaluate(); + expect(this.subject.ul.children.length).toBe(2); + }); + + it("makes no item selected", function () { + this.subject.evaluate(); + expect(this.subject.index).toBe(-1); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/gotoSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/gotoSpec.js new file mode 100644 index 0000000..8a31dde --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/gotoSpec.js @@ -0,0 +1,67 @@ +describe("awesomplete.goto", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("lastIndex", function () { return this.subject.ul.children.length - 1 }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + }); + + it("clears previous aria-selected", function () { + this.subject.goto(0); + this.subject.goto(this.lastIndex); + + expect(this.subject.ul.children[0].getAttribute("aria-selected")).toBe("false"); + }); + + it("goes to first item", function () { + this.subject.goto(0); + expect(this.subject.index).toBe(0); + }); + + it("goes to last item", function () { + this.subject.goto(this.lastIndex); + expect(this.subject.index).toBe(this.lastIndex); + }); + + it("fires awesomplete-highlight event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-highlight"); + this.subject.goto(1); + + expect(handler).toHaveBeenCalledWith( + jasmine.objectContaining({ + text: jasmine.objectContaining({ label: "item2", value: "item2" }) + }) + ); + }); + + describe("with item index > -1", function () { + beforeEach(function () { + this.subject.goto(0); + }); + + it("sets aria-selected", function () { + expect(this.subject.ul.children[0].getAttribute("aria-selected")).toBe("true"); + }); + + it("updates status", function () { + expect(this.subject.status.textContent).toBe("item1, list item 1 of 3"); + }); + }); + + describe("with item index = -1", function () { + beforeEach(function () { + this.subject.goto(0); + this.subject.goto(-1); + }); + + it("does not update status", function () { + expect(this.subject.status.textContent).toBe("item1, list item 1 of 3"); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/nextSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/nextSpec.js new file mode 100644 index 0000000..461e57c --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/nextSpec.js @@ -0,0 +1,56 @@ +describe("awesomplete.next", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("lastIndex", function () { return this.subject.ul.children.length - 1 }); + + describe("without any items found", function () { + beforeEach(function () { + $.type(this.subject.input, "nosuchitem"); + this.subject.open(); + }); + + it("does not select any item", function () { + this.subject.next(); + expect(this.subject.index).toBe(-1); + }); + }); + + describe("with some items found", function () { + beforeEach(function () { + $.type(this.subject.input, "ite"); + this.subject.open(); + }); + + describe("and no item was already selected", function () { + it("selects the first item ", function () { + this.subject.next(); + expect(this.subject.index).toBe(0); + }); + }); + + describe("and some item was already selected", function () { + it("selects the second item", function () { + this.subject.goto(0); + this.subject.next(); + expect(this.subject.index).toBe(1); + }); + + it("selects the last item", function () { + this.subject.goto(this.lastIndex - 1); + this.subject.next(); + expect(this.subject.index).toBe(this.lastIndex); + }); + + it("selects the first item after reaching the end", function () { + this.subject.goto(this.lastIndex); + this.subject.next(); + expect(this.subject.index).toBe(0); + }); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openSpec.js new file mode 100644 index 0000000..1bfc467 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openSpec.js @@ -0,0 +1,59 @@ +describe("awesomplete.open", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }) }); + + // Exposes this bug https://github.com/LeaVerou/awesomplete/pull/16740 + // FIXME better fix is probably required as discussed in PR above + xit("fills in the list on creation", function () { + $("#plain").value = "ite"; + this.subject.open(); + + expect(this.subject.ul.children.length).toBe(3); + }); + + it("opens completer", function () { + this.subject.open(); + expect(this.subject.ul.hasAttribute("hidden")).toBe(false); + }); + + describe("with autoFirst: true", function () { + beforeEach(function () { + this.subject.autoFirst = true; + spyOn(this.subject, "goto"); + }); + + it("selects first item if wasn't seleted before", function () { + this.subject.open(); + + expect(this.subject.goto).toHaveBeenCalledWith(0); + }); + + it("does not select any item if was seleted before", function () { + this.subject.index = 0; + this.subject.open(); + + expect(this.subject.goto).not.toHaveBeenCalled(); + }); + }); + + describe("with autoFirst: false", function () { + it("does not select any item", function () { + this.subject.autoFirst = false; + spyOn(this.subject, "goto"); + + this.subject.open(); + + expect(this.subject.goto).not.toHaveBeenCalled(); + }); + }); + + it("fires awesomplete-open event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-open"); + + this.subject.open(); + + expect(handler).toHaveBeenCalled(); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openedSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openedSpec.js new file mode 100644 index 0000000..370ffdc --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/openedSpec.js @@ -0,0 +1,26 @@ +describe("awesomplete.opened", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain") }); + + describe("with newly created completer", function () { + it("is false", function () { + expect(this.subject.opened).toBe(false); + }); + }); + + describe("with opened completer", function () { + it("is true", function () { + this.subject.open(); + expect(this.subject.opened).toBe(true); + }); + }); + + describe("with closed completer", function () { + it("is false", function () { + this.subject.close(); + expect(this.subject.opened).toBe(false); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/previousSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/previousSpec.js new file mode 100644 index 0000000..ac1d93b --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/previousSpec.js @@ -0,0 +1,56 @@ +describe("awesomplete.previous", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("lastIndex", function () { return this.subject.ul.children.length - 1 }); + + describe("without any items found", function () { + beforeEach(function () { + $.type(this.subject.input, "nosuchitem"); + this.subject.open(); + }); + + it("does not select any item", function () { + this.subject.previous(); + expect(this.subject.index).toBe(-1); + }); + }); + + describe("with some items found", function () { + beforeEach(function () { + $.type(this.subject.input, "ite"); + this.subject.open(); + }); + + describe("and no item was already selected", function () { + it("selects the last item ", function () { + this.subject.previous(); + expect(this.subject.index).toBe(this.lastIndex); + }); + }); + + describe("and some item was already selected", function () { + it("selects the second item from the end", function () { + this.subject.goto(this.lastIndex); + this.subject.previous(); + expect(this.subject.index).toBe(this.lastIndex - 1); + }); + + it("selects the first item", function () { + this.subject.goto(1); + this.subject.previous(); + expect(this.subject.index).toBe(0); + }); + + it("selects the last item after reaching the start", function () { + this.subject.goto(0); + this.subject.previous(); + expect(this.subject.index).toBe(this.lastIndex); + }); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/removeSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/removeSpec.js new file mode 100644 index 0000000..5885e54 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/removeSpec.js @@ -0,0 +1,55 @@ +describe("awesomplete.destroy", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }) }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + this.subject.open(); + this.subject.next(); + }); + + it("removes its elements from the DOM", function () { + var instance = this.subject; + var inputParentBefore = this.subject.input.parentNode; + + instance.destroy(); + + expect(instance.input.parentNode).not.toBe(inputParentBefore); + expect(document.body.contains(instance.container)).toBeFalsy(); + expect(document.body.contains(instance.ul)).toBeFalsy() + }); + + it("removes the autocomplete and aria-autocomplete attributes", function() { + var instance = this.subject; + + instance.destroy(); + + expect(instance.input.getAttribute("autocomplete")).toBeNull(); + expect(instance.input.getAttribute("aria-autocomplete")).toBeNull(); + }); + + it("removes event listeners from form and input", function () { + var instance = this.subject; + var events = instance._events; + + spyOn(events.input, "blur"); + + instance.destroy(); + + Awesomplete.$.fire(instance.input, "blur"); + + expect(events.input.blur).not.toHaveBeenCalledTimes(1); + }); + + it("removes itself from the global list of instances", function() { + var countBefore = Awesomplete.all.length; + + this.subject.destroy(); + + var countAfter = Awesomplete.all.length; + + expect(countAfter).toBeLessThan(countBefore); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectSpec.js new file mode 100644 index 0000000..f9fd2c9 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectSpec.js @@ -0,0 +1,132 @@ +describe("awesomplete.select", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("lastIndex", function () { return this.subject.ul.children.length - 1 }); + def("lastLi", function () { return this.subject.ul.children[this.lastIndex] }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + }); + + describe("with closed completer", itDoesNotSelectAnyItem); + + describe("with opened completer", function () { + beforeEach(function () { + this.subject.open(); + }); + + describe("and no current item", itDoesNotSelectAnyItem); + + describe("and current item", function () { + beforeEach(function () { + this.subject.goto(0); + }); + + itSelects("item1"); + }); + + describe("and item specified as argument", function () { + def("selectArgument", function () { return this.lastLi }); + + itSelects("item3"); + }); + }); + + // Shared behaviors + + function itSelects(expectedTxt) { + it("fires awesomplete-select event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-select"); + this.subject.select(this.selectArgument); + + expect(handler).toHaveBeenCalledWith( + jasmine.objectContaining({ + text: jasmine.objectContaining({ label: expectedTxt, value: expectedTxt }), + origin: this.selectArgument || this.subject.ul.children[0] + }) + ); + }); + + describe("and awesomplete-select event was not prevented", function () { + beforeEach(function () { + $.on(this.subject.input, "awesomplete-select", $.noop); + }); + + it("changes the input value", function () { + this.subject.select(this.selectArgument); + expect(this.subject.input.value).toBe(expectedTxt); + }); + + it("closes completer", function () { + spyOn(this.subject, "close"); + this.subject.select(this.selectArgument); + + expect(this.subject.close).toHaveBeenCalledWith({ + reason: "select" + }); + }); + + it("fires awesomplete-selectcomplete event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-selectcomplete"); + this.subject.select(this.selectArgument); + + expect(handler).toHaveBeenCalledWith( + jasmine.objectContaining({ + text: jasmine.objectContaining({ label: expectedTxt, value: expectedTxt }) + }) + ); + }); + }); + + describe("and awesomplete-select event was prevented", function () { + beforeEach(function () { + $.on(this.subject.input, "awesomplete-select", function (evt) { evt.preventDefault() }); + }); + + it("does not change the input value", function () { + this.subject.select(this.selectArgument); + expect(this.subject.input.value).toBe("ite"); + }); + + it("does not close completer", function () { + spyOn(this.subject, "close"); + this.subject.select(this.selectArgument); + + expect(this.subject.close).not.toHaveBeenCalled(); + }); + + it("does not fire awesomplete-selectcomplete event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-selectcomplete"); + this.subject.select(this.selectArgument); + + expect(handler).not.toHaveBeenCalled(); + }); + }); + } + + function itDoesNotSelectAnyItem() { + it("does not change the input value", function () { + this.subject.select(); + expect(this.subject.input.value).toBe("ite"); + }); + + it("does not fire awesomplete-select event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-select"); + this.subject.select(); + + expect(handler).not.toHaveBeenCalled(); + }); + + it("does not fire awesomplete-selectcomplete event", function () { + var handler = $.spyOnEvent(this.subject.input, "awesomplete-selectcomplete"); + this.subject.select(); + + expect(handler).not.toHaveBeenCalled(); + }); + } +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectedSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectedSpec.js new file mode 100644 index 0000000..6e645be --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/api/selectedSpec.js @@ -0,0 +1,41 @@ +describe("awesomplete.selected", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + describe("with newly created completer", function () { + it("is false", function () { + expect(this.subject.selected).toBe(false); + }); + }); + + describe("with opened completer", function () { + beforeEach(function () { + this.subject.open(); + $.type(this.subject.input, "ite"); + }); + + describe("and no item selected", function () { + it("is false", function () { + expect(this.subject.selected).toBe(false); + }); + }); + + describe("and some item selected", function () { + it("is true", function () { + this.subject.next(); + expect(this.subject.selected).toBe(true); + }); + }); + }); + + describe("with closed completer", function () { + it("is false", function () { + this.subject.close(); + expect(this.subject.selected).toBe(false); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/blurSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/blurSpec.js new file mode 100644 index 0000000..77d6f38 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/blurSpec.js @@ -0,0 +1,15 @@ +describe("blur event", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain") }); + + it("closes completer", function () { + spyOn(Awesomplete.prototype, "close"); + $.fire(this.subject.input, "blur"); + expect(Awesomplete.prototype.close).toHaveBeenCalledWith( + { reason: "blur" }, + jasmine.any(document.createEvent("HTMLEvents").constructor) + ); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/clickSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/clickSpec.js new file mode 100644 index 0000000..e1b08b3 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/clickSpec.js @@ -0,0 +1,61 @@ +describe("click event", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("li", function () { return this.subject.ul.children[1] }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + spyOn(this.subject, "select"); + }); + + describe("with ul target", function () { + def("target", function () { return this.subject.ul }); + + it("does not select item", function () { + $.fire(this.target, "click", { button: 0 }); + expect(this.subject.select).not.toHaveBeenCalled(); + }); + }); + + describe("with li target", function () { + def("target", function () { return this.li }); + + describe("on left click", function () { + it("selects item", function () { + var event = $.fire(this.target, "click", { button: 0 }); + expect(this.subject.select).toHaveBeenCalledWith(this.li, this.target, event); + }); + }); + + describe("on right click", function () { + it("does not select item", function () { + $.fire(this.target, "click", { button: 2 }); + expect(this.subject.select).not.toHaveBeenCalled(); + }); + }); + }); + + describe("with child of li target", function () { + def("target", function () { return $("mark", this.li) }); + + describe("on left click", function () { + it("selects item", function () { + var event = $.fire(this.target, "click", { button: 0 }); + expect(this.subject.select).toHaveBeenCalledWith(this.li, this.target, event); + expect(event.defaultPrevented).toBe(true); + }); + }); + + describe("on right click", function () { + it("does not select item", function () { + $.fire(this.target, "click", { button: 2 }); + expect(this.subject.select).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/inputSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/inputSpec.js new file mode 100644 index 0000000..b32091e --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/inputSpec.js @@ -0,0 +1,12 @@ +describe("input event", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain") }); + + it("rebuilds the list", function () { + spyOn(Awesomplete.prototype, "evaluate"); + $.type(this.subject.input, "ite"); + expect(Awesomplete.prototype.evaluate).toHaveBeenCalled(); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/keydownSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/keydownSpec.js new file mode 100644 index 0000000..9e13068 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/keydownSpec.js @@ -0,0 +1,96 @@ +describe("keydown event", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + }); + + it("supports enter", function () { + this.subject.next(); + + spyOn(this.subject, "select"); + $.keydown(this.subject.input, $.k.ENTER); + + expect(this.subject.select).toHaveBeenCalled(); + }); + + it("supports escape", function () { + spyOn(this.subject, "close"); + $.keydown(this.subject.input, $.k.ESC); + + expect(this.subject.close).toHaveBeenCalledWith({ + reason: "esc" + }); + }); + + it("supports down arrow", function () { + spyOn(this.subject, "next"); + $.keydown(this.subject.input, $.k.DOWN); + + expect(this.subject.next).toHaveBeenCalled(); + }); + + it("supports up arrow", function () { + spyOn(this.subject, "previous"); + $.keydown(this.subject.input, $.k.UP); + + expect(this.subject.previous).toHaveBeenCalled(); + }); + + it("ignores other keys", function() { + spyOn(this.subject, "select"); + spyOn(this.subject, "close"); + spyOn(this.subject, "next"); + spyOn(this.subject, "previous"); + + $.keydown(this.subject.input, 111); + + expect(this.subject.select).not.toHaveBeenCalled(); + expect(this.subject.close).not.toHaveBeenCalled(); + expect(this.subject.next).not.toHaveBeenCalled(); + expect(this.subject.previous).not.toHaveBeenCalled(); + }); + + it("does nothing if not opened", function () { + this.subject.close(); + + spyOn(this.subject, "next"); + $.keydown(this.subject.input, $.k.DOWN); + + expect(this.subject.next).not.toHaveBeenCalled(); + }); + it("does not select on tab", function () { + this.subject.next(); + + spyOn(this.subject, "select"); + $.keydown(this.subject.input, $.k.TAB); + + expect(this.subject.select).not.toHaveBeenCalled(); + }); +}); + +describe("tabSelect option true ", function () { + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"], tabSelect: true }); + }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + }); + + it("selects on tab", function () { + this.subject.next(); + + spyOn(this.subject, "select"); + $.keydown(this.subject.input, $.k.TAB); + + expect(this.subject.select).toHaveBeenCalled(); + }); +}) diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/mousedownSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/mousedownSpec.js new file mode 100644 index 0000000..88f9783 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/mousedownSpec.js @@ -0,0 +1,69 @@ +describe("mousedown event", function () { + + $.fixture("plain"); + + subject(function () { + return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] }); + }); + + def("li", function () { return this.subject.ul.children[1] }); + + beforeEach(function () { + $.type(this.subject.input, "ite"); + spyOn(this.subject, "select"); + }); + + describe("with ul target", function () { + def("target", function () { return this.subject.ul }); + + it("does not select item and keeps the input focussed", function () { + $.fire(this.target, "mousedown", { button: 0 }); + expect(this.subject.select).not.toHaveBeenCalled(); + expect(this.subject.input).toBe(document.activeElement); + }); + }); + + describe("with li target", function () { + def("target", function () { return this.li }); + + describe("on left click", function () { + it("does not select item and keeps the input focussed", function () { + var event = $.fire(this.target, "mousedown", { button: 0 }); + expect(this.subject.select).not.toHaveBeenCalled(); + expect(event.defaultPrevented).toBe(true); + expect(this.subject.input).toBe(document.activeElement); + }); + }); + + describe("on right click", function () { + it("does not select item and keeps the input focussed", function () { + var event = $.fire(this.target, "mousedown", { button: 2 }); + expect(this.subject.select).not.toHaveBeenCalled(); + expect(event.defaultPrevented).toBe(true); + expect(this.subject.input).toBe(document.activeElement); + }); + }); + }); + + describe("with child of li target", function () { + def("target", function () { return $("mark", this.li) }); + + describe("on left click", function () { + it("does not select item and keeps the input focussed", function () { + var event = $.fire(this.target, "mousedown", { button: 0 }); + expect(this.subject.select).not.toHaveBeenCalled(); + expect(event.defaultPrevented).toBe(true); + expect(this.subject.input).toBe(document.activeElement); + }); + }); + + describe("on right click", function () { + it("does not select item and keeps the input focussed", function () { + var event = $.fire(this.target, "mousedown", { button: 2 }); + expect(this.subject.select).not.toHaveBeenCalled(); + expect(event.defaultPrevented).toBe(true); + expect(this.subject.input).toBe(document.activeElement); + }); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/submitSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/submitSpec.js new file mode 100644 index 0000000..2e55744 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/events/submitSpec.js @@ -0,0 +1,17 @@ +describe("form submit event", function () { + + $.fixture("options"); + + subject(function () { return new Awesomplete("#inside-form") }); + + it("closes completer", function () { + spyOn(Awesomplete.prototype, "close"); + // prevent full page reload in Firefox, which causes tests to stop running + $.on(this.subject.input.form, "submit", function (evt) { evt.preventDefault() }); + $.fire(this.subject.input.form, "submit"); + expect(Awesomplete.prototype.close).toHaveBeenCalledWith( + { reason: "submit" }, + jasmine.any(document.createEvent("HTMLEvents").constructor) + ); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/options.html b/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/options.html new file mode 100644 index 0000000..996992b --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/options.html @@ -0,0 +1,22 @@ + + + + + + + +
    +
  • With
    • +
  • Data
    • +
  • List
    • +
+ + + + + + + +
+ +
diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/plain.html b/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/plain.html new file mode 100644 index 0000000..9869bcc --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/fixtures/plain.html @@ -0,0 +1 @@ + diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/bindSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/bindSpec.js new file mode 100644 index 0000000..c1e7ac1 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/bindSpec.js @@ -0,0 +1,59 @@ +describe("Awesomplete.$.bind", function () { + + $.fixture("plain"); + + subject(function () { + return function () { Awesomplete.$.bind(this.element, this.events) }; + }); + + describe("with invalid element", function () { + it("does nothing if element is undefined", function () { + this.element = undefined; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is null", function () { + this.element = null; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is false", function () { + this.element = false; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is 0", function () { + this.element = 0; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is empty string", function () { + this.element = ""; + expect(this.subject).not.toThrow(); + }); + }); + + describe("with valid element", function () { + def("element", function () { return $("#plain") }); + + beforeEach(function () { + spyOn(this.element, "addEventListener"); + }); + + it("adds event listeners for all events", function () { + this.events = { click: $.noop, input: $.noop }; + this.subject(); + + expect(this.element.addEventListener).toHaveBeenCalledWith("click", this.events.click); + expect(this.element.addEventListener).toHaveBeenCalledWith("input", this.events.input); + }); + + it("adds single event listener for multiple events", function () { + this.events = { "click input": $.noop }; + this.subject(); + + expect(this.element.addEventListener).toHaveBeenCalledWith("click", this.events["click input"]); + expect(this.element.addEventListener).toHaveBeenCalledWith("input", this.events["click input"]); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/createSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/createSpec.js new file mode 100644 index 0000000..a9ef31e --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/createSpec.js @@ -0,0 +1,102 @@ +describe("Awesomplete.$.create", function () { + + $.fixture("options"); + + subject(function () { return Awesomplete.$.create(this.tag, this.options || {}) }); + + def("tag", "div"); + + it("creates DOM element", function () { + expect(this.subject instanceof HTMLElement).toBe(true); + }); + + describe("with various tag names", function () { + it("creates
    element", function () { + this.tag = "ul"; + expect(this.subject.tagName).toEqual("UL"); + }); + + it("creates
  • element", function () { + this.tag = "li"; + expect(this.subject.tagName).toEqual("LI"); + }); + }); + + describe("without options", function () { + it("creates element without any attributes", function () { + expect(this.subject.attributes.length).toEqual(0); + }); + }); + + describe("with simple options", function () { + it("assigns properties", function () { + this.options = { id: "id1", className: "class-name" }; + + expect(this.subject.id).toEqual("id1"); + expect(this.subject.className).toEqual("class-name"); + }); + + it("assigns attributes", function () { + this.options = { attr1: "val1", attr2: "val2" }; + + expect(this.subject.getAttribute("attr1")).toEqual("val1"); + expect(this.subject.getAttribute("attr2")).toEqual("val2"); + }); + }); + + describe("with option for boolean attribute/property", function () { + it("assigns from true value", function () { + this.options = { hidden: true }; + expect(this.subject.hasAttribute("hidden")).toBe(true); + }); + + it("assigns from truthy value", function () { + this.options = { hidden: "hidden" }; + expect(this.subject.hasAttribute("hidden")).toBe(true); + }); + + it("assigns from false value", function () { + this.options = { hidden: false }; + expect(this.subject.hasAttribute("hidden")).toBe(false); + }); + + it("assigns from falsy value", function () { + this.options = { hidden: "" }; + expect(this.subject.hasAttribute("hidden")).toBe(false); + }); + }); + + describe("with inside: option", function () { + it("appends to container by element", function () { + this.options = { inside: $("#data-list") }; + + expect(this.subject).toEqual(this.options.inside.lastChild); + }); + + it("appends to container by selector", function () { + this.options = { inside: "#data-list" }; + + expect(this.subject).toEqual($(this.options.inside).lastChild); + }); + }); + + describe("with around: option", function () { + it("wraps specified element", function () { + this.options = { around: $("#no-options") }; + + var originalParent = this.options.around.parentNode; + expect(this.subject.parentNode).toEqual(originalParent); + + expect(this.subject.firstChild).toEqual(this.options.around); + }); + + it("wraps element specified by selector", function () { + this.options = { around: "#no-options" }; + + var originalParent = $(this.options.around).parentNode; + expect(this.subject.parentNode).toEqual(originalParent); + + expect(this.subject.firstChild).toEqual($(this.options.around)); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/dollarSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/dollarSpec.js new file mode 100644 index 0000000..3ba864e --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/dollarSpec.js @@ -0,0 +1,62 @@ +describe("Awesomplete.$", function () { + + $.fixture("options"); + + subject(function () { return Awesomplete.$(this.expression, this.context) }); + + describe("with default context", itFindsElement); + + describe("with custom context", function () { + def("context", function () { return fixture.el }); + + itFindsElement(); + }); + + describe("with truthy non string expression", function () { + it("returns the expression back", function () { + this.expression = $("#no-options"); + expect(this.subject).toBe(this.expression); + }); + }); + + describe("with falsy non string expression", function () { + it("returns null if expression is undefined", function () { + this.expression = undefined; + expect(this.subject).toBeNull(); + }); + + it("returns null if expression is null", function () { + this.expression = null; + expect(this.subject).toBeNull(); + }); + + it("returns null if expression is false", function () { + this.expression = false; + expect(this.subject).toBeNull(); + }); + }); + + // Shared behaviors + + function itFindsElement() { + it("returns DOM element", function () { + this.expression = "#no-options"; + expect(this.subject instanceof HTMLElement).toBe(true); + }); + + it("finds by id", function () { + this.expression = "#no-options"; + expect(this.subject.id).toEqual("no-options"); + }); + + it("finds by class name", function () { + this.expression = ".simple-input"; + expect(this.subject.id).toEqual("no-options"); + }); + + it("finds by tag name", function () { + this.expression = "datalist"; + expect(this.subject.id).toEqual("list"); + }); + } +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/doubleDollarSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/doubleDollarSpec.js new file mode 100644 index 0000000..c76a10d --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/doubleDollarSpec.js @@ -0,0 +1,49 @@ +describe("Awesomplete.$$", function () { + + $.fixture("options"); + + subject(function () { return Awesomplete.$$(this.expression, this.context) }); + + describe("with default context", itFindsAllElements); + + describe("with custom context", function () { + def("context", function () { return fixture.el }); + + itFindsAllElements(); + }); + + // Shared behaviors + + function itFindsAllElements() { + it("returns an array of DOM elements", function () { + this.expression = "#no-options"; + expect(this.subject).toEqual(jasmine.any(Array)); + expect(this.subject[0] instanceof HTMLElement).toBe(true); + }); + + it("finds all elements", function () { + this.expression = "input"; + expect(this.subject.length).toEqual($$("input").length); + }); + + it("finds DOM element", function () { + this.expression = "#no-options"; + expect(this.subject[0] instanceof HTMLElement).toBe(true); + }); + + it("finds by id", function () { + this.expression = "#no-options"; + expect(this.subject[0].id).toEqual("no-options"); + }); + + it("finds by class name", function () { + this.expression = ".simple-input"; + expect(this.subject[0].id).toEqual("no-options"); + }); + + it("finds by tag name", function () { + this.expression = "datalist"; + expect(this.subject[0].id).toEqual("list"); + }); + } +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/fireSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/fireSpec.js new file mode 100644 index 0000000..5d5dcbb --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/fireSpec.js @@ -0,0 +1,60 @@ +describe("Awesomplete.$.fire", function () { + + $.fixture("plain"); + + subject(function () { + return Awesomplete.$.fire.bind(Awesomplete.$, this.element); + }); + + def("element", function () { return $("#plain") }); + + beforeEach(function () { + spyOn(this.element, "dispatchEvent"); + }); + + it("fires event once", function () { + this.subject("click"); + expect(this.element.dispatchEvent.calls.count()).toEqual(1); + }); + + describe("fires different event types", function () { + it("fires click event", function () { + this.subject("click"); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ type: "click" })); + }); + + it("fires input event", function () { + this.subject("input"); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ type: "input" })); + }); + }); + + describe("sets event properties", function () { + it("makes cancelable event", function () { + this.subject("click"); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ cancelable: true })); + }); + + it("can't make non cancelable event", function () { + this.subject("click", { cancelable: false }); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ cancelable: true })); + }); + + it("makes event that bubbles", function () { + this.subject("click"); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ bubbles: true })); + }); + + it("can't make event that does not bubble", function () { + this.subject("click", { bubbles: false }); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({ bubbles: true })); + }); + + it("sets properties on the event", function () { + var properties = { text: "hello", preventDefault: $.noop }; + + this.subject("click", properties); + expect(this.element.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining(properties)); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/regExpEscapeSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/regExpEscapeSpec.js new file mode 100644 index 0000000..c50167b --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/regExpEscapeSpec.js @@ -0,0 +1,38 @@ +describe("Awesomplete.$.regExpEscape", function () { + + subject(function () { return Awesomplete.$.regExpEscape(this.str) }); + + describe("with regular expression special characters", function () { + it("escapes backslashes", function () { + this.str = "\\"; + expect(this.subject).toBe("\\\\"); + }); + + it("escapes brackets, braces and parentheses", function () { + this.str = "[]{}()"; + expect(this.subject).toBe("\\[\\]\\{\\}\\(\\)"); + }); + + it("escapes other special characters", function () { + this.str = "-^$*+?.|"; + expect(this.subject).toBe("\\-\\^\\$\\*\\+\\?\\.\\|"); + }); + + it("escapes the whole string", function () { + this.str = "**"; + expect(this.subject).toBe("\\*\\*"); + }); + }); + + describe("with plain characters", function () { + it("does not escape letters", function () { + this.str = "abcdefjhijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ"; + expect(this.subject).toBe(this.str); + }); + + it("does not escape numbers", function () { + this.str = "0123456789"; + expect(this.subject).toBe(this.str); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/unbindSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/unbindSpec.js new file mode 100644 index 0000000..0ea5a50 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/helpers/unbindSpec.js @@ -0,0 +1,59 @@ +describe("Awesomplete.$.unbind", function () { + + $.fixture("plain"); + + subject(function () { + return function () { Awesomplete.$.unbind(this.element, this.events) }; + }); + + describe("with invalid element", function () { + it("does nothing if element is undefined", function () { + this.element = undefined; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is null", function () { + this.element = null; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is false", function () { + this.element = false; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is 0", function () { + this.element = 0; + expect(this.subject).not.toThrow(); + }); + + it("does nothing if element is empty string", function () { + this.element = ""; + expect(this.subject).not.toThrow(); + }); + }); + + describe("with valid element", function () { + def("element", function () { return $("#plain") }); + + beforeEach(function () { + spyOn(this.element, "removeEventListener"); + }); + + it("removes event listeners for all events", function () { + this.events = { click: $.noop, input: $.noop }; + this.subject(); + + expect(this.element.removeEventListener).toHaveBeenCalledWith("click", this.events.click); + expect(this.element.removeEventListener).toHaveBeenCalledWith("input", this.events.input); + }); + + it("removes single event listener for multiple events", function () { + this.events = { "click input": $.noop }; + this.subject(); + + expect(this.element.removeEventListener).toHaveBeenCalledWith("click", this.events["click input"]); + expect(this.element.removeEventListener).toHaveBeenCalledWith("input", this.events["click input"]); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/htmlSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/htmlSpec.js new file mode 100644 index 0000000..994bf21 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/htmlSpec.js @@ -0,0 +1,60 @@ +describe("Html modifications", function () { + + $.fixture("plain"); + + subject(function () { return new Awesomplete("#plain") }); + + it("binds to correct input", function () { + expect(this.subject.input instanceof HTMLElement).toBe(true); + expect(this.subject.input.id).toBe("plain"); + }); + + it("turns native autocompleter off", function () { + expect(this.subject.input.getAttribute("autocomplete")).toBe("off"); + }); + + describe("HTML tweaks", function () { + it("creates container", function () { + expect(this.subject.container instanceof HTMLElement).toBe(true); + expect(this.subject.container.className).toBe("awesomplete"); + }); + + it("places input inside container", function () { + expect(this.subject.input.parentNode).toBe(this.subject.container); + }); + + it("creates list", function () { + expect(this.subject.ul instanceof HTMLElement).toBe(true); + expect(this.subject.ul.tagName).toBe("UL"); + }); + + it("puts list inside container", function () { + expect(this.subject.ul.parentNode).toBe(this.subject.container); + }); + + it("hides list", function () { + expect(this.subject.ul.hasAttribute("hidden")).toBe(true); + }); + }); + + describe("ARIA support", function () { + it("makes input accessible", function () { + expect(this.subject.input.getAttribute("role")).toBe("combobox"); + expect(this.subject.input.getAttribute("aria-owns")).toMatch(/awesomplete_list_[0-9]+/); + }); + + it("creates status", function () { + expect(this.subject.status instanceof HTMLElement).toBe(true); + expect(this.subject.status.getAttribute("role")).toBe("status"); + expect(this.subject.status.getAttribute("aria-live")).toBe("assertive"); + }); + + it("puts status inside container", function () { + expect(this.subject.status.parentNode).toBe(this.subject.container); + }); + + it("hides status", function () { + expect(this.subject.status.className).toBe("visually-hidden"); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/listSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/listSpec.js new file mode 100644 index 0000000..eff78d6 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/listSpec.js @@ -0,0 +1,121 @@ +describe("Awesomplete list", function () { + + $.fixture("options"); + + subject(function () { return new Awesomplete(this.element, this.options) }); + + def("element", "#no-options"); + + it("is empty if not provided", function () { + expect(this.subject._list).toEqual([]); + }); + + describe("setter", function () { + it("assigns from array", function () { + this.subject.list = [ "From", "Array" ]; + expect(this.subject._list).toEqual([ "From", "Array" ]); + }); + + it("assigns from comma separated list", function () { + this.subject.list = "From, Inline, List"; + expect(this.subject._list).toEqual([ "From", "Inline", "List" ]); + }); + + it("assigns from element specified by selector", function () { + this.subject.list = "#data-list"; + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "Data", value: "Data" }, + { label: "List", value: "List" } + ]); + }); + + it("assigns from element", function () { + this.subject.list = $("#data-list"); + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "Data", value: "Data" }, + { label: "List", value: "List" } + ]); + }); + + it("does not assigns from not found list", function () { + this.subject.list = "#nosuchlist"; + expect(this.subject._list).toEqual([]); + }); + + it("does not assigns from empty list", function () { + this.subject.list = "#empty-list"; + expect(this.subject._list).toEqual([]); + }); + + describe("with active input", function() { + beforeEach(function() { + this.subject.input.focus(); + }); + + it("evaluates completer", function() { + spyOn(this.subject, "evaluate"); + this.subject.list = "#data-list"; + + expect(this.subject.evaluate).toHaveBeenCalled(); + }); + }); + }); + + describe("constructor option", function () { + it("assigns from array", function () { + this.options = { list: [ "From", "Array" ] }; + expect(this.subject._list).toEqual([ "From", "Array" ]); + }); + + it("assigns from comma separated list", function () { + this.options = { list: "From, Inline, List" }; + expect(this.subject._list).toEqual([ "From", "Inline", "List" ]); + }); + + it("assigns from element specified by selector", function () { + this.options = { list: "#data-list" }; + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "Data", value: "Data" }, + { label: "List", value: "List" } + ]); + }); + + it("assigns from list specified by element", function () { + this.options = { list: $("#data-list") }; + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "Data", value: "Data" }, + { label: "List", value: "List" } + ]); + }); + }); + + describe("data-list html attribute", function () { + it("assigns from comma separated list", function () { + this.element = "#with-data-list-inline"; + expect(this.subject._list).toEqual(["With", "Data", "List", "Inline"]); + }); + + it("assigns from element referenced by selector", function () { + this.element = "#with-data-list"; + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "Data", value: "Data" }, + { label: "List", value: "List" } + ]); + }); + }); + + describe("list html attribute", function () { + it("assigns from element referenced by id", function () { + this.element = "#with-list"; + expect(this.subject._list).toEqual([ + { label: "With", value: "With" }, + { label: "List", value: "List" } + ]); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/optionsSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/optionsSpec.js new file mode 100644 index 0000000..fc60997 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/init/optionsSpec.js @@ -0,0 +1,80 @@ +describe("Constructor options", function () { + + $.fixture("options"); + + subject(function () { return new Awesomplete(this.element, this.options) }); + + describe("with default options", function () { + def("element", "#with-data-list"); + + it("requires minimum 2 chars to open completer", function () { + expect(this.subject.minChars).toBe(2); + }); + + it("shows 10 items in completer", function () { + expect(this.subject.maxItems).toBe(10); + }); + + it("does not select the first ocurrence automatically" , function () { + expect(this.subject.autoFirst).toBe(false); + }); + + it("modifies list item with DATA", function () { + expect(this.subject.data).toBe(Awesomplete.DATA); + }); + + it("filters with FILTER_CONTAINS", function () { + expect(this.subject.filter).toBe(Awesomplete.FILTER_CONTAINS); + }); + + it("orders with SORT_BYLENGTH", function () { + expect(this.subject.sort).toBe(Awesomplete.SORT_BYLENGTH); + }); + + it("creates item with ITEM", function () { + expect(this.subject.item).toEqual(Awesomplete.ITEM); + }); + + it("replaces input value with REPLACE", function () { + expect(this.subject.replace).toEqual(Awesomplete.REPLACE); + }); + }); + + describe("with custom options in constructor", function () { + def("element", "#with-data-list"); + def("options", function () { + return { + minChars: 3, + maxItems: 9, + autoFirst: true, + filter: $.noop, + sort: $.noop, + item: $.noop, + replace: $.noop + }; + }); + + it("overrides simple default options", function () { + expect(this.subject.minChars).toBe(3); + expect(this.subject.maxItems).toBe(9); + expect(this.subject.autoFirst).toBe(true); + }); + + it("overrides default functions", function () { + expect(this.subject.filter).toBe(this.options.filter); + expect(this.subject.sort).toBe(this.options.sort); + expect(this.subject.item).toBe(this.options.item); + expect(this.subject.replace).toBe(this.options.replace); + }); + }); + + describe("with custom options in data-* attributes", function () { + def("element", "#with-custom-options"); + + it("overrides simple default options", function () { + expect(this.subject.minChars).toBe(4); + expect(this.subject.maxItems).toBe(8); + expect(this.subject.autoFirst).toBe(true); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/specHelper.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/specHelper.js new file mode 100644 index 0000000..c614e87 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/specHelper.js @@ -0,0 +1,70 @@ +fixture.setBase("test/fixtures"); + +// finds DOM elements in tests +function $ (str, context) { + return (context || fixture.el).querySelector(str); +} + +function $$ (str, context) { + return (context || fixture.el).querySelectorAll(str); +} + +// bundled fixture load/cleanup +$.fixture = function (fixtureName) { + beforeEach(function () { + // Awesomplete probably needs to cleanup this by itself + try { Awesomplete.all = []; } catch(e) {}; + fixture.load(fixtureName + ".html"); + }); + + afterEach(function () { + fixture.cleanup(); + }); +}; + +// spy to check if event was fired or not +$.spyOnEvent = function (target, type) { + var handler = jasmine.createSpy(type); + $.on(target, type, handler); + return handler; +}; + +$.on = function (target, type, callback) { + target.addEventListener(type, callback); +}; + +$.fire = function (target, type, properties) { + var evt = document.createEvent("HTMLEvents"); + evt.initEvent(type, true, true ); + for (var j in properties) { + evt[j] = properties[j]; + } + target.dispatchEvent(evt); + return evt; +}; + +// simulates text input (very simple, only "input" event is fired) +$.type = function (input, text) { + input.focus(); + input.value = text; + return $.fire(input, "input"); +}; + +// simulates keydown events +$.keydown = function (target, keyCode) { + return $.fire(target, "keydown", { keyCode: keyCode }); +}; +$.k = { + TAB: 9, + ENTER: 13, + ESC: 27, + DOWN: 40, + UP: 38 +}; + +// $.noop returns a new empty function each time it's being called +Object.defineProperty($, "noop", { + get: function () { + return function noop () {} + } +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/allSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/allSpec.js new file mode 100644 index 0000000..59e23eb --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/allSpec.js @@ -0,0 +1,21 @@ +describe("Awesomplete.all", function () { + + $.fixture("options"); + + subject(function () { return Awesomplete.all }); + + it("is empty initially", function () { + expect(this.subject.length).toBe(0); + }); + + it("keeps a list of created instances", function () { + var first = new Awesomplete("#with-data-list-inline"); + expect(this.subject.length).toBe(1); + expect(this.subject).toContain(first); + + var second = new Awesomplete("#with-data-list"); + expect(this.subject.length).toBe(2); + expect(this.subject).toContain(first); + expect(this.subject).toContain(second); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/dataSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/dataSpec.js new file mode 100644 index 0000000..311c6eb --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/dataSpec.js @@ -0,0 +1,19 @@ +describe("Awesomplete.DATA", function () { + + subject(function () { return Awesomplete.DATA(this.item) }); + + it("returns original String", function () { + this.item = "JavaScript"; + expect(this.subject).toEqual("JavaScript"); + }); + + it("returns original Object", function () { + this.item = { label: "JavaScript", value: "JS" }; + expect(this.subject).toEqual({ label: "JavaScript", value: "JS" }); + }); + + it("returns original Array", function () { + this.item = [ "JavaScript", "JS" ]; + expect(this.subject).toEqual([ "JavaScript", "JS" ]); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterContainsSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterContainsSpec.js new file mode 100644 index 0000000..1cfbbfd --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterContainsSpec.js @@ -0,0 +1,56 @@ +describe("Awesomplete.FILTER_CONTAINS", function () { + + subject(function () { return Awesomplete.FILTER_CONTAINS }); + + describe("search in a plain string", function () { + it("matches at the start", function () { + expect(this.subject("Hello world", "Hello")).toBe(true); + }); + + it("matches in the middle", function () { + expect(this.subject("Ticket to the moon", "to the")).toBe(true); + }); + + it("matches at the end", function () { + expect(this.subject("This is the end", "end")).toBe(true); + }); + + it("performs case insensitive match", function () { + expect(this.subject("Hey You", "HEY YOU")).toBe(true); + }); + + it("ignores whitespaces around the search value", function () { + expect(this.subject("Watch this", " Watch ")).toBe(true); + }); + + it("does not match if substring is not found", function () { + expect(this.subject("No", "way")).toBe(false); + }); + }); + + describe("search in string with special RegExp chars", function () { + it("matches at the start", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "[^j(a)v?a-")).toBe(true); + }); + + it("matches in the middle", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "sc|ri\\p+t*")).toBe(true); + }); + + it("matches at the end", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "{.$}")).toBe(true); + }); + + it("performs case insensitive match", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "[^J(A)V?A-SC|RI\\P+T*]{.$}")).toBe(true); + }); + + it("ignores whitespaces around the search value", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", " [^j(a)v?a- ")).toBe(true); + }); + + it("does not match if substring is not found", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "no way")).toBe(false); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterStartsWithSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterStartsWithSpec.js new file mode 100644 index 0000000..ce30aab --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/filterStartsWithSpec.js @@ -0,0 +1,56 @@ +describe("Awesomplete.FILTER_STARTSWITH", function () { + + subject(function () { return Awesomplete.FILTER_STARTSWITH }); + + describe("search in plain string", function () { + it("matches at the start", function () { + expect(this.subject("Hello world", "Hello")).toBe(true); + }); + + it("does not match in the middle", function () { + expect(this.subject("Ticket to the moon", "to the")).toBe(false); + }); + + it("does not match at the end", function () { + expect(this.subject("This is the end", "end")).toBe(false); + }); + + it("performs case insensitive match", function () { + expect(this.subject("Hey You", "HEY YOU")).toBe(true); + }); + + it("ignores whitespaces around the search value", function () { + expect(this.subject("Watch this", " Watch ")).toBe(true); + }); + + it("does not match if substring is not found", function () { + expect(this.subject("No", "way")).toBe(false); + }); + }); + + describe("search in string with special RegExp chars", function () { + it("matches at the start", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "[^j(a)v?a-")).toBe(true); + }); + + it("does not match in the middle", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "sc|ri\\p+t*")).toBe(false); + }); + + it("does not match at the end", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "{.$}")).toBe(false); + }); + + it("performs case insensitive match", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "[^J(A)V?A-SC|RI\\P+T*]{.$}")).toBe(true); + }); + + it("ignores whitespaces around the search value", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", " [^j(a)v?a- ")).toBe(true); + }); + + it("does not match if substring is not found", function () { + expect(this.subject("[^j(a)v?a-sc|ri\\p+t*]{.$}", "no way")).toBe(false); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/itemSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/itemSpec.js new file mode 100644 index 0000000..ee89193 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/itemSpec.js @@ -0,0 +1,58 @@ +describe("Awesomplete.ITEM", function () { + + subject(function () { return Awesomplete.ITEM }); + + def("element", function () { return this.subject("JavaScript", this.input || "") }); + + it("creates DOM element", function () { + expect(this.element instanceof HTMLElement).toBe(true); + }); + + it("creates LI element", function () { + expect(this.element.tagName).toBe("LI"); + }); + + it("sets aria-selected to false", function () { + expect(this.element.getAttribute("aria-selected")).toBe("false"); + }); + + describe("with matched input", function () { + def("input", "jav"); + + it("marks the match", function () { + expect(this.element.innerHTML).toBe("JavaScript"); + }); + }); + + describe("with multiple matches", function () { + def("input", "a"); + + it("marks all matches", function () { + expect(this.element.innerHTML).toBe("JavaScript"); + }); + }); + + describe("with no match", function () { + def("input", "foo"); + + it("does not mark anything", function () { + expect(this.element.innerHTML).toBe("JavaScript"); + }); + }); + + describe("with empty input", function () { + def("input", ""); + + it("does not mark anything", function () { + expect(this.element.innerHTML).toBe("JavaScript"); + }); + }); + + describe("with space input", function () { + def("input", " "); + + it("does not mark anything", function () { + expect(this.element.innerHTML).toBe("JavaScript"); + }); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/replaceSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/replaceSpec.js new file mode 100644 index 0000000..e2eddba --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/replaceSpec.js @@ -0,0 +1,11 @@ +describe("Awesomplete.REPLACE", function () { + + subject(function () { return Awesomplete.REPLACE }); + + def("instance", function() { return { input: { value: "initial" } } }); + + it("replaces input value", function () { + this.subject.call(this.instance, { value: "JavaScript" }); + expect(this.instance.input.value).toBe("JavaScript"); + }); +}); diff --git a/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/sortByLengthSpec.js b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/sortByLengthSpec.js new file mode 100644 index 0000000..982ae40 --- /dev/null +++ b/src/EventHub.Web/wwwroot/libs/awesomplete/test/static/sortByLengthSpec.js @@ -0,0 +1,47 @@ +describe("Awesomplete.SORT_BYLENGTH", function () { + + subject(function () { return Awesomplete.SORT_BYLENGTH }); + + describe("with strings of different length", function () { + it("returns negative number if the first string is shorter", function () { + expect(this.subject("a", "aa")).toBe(-1); + expect(this.subject("a", "bb")).toBe(-1); + expect(this.subject("b", "aa")).toBe(-1); + + expect(this.subject("a", "aaa")).toBe(-2); + expect(this.subject("a", "bbb")).toBe(-2); + expect(this.subject("b", "aaa")).toBe(-2); + }); + + it("returns positive number if the first string is longer", function () { + expect(this.subject("aa", "a")).toBe(1); + expect(this.subject("bb", "a")).toBe(1); + expect(this.subject("aa", "b")).toBe(1); + + expect(this.subject("aaa", "a")).toBe(2); + expect(this.subject("bbb", "a")).toBe(2); + expect(this.subject("aaa", "b")).toBe(2); + }); + }); + + describe("with strings of the same length", function () { + it("returns -1 if the first string < second string", function () { + expect(this.subject("a", "b")).toBe(-1); + expect(this.subject("aa", "bb")).toBe(-1); + expect(this.subject("aaa", "bbb")).toBe(-1); + }); + + it("returns 1 if the first string > second string", function () { + expect(this.subject("b", "a")).toBe(1); + expect(this.subject("bb", "aa")).toBe(1); + expect(this.subject("bbb", "aaa")).toBe(1); + }); + + // FIXME SORT_BYLENGTH should probably return 0 like classic string comparison + it("returns 1 if the first string == second string", function () { + expect(this.subject("a", "a")).toBe(1); + expect(this.subject("aa", "aa")).toBe(1); + expect(this.subject("aaa", "aaa")).toBe(1); + }); + }); +}); diff --git a/src/EventHub.Web/yarn.lock b/src/EventHub.Web/yarn.lock index a0d82db..44f340a 100644 --- a/src/EventHub.Web/yarn.lock +++ b/src/EventHub.Web/yarn.lock @@ -360,6 +360,11 @@ atob@^2.1.1: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +awesomplete@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/awesomplete/-/awesomplete-1.1.5.tgz#1b2b5dd106d3955595619c03da472a1dc0faf0af" + integrity sha512-UFw1mPW8NaSECDSTC36HbAOTpF9JK2wBUJcNn4MSvlNtK7SZ9N72gB+ajHtA6D1abYXRcszZnBA4nHBwvFwzHw== + bach@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"