This repository has been archived by the owner on Dec 22, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Greg
committed
Sep 13, 2015
1 parent
e9602fa
commit dd1e61a
Showing
40 changed files
with
3,935 additions
and
1,114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| language: node_js | ||
| node_js: | ||
| - "0.12" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <rg-alert> | ||
|
|
||
| <div each="{ opts.alerts }" class="alert { type }" onclick="{ onclick }"> | ||
| <a class="close" aria-label="Close" onclick="{ parent.remove }" if="{ dismissable != false }"> | ||
| <span aria-hidden="true">×</span> | ||
| </a> | ||
|
|
||
| <div class="body"> | ||
| { msg } | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| this.on('update', () => { | ||
| opts.alerts.forEach((alert) => { | ||
| alert.id = Math.random().toString(36).substr(2, 8) | ||
| if (!alert.timer && alert.timeout) { | ||
| alert.startTimer = () => { | ||
| alert.timer = window.setTimeout(() => { | ||
| opts.alerts.splice(opts.alerts.indexOf(alert), 1) | ||
| if (alert.onclose) alert.onclose() | ||
| this.update() | ||
| }, alert.timeout) | ||
| } | ||
| alert.startTimer() | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| this.remove = (e) => { | ||
| e.stopPropagation() | ||
| if (e.item.onclose) e.item.onclose() | ||
| window.clearTimeout(e.item.timer) | ||
| opts.alerts.splice(opts.alerts.indexOf(e.item), 1) | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
|
|
||
| :scope { | ||
| font-size: 0.9em; | ||
| position: relative; | ||
| top: 0; | ||
| right: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .alert { | ||
| position: relative; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .body { | ||
| padding: 15px 35px 15px 15px; | ||
| } | ||
|
|
||
| .close { | ||
| position: absolute; | ||
| top: 50%; | ||
| right: 20px; | ||
| line-height: 12px; | ||
| margin-top: -6px; | ||
| font-size: 18px; | ||
| border: 0; | ||
| background-color: transparent; | ||
| color: rgba(0, 0, 0, 0.5); | ||
| cursor: pointer; | ||
| outline: none; | ||
| } | ||
|
|
||
| .danger { | ||
| color: #8f1d2e; | ||
| background-color: #ffced8; | ||
| } | ||
|
|
||
| .information { | ||
| color: #31708f; | ||
| background-color: #d9edf7; | ||
| } | ||
|
|
||
| .success { | ||
| color: #2d8f40; | ||
| background-color: #ccf7d4; | ||
| } | ||
|
|
||
| .warning { | ||
| color: #c06329; | ||
| background-color: #f7dfd0; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| </rg-alert> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,186 @@ | ||
| <rg-autocomplete> | ||
|
|
||
| <div class="container { open: opened }" style="width: { width }"> | ||
| <input type="{ opts.type || 'text' }" name="textbox" | ||
| placeholder="{ opts.placeholder }" | ||
| onkeydown="{ handleKeys }" | ||
| oninput="{ filterItems }" | ||
| onfocus="{ filterItems }"> | ||
|
|
||
| <div class="dropdown { open: opened }" show="{ opened }"> | ||
| <div class="list"> | ||
| <ul> | ||
| <li each="{ filteredItems }" | ||
| onclick="{ parent.select }" | ||
| class="item { active: active }"> | ||
| { text } | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| this.opened = true | ||
| this.textbox.value = opts.value || '' | ||
|
|
||
| this.filterItems = () => { | ||
| this.filteredItems = opts.items.filter((item) => { | ||
| item.active = false; | ||
| if (this.textbox.value.length == 0 || | ||
| item.text.toString().toLowerCase().indexOf(this.textbox.value.toString().toLowerCase()) > -1) { | ||
| return true | ||
| } | ||
| }) | ||
| if (this.filteredItems.length > 0) { | ||
| this.opened = true | ||
| } | ||
| if (opts.onfilter) { | ||
| opts.onfilter() | ||
| } | ||
| this.update() | ||
| } | ||
|
|
||
| this.handleKeys = (e) => { | ||
| var length = this.filteredItems.length | ||
| if (length > 0 && [13, 38, 40].indexOf(e.keyCode) > -1) { | ||
| this.opened = true | ||
| e.preventDefault() | ||
| // Get the currently selected item | ||
| var activeIndex = null | ||
| for (var i = 0; i < length; i++) { | ||
| var item = this.filteredItems[i] | ||
| if (item.active) { | ||
| activeIndex = i | ||
| break | ||
| } | ||
| } | ||
|
|
||
| // We're leaving this item | ||
| if (activeIndex != null) this.filteredItems[activeIndex].active = false | ||
|
|
||
| if (e.keyCode == 38) { | ||
| // Move the active state to the next item lower down the index | ||
| if (activeIndex == null || activeIndex == 0) | ||
| this.filteredItems[length - 1].active = true | ||
| else | ||
| this.filteredItems[activeIndex - 1].active = true | ||
| } else if (e.keyCode == 40) { | ||
| // Move the active state to the next item higher up the index | ||
| if (activeIndex == null || activeIndex == length - 1) | ||
| this.filteredItems[0].active = true | ||
| else | ||
| this.filteredItems[activeIndex + 1].active = true | ||
| } else if (e.keyCode == 13 && activeIndex != null) | ||
| this.select({ item: this.filteredItems[activeIndex] }) | ||
| } | ||
| return true | ||
| }; | ||
|
|
||
| this.select = (item) => { | ||
| item = item.item | ||
| if (opts.onselect) opts.onselect(item) | ||
| this.textbox.value = item.text | ||
| this.opened = false | ||
| } | ||
|
|
||
| this.closeDropdown = (e) => { | ||
| if (!this.root.contains(e.target)) { | ||
| if (opts.onclose && this.opened) opts.onclose() | ||
| this.opened = false | ||
| this.update() | ||
| } | ||
| }; | ||
|
|
||
| this.on('mount', () => { | ||
| document.addEventListener('click', this.closeDropdown) | ||
| document.addEventListener('focus', this.closeDropdown, true) | ||
| this.width = this.textbox.getBoundingClientRect().width + 'px' | ||
| var dd = this.root.querySelector('.dropdown') | ||
| dd.style.width = this.width | ||
| dd.style.position = 'absolute' | ||
| this.opened = opts.opened | ||
| this.update() | ||
| }) | ||
|
|
||
| this.on('unmount', () => { | ||
| document.removeEventListener('click', this.closeDropdown) | ||
| document.removeEventListener('focus', this.closeDropdown, true) | ||
| }) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
|
|
||
| .container { | ||
| position: relative; | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .container.open { | ||
| -webkit-box-shadow: 0 2px 10px -4px #444; | ||
| -moz-box-shadow: 0 2px 10px -4px #444; | ||
| box-shadow: 0 2px 10px -4px #444; | ||
| } | ||
|
|
||
| input { | ||
| font-size: 1em; | ||
| padding: 10px; | ||
| border: 1px solid #D3D3D3; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| outline: none; | ||
| } | ||
|
|
||
| .container.open input { | ||
| } | ||
|
|
||
| .dropdown { | ||
| position: relative; | ||
| background-color: white; | ||
| border: 1px solid #D3D3D3; | ||
| border-top: 0; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| overflow-y: auto; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| .dropdown.open { | ||
| -webkit-box-shadow: 0 2px 10px -4px #444; | ||
| -moz-box-shadow: 0 2px 10px -4px #444; | ||
| box-shadow: 0 2px 10px -4px #444; | ||
| } | ||
|
|
||
| ul, li { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| li { | ||
| padding: 10px; | ||
| border-top: 1px solid #E8E8E8; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| li:first-child { | ||
| border-top: 0; | ||
| } | ||
|
|
||
| li:hover { | ||
| background-color: #f3f3f3; | ||
| } | ||
|
|
||
| li.active, | ||
| li:hover.active { | ||
| background-color: #ededed; | ||
| } | ||
|
|
||
|
|
||
| </style> | ||
| </rg-autocomplete> |
Oops, something went wrong.