64 | }
65 | }
66 |
67 | class Selfie extends React.Component {
68 | constructor() {
69 | super()
70 |
71 | this.onUserMedia = this.onUserMedia.bind(this)
72 | this.onTake = this.onTake.bind(this)
73 |
74 | this.state = {
75 | STATE: STATES.IS_LOADING
76 | }
77 | }
78 |
79 | componentWillUnmount() {
80 | if (this.pendingRequest) this.pendingRequest.cancel()
81 | }
82 |
83 | onUserMedia(media) {
84 | this.setState({ STATE: STATES.HAS_PERMISSION })
85 | }
86 |
87 | onTake() {
88 | let screenshot = this.refs.webcam.getScreenshot()
89 |
90 | this.setState({
91 | STATE: STATES.IS_LOADING,
92 | image: screenshot
93 | })
94 |
95 | Imgur.upload({
96 | data: screenshot.replace(/.*base64\,/, ''),
97 | type: 'base64'
98 | }).then((data) => {
99 | let link = data.link.replace('http:', 'https:')
100 | this.props.onDone(new Types.Image({
101 | src: link,
102 | alt: 'selfie',
103 | url: link
104 | }))
105 | })
106 |
107 | }
108 |
109 | render() {
110 | let classes = [styles.container]
111 | if (this.state.image) classes.push(styles['container--hasPreview'])
112 |
113 | return (
114 |
133 | )
134 | }
135 | }
136 | Selfie.propTypes = {
137 | onDone: React.PropTypes.func.isRequired
138 | }
139 |
140 | export let match = 'selfie'
141 | export let icon = require('./Selfie.png')
142 | export let mount = mountReactComponent.bind(null, Selfie)
143 |
144 |
--------------------------------------------------------------------------------
/src/content/commands/Selfie/Selfie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/content/commands/Selfie/Selfie.png
--------------------------------------------------------------------------------
/src/content/commands/Selfie/Selfie.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/settings";
2 |
3 | .container {
4 | background: black;
5 | height: 300px;
6 | :global {
7 | .react-spinner {
8 | z-index: 2;
9 | }
10 | .react-spinner_bar {
11 | background: white;
12 | }
13 | }
14 | }
15 | .video {
16 | height: 300px;
17 | width: 400px;
18 | position: absolute;
19 | top: 0;
20 | left: 0;
21 | }
22 | .close {
23 | position: absolute;
24 | top: 10px;
25 | right: 10px;
26 | cursor: pointer;
27 | z-index: 2;
28 | color: white;
29 | font-size: 30px;
30 | line-height: 20px;
31 | }
32 | .preview {
33 | width: 400px;
34 | height: 300px;
35 | position: absolute;
36 | top: 0;
37 | left: 0;
38 | z-index: 1;
39 | }
40 | .button {
41 | $size: 40px;
42 | position: absolute;
43 | bottom: 20px;
44 | left: 50%;
45 | margin-left: -$size / 2;
46 | width: $size;
47 | height: $size;
48 | border-radius: $size / 2;
49 | box-shadow: 0 0 0 2px black, 0 0 0 4px rgba(255, 255, 255, 0.8);
50 | background: rgba(255, 255, 255, 1);
51 | z-index: 2;
52 | cursor: pointer;
53 | &:hover {
54 | box-shadow: 0 0 0 2px black, 0 0 0 4px rgba(255, 255, 255, 1);
55 | }
56 | &:active {
57 | box-shadow: 0 0 0 2px black, 0 0 0 4px $color-red;
58 | }
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/src/content/commands/Spotify/Spotify.jsx:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import $ from 'jquery'
3 | import React from 'react'
4 | import classnames from 'classnames'
5 | import { mountReactComponent } from 'content/commands/mount'
6 |
7 | import styles from './Spotify.scss'
8 | import * as Types from 'content/types'
9 | import * as Search from 'content/components/Search'
10 | import Container from 'content/components/Container'
11 |
12 | const API_BASE = 'https://api.spotify.com/v1/search'
13 |
14 | let search = (query, options={}) => {
15 | return $.ajax({
16 | url: API_BASE,
17 | data: {
18 | q: query,
19 | type: 'track',
20 | offset: options.offset
21 | }
22 | }).then((data) => {
23 | return data.tracks.items
24 | })
25 | }
26 |
27 | let SpotifyResult = (props) => {
28 | return (
29 |
34 | )
35 | }
36 |
37 | class Spotify extends React.Component {
38 | onSelect(result) {
39 | this.props.onDone(new Types.Link({
40 | href: result.external_urls.spotify
41 | }))
42 | }
43 |
44 | render() {
45 | return (
46 |
56 | )
57 | }
58 | }
59 | Spotify.propTypes = {
60 | onDone: React.PropTypes.func.isRequired
61 | }
62 |
63 | export let match = 'spotify'
64 | export let icon = require('./Spotify.png')
65 | export let mount = mountReactComponent.bind(null, Spotify)
66 |
--------------------------------------------------------------------------------
/src/content/commands/Spotify/Spotify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/content/commands/Spotify/Spotify.png
--------------------------------------------------------------------------------
/src/content/commands/Spotify/Spotify.scss:
--------------------------------------------------------------------------------
1 | .result {
2 | position: relative;
3 | &:after {
4 | content: " ";
5 | background: rgba(0, 0, 0, 0.4);
6 | width: 100%;
7 | height: 100%;
8 | position: absolute;
9 | top: 0;
10 | left: 0;
11 | }
12 | }
13 | .result__title {
14 | font-size: 12px;
15 | margin: 5px;
16 | position: absolute;
17 | top: 0;
18 | left: 0;
19 | color: white;
20 | font-weight: 700;
21 | z-index: 1;
22 |
23 | display: -webkit-box;
24 | text-overflow: ellipsis;
25 | -webkit-box-orient: vertical;
26 | -webkit-line-clamp: 3;
27 | overflow: hidden;
28 | }
29 | .result__artist {
30 | color: white;
31 | position: absolute;
32 | bottom: 5px;
33 | left: 5px;
34 | font-size: 10px;
35 | margin: 0;
36 | z-index: 1;
37 | }
38 |
--------------------------------------------------------------------------------
/src/content/commands/index.js:
--------------------------------------------------------------------------------
1 | import indexBy from 'lodash.indexby'
2 | import pluck from 'lodash.pluck'
3 |
4 | // need this import for global spinners to work
5 | import 'react-spinner/react-spinner.css'
6 |
7 | let COMMANDS = []
8 | let requirer = require.context('./', true, /(\.js|\.jsx)$/)
9 | for (let key of requirer.keys()) {
10 | let maybeCommand = requirer(key)
11 | if (maybeCommand.match && maybeCommand.mount) {
12 | COMMANDS.push(maybeCommand)
13 | }
14 | }
15 |
16 | export let MATCHES = pluck(COMMANDS, 'match')
17 | export let MATCH_TO_COMMAND = indexBy(COMMANDS, 'match')
18 | export let MATCH_REGEX = new RegExp(`(?:^|\\s|>)\/(${MATCHES.join("|")})`)
19 |
20 | export function match(text) {
21 | let match = text.match(MATCH_REGEX)
22 | if (match) {
23 | return {
24 | command: MATCH_TO_COMMAND[match[1]],
25 | match: '/' + match[1]
26 | }
27 | } else {
28 | return {}
29 | }
30 | }
31 |
32 | export function getAtData() {
33 | return _.map(COMMANDS, (command) => {
34 | return {
35 | name: command.match,
36 | icon: command.icon
37 | }
38 | })
39 | }
40 |
--------------------------------------------------------------------------------
/src/content/commands/mount.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import ReactDOM from 'react-dom'
3 | import React from 'react'
4 |
5 | function getContainer() {
6 | let $container = $('.command__container')
7 | if (!$container.length) {
8 | $container = $('
')
9 | .addClass('command__container')
10 | .appendTo('body')
11 | }
12 | return $container[0]
13 | }
14 |
15 | /**
16 | * mountReactComponent
17 | *
18 | * This function is a helper that makes it easy to mount a
19 | * command that displays a React component.
20 | *
21 | * @param {React.Component} Component - the React component to mount
22 | * @param {Field} field - the field to mount on
23 | * @param {function} onDone - completed callback
24 | * @param {fucntion} onInsert - a callback to insert Types to the Field
25 | *
26 | * Usage:
27 | *
28 | * export let mount = mountReactComponent.bind(null, Component)
29 | */
30 | export function mountReactComponent(Component, field, onDone, onInsert) {
31 | let caretOffset = field.getCaretOffset()
32 | let container = getContainer()
33 | let _onDone = (result) => {
34 | ReactDOM.unmountComponentAtNode(container)
35 | onDone(result)
36 | }
37 |
38 | ReactDOM.render(
39 |
,
47 | container
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/content/components/Container.jsx:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import classnames from 'classnames'
5 | import NativeListener from 'react-native-listener'
6 | import Draggable from 'react-draggable'
7 |
8 | import * as Extension from 'content/lib/extension'
9 | import styles from './Container.scss'
10 |
11 | let Icon = (props) => {
12 | return (
13 |
14 | })
15 |
16 | )
17 | }
18 |
19 | let Version = (props) => {
20 | if (!Extension.isExtension()) return
21 | return (
22 |
23 | v{ Extension.getVersion() }
24 |
25 | )
26 | }
27 |
28 | let Close = (props) => {
29 | return (
30 |
dismiss
31 | )
32 | }
33 |
34 | class Container extends React.Component {
35 | constructor(props) {
36 | super(props)
37 | this.unmountOnClickOutside = this.unmountOnClickOutside.bind(this)
38 | this.unmount = this.unmount.bind(this)
39 | }
40 |
41 | componentDidMount() {
42 | // we add this event listener in a callback because
43 | // without the jump to the back of the event loop, this
44 | // listener picks up the "click" event when a user clicks
45 | // the at.js dropdown to select a command
46 | setTimeout(() => {
47 | $('html').on('click', this.unmountOnClickOutside)
48 | }, 0)
49 | }
50 |
51 | componentWillUnmount() {
52 | $('html').off('click', this.unmountOnClickOutside)
53 | }
54 |
55 | unmountOnClickOutside(evt) {
56 | if (!this.props.container.contains(evt.target)) {
57 | this.unmount()
58 | }
59 | }
60 |
61 | unmount() {
62 | ReactDOM.unmountComponentAtNode(this.props.container)
63 | }
64 |
65 | render() {
66 | let style = {
67 | top: this.props.top,
68 | left: this.props.left
69 | }
70 | let classes = classnames(styles.container, this.props.className)
71 |
72 | return (
73 |
74 |
75 |
76 |
77 | { this.props.children }
78 |
79 |
80 |
81 |
83 | )
84 | }
85 | }
86 | Container.propTypes = {
87 | top: React.PropTypes.number.isRequired,
88 | left: React.PropTypes.number.isRequired,
89 | className: React.PropTypes.string
90 | }
91 |
92 | export default Container
93 |
--------------------------------------------------------------------------------
/src/content/components/Container.scss:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: absolute;
3 | z-index: 9999;
4 | box-sizing: border-box;
5 | width: 400px;
6 |
7 | & * {
8 | font-family: 'Avenir', sans-serif;
9 | box-sizing: border-box;
10 | }
11 | }
12 |
13 | .container {
14 | position: relative;
15 | z-index: 2;
16 | padding: 10px;
17 | background: #fff;
18 | border-radius: 5px;
19 | box-shadow: 0 0 0 1px rgba(14,41,57,0.05),0 1px 2px rgba(14,41,57,0.44),inset 0 -1px 2px rgba(14,41,57,0.05);
20 | cursor: pointer;
21 |
22 | overflow: hidden;
23 | min-height: 90px;
24 | transition: height 200ms;
25 |
26 | :global {
27 | .react-spinner {
28 | width: 40px;
29 | margin-top: 10px;
30 | position: absolute;
31 | }
32 |
33 | .react-spinner_bar {
34 | background-color: #777;
35 | }
36 | }
37 | }
38 |
39 | .icon {
40 | width: 20px;
41 | position: absolute;
42 | bottom: 10px;
43 | left: 10px;
44 | img {
45 | width: 100%;
46 | display: block;
47 | }
48 | }
49 |
50 | .version {
51 | position: absolute;
52 | bottom: 7px;
53 | right: 10px;
54 | font-size: 12px;
55 | color: #ccc;
56 | text-decoration: none;
57 | &:visited {
58 | color: #ccc;
59 | }
60 | &:hover {
61 | color: #bbb;
62 | }
63 | }
64 |
65 | .close {
66 | position: absolute;
67 | z-index: 1;
68 | top: -18px;
69 | right: 10px;
70 | background: #fff;
71 | border: 1px solid #eee;
72 | border-radius: 3px;
73 | color: #aaa;
74 | padding: 2px 7px;
75 | font-size: 10px;
76 | z-index: 1;
77 | text-transform: lowercase;
78 | cursor: pointer;
79 | &:hover {
80 | color: #777;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/content/components/Search.jsx:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import React from 'react'
3 | import NativeListener from 'react-native-listener'
4 | import ReactDOM from 'react-dom'
5 | import classnames from 'classnames'
6 | import Spinner from 'react-spinner'
7 |
8 | import styles from './Search.scss'
9 |
10 | export class Input extends React.Component {
11 | constructor() {
12 | super()
13 | this.onChange = this.onChange.bind(this)
14 | this.onKeyDown = this.onKeyDown.bind(this)
15 | this.onSearch = _.debounce(this.onSearch.bind(this), 300)
16 | }
17 |
18 | componentDidMount() {
19 | $(ReactDOM.findDOMNode(this)).focus()
20 | }
21 |
22 | onSearch(query) {
23 | this.props.onSearch(query)
24 | }
25 |
26 | onChange(event) {
27 | this.onSearch(event.target.value)
28 | }
29 |
30 | onKeyDown(event) {
31 | event.stopPropagation()
32 | if (event.keyCode == 27) {
33 | return this.props.onEsc()
34 | }
35 | return true
36 | }
37 |
38 | onKeyUp(event) {
39 | event.stopPropagation()
40 | return true
41 | }
42 |
43 | onKeyPress(event) {
44 | event.stopPropagation()
45 | return true
46 | }
47 |
48 | render() {
49 | return (
50 |
51 |
58 |
59 | )
60 | }
61 | }
62 | Input.propTypes = {
63 | onEsc: React.PropTypes.func.isRequired,
64 | onSearch: React.PropTypes.func.isRequired
65 | }
66 |
67 | let Back = (props) => {
68 | let classes = classnames({
69 | [styles.disabled]: props.disabled
70 | })
71 | return (
72 |
←
73 | )
74 | }
75 |
76 | let Forward = (props) => {
77 | let classes = classnames({
78 | [styles.disabled]: props.disabled
79 | })
80 | return (
81 |
→
82 | )
83 | }
84 |
85 | class Pagination extends React.Component {
86 | render() {
87 | return (
88 |
89 |
90 |
91 |
92 | )
93 | }
94 | }
95 |
96 | class Result extends React.Component {
97 | render() {
98 | return (
99 |
100 | { }
101 |
102 | )
103 | }
104 | }
105 | Result.propTypes = {
106 | onClick: React.PropTypes.func.isRequired
107 | }
108 |
109 | class Results extends React.Component {
110 | constructor() {
111 | super()
112 | this.state = { atEnd: false }
113 | }
114 |
115 | componentDidUpdate() {
116 | if (this.state.atEnd) {
117 | // TODO: figure out a more elegant way to handle the situation
118 | // where the last child is still laying out when this check
119 | // is happening.
120 | setTimeout(this.checkForEnd.bind(this), 500)
121 | } else {
122 | this.checkForEnd()
123 | }
124 | }
125 |
126 | checkForEnd() {
127 | let last = ReactDOM.findDOMNode(this.refs.last)
128 | if (last) {
129 | let visibleWindow = this.props.width * (this.props.page + 1)
130 | let lastOffset = last.offsetLeft
131 | if (visibleWindow - lastOffset > 0) {
132 | if (!this.state.atEnd) {
133 | this.setState({ atEnd: true })
134 | this.props.onReachEnd()
135 | }
136 | } else {
137 | if (this.state.atEnd) {
138 | this.setState({ atEnd: false })
139 | }
140 | }
141 | }
142 | }
143 |
144 | getStyles() {
145 | return {
146 | left: this.props.page * - this.props.width // magic number
147 | }
148 | }
149 |
150 | render() {
151 | let children = _.map(this.props.results, (result, i) => {
152 | return
159 | })
160 |
161 | return (
162 |
163 |
164 | { children }
165 |
166 |
167 |
168 | )
169 | }
170 | }
171 | Results.defaultProps = {
172 | width: 383
173 | }
174 | Results.propTypes = {
175 | onSelect: React.PropTypes.func.isRequired,
176 | onReachEnd: React.PropTypes.func.isRequired,
177 | width: React.PropTypes.number.isRequired
178 | }
179 |
180 | let NoResults = (props) => {
181 | return (
182 |
No results.
183 | )
184 | }
185 |
186 | export class Widget extends React.Component {
187 | constructor(props) {
188 | super(props)
189 |
190 | this.state = {
191 | results: props.results || [],
192 | IS_LOADING: false,
193 | query: "",
194 | page: 0
195 | }
196 |
197 | this.search = this.search.bind(this)
198 | this.onSelect = this.onSelect.bind(this)
199 | this.onBack = this.onBack.bind(this)
200 | this.onForward = this.onForward.bind(this)
201 | this.onReachEnd = this.onReachEnd.bind(this)
202 | }
203 |
204 | componentWillUnmount() {
205 | if (this.pendingRequest) {
206 | this.cancel = true
207 | }
208 | }
209 |
210 | onBack() {
211 | this.setState({ page: Math.max(0, this.state.page - 1) })
212 | }
213 |
214 | onForward() {
215 | this.setState({ page: this.state.page + 1 })
216 | }
217 |
218 | onReachEnd() {
219 | this.doQuery(this.state.query, { append: true, offset: this.state.results.length })
220 | }
221 |
222 | doQuery(query, options={}) {
223 | this.pendingRequest = this.props.onSearch(query, options)
224 | .then((results) => {
225 | if (this.cancel) return
226 | results = options.append ? this.state.results.concat(results) : results
227 | this.setState({ results: results, IS_LOADING: false })
228 | })
229 | .always(() => {
230 | this.pendingRequest = null
231 | })
232 | }
233 |
234 | search(query) {
235 | if (query == "") {
236 | return this.setState({
237 | query: query,
238 | IS_LOADING: false,
239 | results: [],
240 | page: 0
241 | })
242 | }
243 |
244 | this.setState({ query: query, IS_LOADING: true, results: [] })
245 | this.doQuery(query)
246 | }
247 |
248 | onSelect(result) {
249 | this.props.onSelect(result)
250 | }
251 |
252 | render() {
253 | let classes = classnames(styles.widget, this.props.className, {
254 | [styles.isExpanded]: this.state.query != "" || this.props.isExpanded,
255 | [styles.hasResults]: this.state.results.length > 0,
256 | [styles.hasColumns]: this.props.columns
257 | })
258 |
259 | let toRender
260 | if (this.state.IS_LOADING) {
261 | toRender =
262 | } else {
263 | if (this.state.results.length > 0) {
264 | toRender =
274 | } else if (this.state.query != "") {
275 | toRender =
276 | }
277 | }
278 |
279 | return (
280 |
281 |
286 | { toRender }
287 |
288 | )
289 | }
290 | }
291 | Widget.defaultProps = {
292 | placeholder: "Search...",
293 | columns: 4
294 | }
295 | Widget.propTypes = {
296 | results: React.PropTypes.array,
297 | columns: React.PropTypes.oneOfType([
298 | React.PropTypes.bool.isRequired,
299 | React.PropTypes.number.isRequired
300 | ]),
301 | placeholder: React.PropTypes.string,
302 | onSearch: React.PropTypes.func.isRequired,
303 | onSelect: React.PropTypes.func.isRequired,
304 | onEsc: React.PropTypes.func.isRequired,
305 | ResultClass: React.PropTypes.oneOfType([
306 | React.PropTypes.func.isRequired,
307 | React.PropTypes.element.isRequired,
308 | ])
309 | }
310 |
--------------------------------------------------------------------------------
/src/content/components/Search.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/settings";
2 |
3 | .widget {
4 | height: 70px;
5 | transition: height 300ms;
6 | &.isExpanded {
7 | height: 300px;
8 | }
9 | &.hasResults .results {
10 | opacity: 1;
11 | }
12 | }
13 |
14 | input[type="search"].input {
15 | width: 100%;
16 | padding: 8px;
17 | font-size: 14px;
18 | font-weight: 700;
19 | margin-bottom: 5px;
20 | box-sizing: border-box;
21 |
22 | box-shadow: none;
23 | border: 1px solid #ccc;
24 | transition: border-color 300ms;
25 |
26 | &:focus {
27 | border: 1px solid #ddd;
28 | outline: none;
29 | }
30 | }
31 |
32 | .resultsContainer {
33 | overflow: hidden;
34 | width: 100%;
35 | }
36 |
37 | .results {
38 | padding: 5px 0;
39 | height: 210px;
40 | opacity: 0;
41 | transition: opacity 200ms, left 300ms;
42 |
43 | position: relative;
44 | left: 0;
45 | }
46 | .widget.hasColumns .results {
47 | -webkit-column-count: 4;
48 | -webkit-column-gap: 3px;
49 | }
50 |
51 | .result {
52 | cursor: pointer;
53 | border: 2px solid transparent;
54 | display: inline-block;
55 |
56 | img {
57 | width: 100%;
58 | display: block;
59 | }
60 |
61 | &:hover {
62 | border-color: $color-red;
63 | }
64 | }
65 |
66 | .noResults {
67 | width: 100%;
68 | text-align: center;
69 | color: #ccc;
70 | margin-top: 90px;
71 | font-size: 16px;
72 | }
73 |
74 | .pagination {
75 | text-align: center;
76 | }
77 | .pagination a {
78 | cursor: pointer;
79 | color: #ccc;
80 | margin: 10px;
81 | font-size: 30px;
82 | -webkit-user-select: none;
83 | text-decoration: none;
84 |
85 | &:hover {
86 | color: #aaa;
87 | }
88 |
89 | &.disabled {
90 | color: #eee;
91 | cursor: inherit;
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/content/components/index.js:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/content/fields/ContentEditable.js:
--------------------------------------------------------------------------------
1 | import rangy from 'rangy/lib/rangy-selectionsaverestore.js'
2 | import Field from './Field'
3 |
4 | class ContentEditable extends Field {
5 | getText() {
6 | return this.$element[0].textContent
7 | }
8 |
9 | persistSelection() {
10 | let selection = rangy.getSelection()
11 | if (selection.rangeCount > 0) {
12 | this.range = rangy.getSelection().getRangeAt(0)
13 | } else {
14 | let range = rangy.createRange()
15 | range.selectNodeContents(this.$element.get(0))
16 | range.collapse(false)
17 | this.range = range
18 | }
19 | }
20 |
21 | removeCommand(match) {
22 | super.removeCommand()
23 |
24 | let range = this.range
25 | let container = range.startContainer.closest ? range.startContainer : range.startContainer.parentElement
26 | let query = container.closest('.atwho-query') ||
27 | container.querySelector('.atwho-query') ||
28 | container.querySelector('.atwho-inserted') ||
29 | container.querySelector('.atwho-inserted')
30 |
31 | range.selectNode(query)
32 | range.deleteContents()
33 | }
34 |
35 | insertText(text) {
36 | let node = document.createTextNode(text)
37 | this.insertNode(node)
38 | }
39 |
40 | focus() {
41 | this.range.select()
42 | this.range.collapse(false)
43 | this.range.select()
44 | }
45 |
46 | blur() {
47 | this.$element.blur()
48 | }
49 |
50 | insertNode(node) {
51 | this.range.insertNode(node)
52 | this.range.setEndAfter(node)
53 | this.focus()
54 | this.blur()
55 | }
56 |
57 | replaceText(find, replace) {
58 | let element = this.$element[0]
59 | let selection = rangy.saveSelection()
60 | element.innerHTML = element.innerHTML.replace(find, replace)
61 | rangy.restoreSelection(selection)
62 | }
63 |
64 | setText(text) {
65 | return this.$element[0].innerHTML = text
66 | }
67 | }
68 |
69 | export default ContentEditable
70 |
--------------------------------------------------------------------------------
/src/content/fields/ContentEditableFacebook.js:
--------------------------------------------------------------------------------
1 | import ContentEditable from './ContentEditable'
2 |
3 | class ContentEditableFacebook extends ContentEditable {
4 | constructor($element) {
5 | super($element)
6 | }
7 | }
8 |
9 | export default ContentEditableFacebook
10 |
--------------------------------------------------------------------------------
/src/content/fields/ContentEditableHTML.js:
--------------------------------------------------------------------------------
1 | import mixin from 'content/lib/mixin'
2 | import ContentEditable from './ContentEditable'
3 | import HTML from './HTML'
4 |
5 |
6 | class ContentEditableHTML extends ContentEditable { }
7 | mixin(ContentEditableHTML, HTML)
8 |
9 | export default ContentEditableHTML
10 |
--------------------------------------------------------------------------------
/src/content/fields/ContentEditableMarkdown.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/content/fields/ContentEditableMarkdown.js
--------------------------------------------------------------------------------
/src/content/fields/ContentEditableUnformatted.js:
--------------------------------------------------------------------------------
1 | import mixin from 'content/lib/mixin'
2 | import ContentEditable from './ContentEditable'
3 | import Unformatted from './Unformatted'
4 |
5 | class ContentEditableUnformatted extends ContentEditable { }
6 | mixin(ContentEditableUnformatted, Unformatted)
7 |
8 | export default ContentEditableUnformatted
9 |
--------------------------------------------------------------------------------
/src/content/fields/Field.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import rangy from 'rangy'
3 | import 'content/vendor/jquery.rangyinputs'
4 | import 'content/vendor/jquery.caret'
5 |
6 | import caretToEnd from 'caret-to-end'
7 | import * as At from 'content/lib/at'
8 | import React from 'react'
9 | import ReactDOM from 'react-dom'
10 | import * as Types from 'content/types'
11 | import * as Commands from 'content/commands'
12 | import * as Analytics from 'content/lib/analytics'
13 |
14 | class Field {
15 |
16 | constructor($element) {
17 | this.$element = $element
18 | this.listen = this.listen.bind(this)
19 | }
20 |
21 | observe() {
22 | this.setupQuickSelect()
23 | this.$element.on('keyup inserted.atwho', this.listen)
24 | }
25 |
26 | listen(e) {
27 | let { command, match } = Commands.match(this.getText())
28 | if (command) {
29 | this.mount(command, match)
30 | }
31 | }
32 |
33 | setupQuickSelect() {
34 | At.setup(this.$element)
35 | this.$element.on('reposition.atwho', (e, offset) => {
36 | this.offset = offset
37 | })
38 | }
39 |
40 | getText() {
41 | throw new Error('Not implemented')
42 | }
43 |
44 | replaceText(text) {
45 | throw new Error('Not implemented')
46 | }
47 |
48 | setText(text) {
49 | throw new Error('Not implemented')
50 | }
51 |
52 | getCaretOffset() {
53 | return this.offset || this.$element.caret('offset')
54 | }
55 |
56 | onBlur() {
57 | this.$element.off('keyup', this.listen)
58 | }
59 |
60 | onDone(result) {
61 | if (result) {
62 | this.insert(result)
63 | }
64 | this.focus()
65 | }
66 |
67 | removeCommand() {
68 | this.$element.atwho('hide')
69 | }
70 |
71 | mount(Component, match) {
72 | this.persistSelection()
73 | this.removeCommand(match)
74 | Component.mount(this, this.onDone.bind(this), this.insert.bind(this))
75 | Analytics.sendEvent('command', 'mount', Component.match)
76 | }
77 |
78 |
79 | insert(type) {
80 | if (!type) return
81 |
82 | switch (type.constructor) {
83 | case Types.Image:
84 | return this.insertImage(type)
85 | case Types.Redirect:
86 | return this.insertRedirect(type)
87 | case Types.Link:
88 | return this.insertLink(type)
89 | default:
90 | return this.insertText(type)
91 | }
92 | }
93 |
94 | insertImage(image) {
95 | throw new Error('Not implemented')
96 | }
97 |
98 | insertLink(link) {
99 | throw new Error('Not implemented')
100 | }
101 |
102 | insertRedirect(redirect) {
103 | window.open(redirect.url, redirect.target)
104 | }
105 | }
106 |
107 | export default Field
108 |
--------------------------------------------------------------------------------
/src/content/fields/HTML.js:
--------------------------------------------------------------------------------
1 | class HTML {
2 | insertImage(image) {
3 | let img = document.createElement('img')
4 | img.src = image.src
5 | img.alt = image.alt
6 | this.insertNode(img)
7 | }
8 |
9 | insertLink(link) {
10 | let a = document.createElement('a')
11 | a.href = link.href
12 | a.appendChild(document.createTextNode(link.href))
13 | this.insertNode(a)
14 | }
15 | }
16 |
17 | export default HTML
18 |
--------------------------------------------------------------------------------
/src/content/fields/Markdown.js:
--------------------------------------------------------------------------------
1 | class Markdown {
2 | insertImage(image) {
3 | this.insertText(``)
4 | }
5 |
6 | insertLink(link) {
7 | this.insertText(`[${link.href}](${link.href})`)
8 | }
9 | }
10 |
11 | export default Markdown
12 |
--------------------------------------------------------------------------------
/src/content/fields/Textarea.js:
--------------------------------------------------------------------------------
1 | import Field from './Field'
2 |
3 | class Textarea extends Field {
4 | getText() {
5 | return this.$element.val()
6 | }
7 |
8 | persistSelection() {
9 | this.range = this.$element.getSelection()
10 | }
11 |
12 | removeCommand(match) {
13 | super.removeCommand()
14 | this.$element.deleteText(this.range.start - match.length, this.range.start, true)
15 | this.range = this.$element.getSelection()
16 | }
17 |
18 | insertText(text) {
19 | this.$element.insertText(text, this.range.start, "collapseToEnd")
20 | this.range = this.$element.getSelection()
21 | this.$element.blur()
22 | }
23 |
24 | focus() {
25 | this.$element.collapseSelection(false)
26 | this.$element.focus()
27 | }
28 |
29 | replaceText(find, replace) {
30 | return this.setText(this.getText().replace(find, replace))
31 | }
32 |
33 | setText(text) {
34 | return this.$element.val(text)
35 | }
36 | }
37 |
38 | export default Textarea
39 |
--------------------------------------------------------------------------------
/src/content/fields/TextareaMarkdown.js:
--------------------------------------------------------------------------------
1 | import mixin from 'content/lib/mixin'
2 | import Textarea from './Textarea'
3 | import Markdown from './Markdown'
4 |
5 | class TextareaMarkdown extends Textarea { }
6 | mixin(TextareaMarkdown, Markdown)
7 |
8 | export default TextareaMarkdown
9 |
--------------------------------------------------------------------------------
/src/content/fields/TextareaUnformatted.js:
--------------------------------------------------------------------------------
1 | import mixin from 'content/lib/mixin'
2 | import Textarea from './Textarea'
3 | import Unformatted from './Unformatted'
4 |
5 | class TextareaUnformatted extends Textarea { }
6 | mixin(TextareaUnformatted, Unformatted)
7 |
8 | export default TextareaUnformatted
9 |
--------------------------------------------------------------------------------
/src/content/fields/Unformatted.js:
--------------------------------------------------------------------------------
1 | class HTML {
2 | insertImage(image) {
3 | this.insertText(image.src)
4 | }
5 |
6 | insertLink(link) {
7 | this.insertText(link.href)
8 | }
9 | }
10 |
11 | export default HTML
12 |
--------------------------------------------------------------------------------
/src/content/fields/Unsupported.js:
--------------------------------------------------------------------------------
1 | import Field from './Field'
2 | import * as At from 'content/lib/at'
3 |
4 | class Unsupported extends Field {
5 |
6 | observe() {
7 | this.$element.atwho({
8 | at: "/",
9 | data: [
10 | "This text field is unsupported",
11 | "Hit enter to learn more."
12 | ],
13 | displayTimeout: 0
14 | })
15 | this.$element.on('inserted.atwho', () => {
16 | window.open("https://github.com/jessepollak/command/wiki/Why-isn't-command-supported-on-_______-website%3F", '_blank')
17 | })
18 | }
19 | }
20 |
21 | export default Unsupported
22 |
--------------------------------------------------------------------------------
/src/content/fields/index.js:
--------------------------------------------------------------------------------
1 | import ContentEditable from './ContentEditable'
2 | import ContentEditableHTML from './ContentEditableHTML'
3 | import Textarea from './Textarea'
4 | import TextareaUnformatted from './TextareaUnformatted'
5 |
6 | import getDomainOverriddenField from './support/domains'
7 | import getClassOverriddenField from './support/classes'
8 |
9 | export const SELECTOR = 'textarea, div[contenteditable="true"]'
10 |
11 | function getFieldType($element) {
12 | let FieldType
13 |
14 | if (FieldType = getClassOverriddenField($element)) {
15 | return new FieldType($element)
16 | }
17 |
18 | if (FieldType = getDomainOverriddenField($element)) {
19 | return new FieldType($element)
20 | }
21 |
22 | if ($element.is('textarea, input')) {
23 | FieldType = TextareaUnformatted
24 | } else {
25 | FieldType = ContentEditableHTML
26 | }
27 |
28 | return new FieldType($element)
29 | }
30 | export function setup($element) {
31 | if ($element.data('___command_setup')) {
32 | return
33 | }
34 |
35 | let field = new getFieldType($element)
36 | field.observe()
37 | $element.data('___command_setup', true)
38 | }
39 |
--------------------------------------------------------------------------------
/src/content/fields/support/classes.js:
--------------------------------------------------------------------------------
1 | import TextareaUnformatted from 'content/fields/TextareaUnformatted'
2 | import TextareaMarkdown from 'content/fields/TextareaMarkdown'
3 |
4 | const MAPPING = {
5 | 'uiTextareaNoResize': TextareaUnformatted,
6 | 'markdown-area': TextareaMarkdown
7 | }
8 |
9 | export default function getClassOverriddenField($element) {
10 | let override
11 | let classes = $element[0].className.split(/\s+/)
12 | for (let cls of classes) {
13 | if (override = MAPPING[cls]) {
14 | return override
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/content/fields/support/domains.js:
--------------------------------------------------------------------------------
1 | import TextareaMarkdown from 'content/fields/TextareaMarkdown'
2 | import ContentEditableFacebook from 'content/fields/ContentEditableFacebook'
3 | import ContentEditableUnformatted from 'content/fields/ContentEditableUnformatted'
4 | import Unsupported from 'content/fields/Unsupported'
5 |
6 | const MAPPING = {
7 | 'www.messenger.com': Unsupported,
8 | 'www.facebook.com': Unsupported,
9 | 'twitter.com': Unsupported
10 | }
11 |
12 | // Consider any page with github in the hostname to be a github page.
13 | // Adds support for GHE
14 | const hostname = window.location.hostname
15 | if (hostname.includes('github')) {
16 | MAPPING[hostname] = TextareaMarkdown
17 | }
18 |
19 | export default function getDomainOverriddenField($element) {
20 | let hostname = window.location.hostname
21 | return MAPPING[hostname]
22 | }
23 |
--------------------------------------------------------------------------------
/src/content/index.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import * as Fields from './fields'
3 |
4 | $(document).on('keypress focus', Fields.SELECTOR, (e) => {
5 | Fields.setup($(e.target))
6 | })
7 |
--------------------------------------------------------------------------------
/src/content/lib/analytics.js:
--------------------------------------------------------------------------------
1 | import * as Extension from 'content/lib/extension'
2 |
3 | export function sendEvent(category, action, label, value) {
4 | Extension.sendMessage({
5 | method: "sendEvent",
6 | category: category,
7 | action: action,
8 | label: label,
9 | value: value
10 | })
11 | }
12 |
--------------------------------------------------------------------------------
/src/content/lib/at.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 | import 'content/vendor/jquery.atwho.js'
3 | import 'content/vendor/jquery.atwho.scss'
4 | import * as Commands from 'content/commands'
5 |
6 | export function setup($element) {
7 | $element.atwho({
8 | at: "/",
9 | data: Commands.getAtData(),
10 | displayTpl: "
${name}
",
11 | insertTpl: "/${name}",
12 | displayTimeout: 300,
13 | suffix: ""
14 | })
15 | }
16 |
--------------------------------------------------------------------------------
/src/content/lib/extension.js:
--------------------------------------------------------------------------------
1 | export function isExtension() {
2 | return !!(window.chrome && window.chrome.runtime && window.chrome.runtime.getManifest)
3 | }
4 |
5 | export function getVersion() {
6 | if (isExtension()) {
7 | return chrome.runtime.getManifest().version
8 | }
9 | }
10 |
11 | export function sendMessage() {
12 | if (isExtension()) {
13 | chrome.runtime.sendMessage.apply(chrome.runtime, arguments)
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/content/lib/imgur.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery'
2 |
3 | const UPLOAD_URL = 'https://api.imgur.com/3/image'
4 | const IMAGE_URL = 'https://imgur.com/gallery'
5 | const CLIENT_ID = '0fc1ab7322aa20c'
6 |
7 | let Imgur = {
8 | upload: (options) => {
9 | options = options || {}
10 |
11 | let type = options.type || 'URL'
12 | let image = options.data
13 |
14 | return $.ajax({
15 | url: UPLOAD_URL,
16 | type: 'POST',
17 | headers: {
18 | Authorization: "Client-ID " + CLIENT_ID,
19 | Accept: 'application/json'
20 | },
21 | data: {
22 | image: image,
23 | type: type
24 | }
25 | }).then((data) => {
26 | return data.data
27 | })
28 | }
29 | }
30 |
31 | export default Imgur
32 |
--------------------------------------------------------------------------------
/src/content/lib/mixin.js:
--------------------------------------------------------------------------------
1 | export default function mixin(target, source) {
2 | target = target.prototype; source = source.prototype;
3 |
4 | Object.getOwnPropertyNames(source).forEach(function (name) {
5 | if (name !== "constructor") Object.defineProperty(target, name,
6 | Object.getOwnPropertyDescriptor(source, name));
7 | });
8 | }
9 |
--------------------------------------------------------------------------------
/src/content/styles/_settings.scss:
--------------------------------------------------------------------------------
1 | $color-red: #FF475E;
2 |
--------------------------------------------------------------------------------
/src/content/types/Image.js:
--------------------------------------------------------------------------------
1 | class Image {
2 | constructor(props) {
3 | this.src = props.src
4 | this.alt = props.alt
5 | this.url = props.url
6 | }
7 | }
8 |
9 | export default Image
10 |
--------------------------------------------------------------------------------
/src/content/types/Link.js:
--------------------------------------------------------------------------------
1 | class Link {
2 | constructor(props) {
3 | this.href = props.href
4 | }
5 | }
6 |
7 | export default Link
8 |
--------------------------------------------------------------------------------
/src/content/types/Redirect.js:
--------------------------------------------------------------------------------
1 | class Redirect {
2 | constructor(props) {
3 | this.url = props.url
4 | this.target = props.target
5 | }
6 | }
7 |
8 | export default Redirect
9 |
--------------------------------------------------------------------------------
/src/content/types/index.js:
--------------------------------------------------------------------------------
1 | import Image from './Image'
2 | import Redirect from './Redirect'
3 | import Link from './Link'
4 | export { Image, Redirect, Link }
5 |
--------------------------------------------------------------------------------
/src/content/vendor/jquery.atwho.js:
--------------------------------------------------------------------------------
1 | /**
2 | * at.js - 1.4.0
3 | * Copyright (c) 2016 chord.luo
;
4 | * Homepage: http://ichord.github.com/At.js
5 | * License: MIT
6 | */
7 | (function (root, factory) {
8 | if (typeof define === 'function' && define.amd) {
9 | // AMD. Register as an anonymous module unless amdModuleId is set
10 | define(["jquery"], function (a0) {
11 | return (factory(a0));
12 | });
13 | } else if (typeof exports === 'object') {
14 | // Node. Does not work with strict CommonJS, but
15 | // only CommonJS-like environments that support module.exports,
16 | // like Node.
17 | module.exports = factory(require("jquery"));
18 | } else {
19 | factory(jQuery);
20 | }
21 | }(this, function ($) {
22 | var DEFAULT_CALLBACKS, KEY_CODE;
23 |
24 | KEY_CODE = {
25 | DOWN: 40,
26 | UP: 38,
27 | ESC: 27,
28 | TAB: 9,
29 | ENTER: 13,
30 | CTRL: 17,
31 | A: 65,
32 | P: 80,
33 | N: 78,
34 | LEFT: 37,
35 | UP: 38,
36 | RIGHT: 39,
37 | DOWN: 40,
38 | BACKSPACE: 8,
39 | SPACE: 32
40 | };
41 |
42 | DEFAULT_CALLBACKS = {
43 | beforeSave: function(data) {
44 | return Controller.arrayToDefaultHash(data);
45 | },
46 | matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
47 | var _a, _y, match, regexp, space;
48 | flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
49 | if (should_startWithSpace) {
50 | flag = '(?:^|\\s)' + flag;
51 | }
52 | _a = decodeURI("%C3%80");
53 | _y = decodeURI("%C3%BF");
54 | space = acceptSpaceBar ? "\ " : "";
55 | regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
56 | match = regexp.exec(subtext);
57 | if (match) {
58 | return match[2] || match[1];
59 | } else {
60 | return null;
61 | }
62 | },
63 | filter: function(query, data, searchKey) {
64 | var _results, i, item, len;
65 | _results = [];
66 | for (i = 0, len = data.length; i < len; i++) {
67 | item = data[i];
68 | if (~new String(item[searchKey]).toLowerCase().indexOf(query.toLowerCase())) {
69 | _results.push(item);
70 | }
71 | }
72 | return _results;
73 | },
74 | remoteFilter: null,
75 | sorter: function(query, items, searchKey) {
76 | var _results, i, item, len;
77 | if (!query) {
78 | return items;
79 | }
80 | _results = [];
81 | for (i = 0, len = items.length; i < len; i++) {
82 | item = items[i];
83 | item.atwho_order = new String(item[searchKey]).toLowerCase().indexOf(query.toLowerCase());
84 | if (item.atwho_order > -1) {
85 | _results.push(item);
86 | }
87 | }
88 | return _results.sort(function(a, b) {
89 | return a.atwho_order - b.atwho_order;
90 | });
91 | },
92 | tplEval: function(tpl, map) {
93 | var error, error1, template;
94 | template = tpl;
95 | try {
96 | if (typeof tpl !== 'string') {
97 | template = tpl(map);
98 | }
99 | return template.replace(/\$\{([^\}]*)\}/g, function(tag, key, pos) {
100 | return map[key];
101 | });
102 | } catch (error1) {
103 | error = error1;
104 | return "";
105 | }
106 | },
107 | highlighter: function(li, query) {
108 | var regexp;
109 | if (!query) {
110 | return li;
111 | }
112 | regexp = new RegExp(">\\s*(\\w*?)(" + query.replace("+", "\\+") + ")(\\w*)\\s*<", 'ig');
113 | return li.replace(regexp, function(str, $1, $2, $3) {
114 | return '> ' + $1 + '' + $2 + '' + $3 + ' <';
115 | });
116 | },
117 | beforeInsert: function(value, $li) {
118 | return value;
119 | },
120 | beforeReposition: function(offset) {
121 | return offset;
122 | },
123 | afterMatchFailed: function(at, el) {}
124 | };
125 |
126 | var App;
127 |
128 | App = (function() {
129 | function App(inputor) {
130 | this.currentFlag = null;
131 | this.controllers = {};
132 | this.aliasMaps = {};
133 | this.$inputor = $(inputor);
134 | this.setupRootElement();
135 | this.listen();
136 | }
137 |
138 | App.prototype.createContainer = function(doc) {
139 | var ref;
140 | if ((ref = this.$el) != null) {
141 | ref.remove();
142 | }
143 | return $(doc.body).append(this.$el = $(""));
144 | };
145 |
146 | App.prototype.setupRootElement = function(iframe, asRoot) {
147 | var error, error1;
148 | if (asRoot == null) {
149 | asRoot = false;
150 | }
151 | if (iframe) {
152 | this.window = iframe.contentWindow;
153 | this.document = iframe.contentDocument || this.window.document;
154 | this.iframe = iframe;
155 | } else {
156 | this.document = this.$inputor[0].ownerDocument;
157 | this.window = this.document.defaultView || this.document.parentWindow;
158 | try {
159 | this.iframe = this.window.frameElement;
160 | } catch (error1) {
161 | error = error1;
162 | this.iframe = null;
163 | if ($.fn.atwho.debug) {
164 | throw new Error("iframe auto-discovery is failed.\nPlease use `setIframe` to set the target iframe manually.\n" + error);
165 | }
166 | }
167 | }
168 | return this.createContainer((this.iframeAsRoot = asRoot) ? this.document : document);
169 | };
170 |
171 | App.prototype.controller = function(at) {
172 | var c, current, currentFlag, ref;
173 | if (this.aliasMaps[at]) {
174 | current = this.controllers[this.aliasMaps[at]];
175 | } else {
176 | ref = this.controllers;
177 | for (currentFlag in ref) {
178 | c = ref[currentFlag];
179 | if (currentFlag === at) {
180 | current = c;
181 | break;
182 | }
183 | }
184 | }
185 | if (current) {
186 | return current;
187 | } else {
188 | return this.controllers[this.currentFlag];
189 | }
190 | };
191 |
192 | App.prototype.setContextFor = function(at) {
193 | this.currentFlag = at;
194 | return this;
195 | };
196 |
197 | App.prototype.reg = function(flag, setting) {
198 | var base, controller;
199 | controller = (base = this.controllers)[flag] || (base[flag] = this.$inputor.is('[contentEditable]') ? new EditableController(this, flag) : new TextareaController(this, flag));
200 | if (setting.alias) {
201 | this.aliasMaps[setting.alias] = flag;
202 | }
203 | controller.init(setting);
204 | return this;
205 | };
206 |
207 | App.prototype.listen = function() {
208 | return this.$inputor.on('compositionstart', (function(_this) {
209 | return function(e) {
210 | var ref;
211 | if ((ref = _this.controller()) != null) {
212 | ref.view.hide();
213 | }
214 | _this.isComposing = true;
215 | return null;
216 | };
217 | })(this)).on('compositionend', (function(_this) {
218 | return function(e) {
219 | _this.isComposing = false;
220 | return null;
221 | };
222 | })(this)).on('keyup.atwhoInner', (function(_this) {
223 | return function(e) {
224 | return _this.onKeyup(e);
225 | };
226 | })(this)).on('keydown.atwhoInner', (function(_this) {
227 | return function(e) {
228 | return _this.onKeydown(e);
229 | };
230 | })(this)).on('blur.atwhoInner', (function(_this) {
231 | return function(e) {
232 | var c;
233 | if (c = _this.controller()) {
234 | c.expectedQueryCBId = null;
235 | return c.view.hide(e, c.getOpt("displayTimeout"));
236 | }
237 | };
238 | })(this)).on('click.atwhoInner', (function(_this) {
239 | return function(e) {
240 | return _this.dispatch(e);
241 | };
242 | })(this)).on('scroll.atwhoInner', (function(_this) {
243 | return function() {
244 | var lastScrollTop;
245 | lastScrollTop = _this.$inputor.scrollTop();
246 | return function(e) {
247 | var currentScrollTop, ref;
248 | currentScrollTop = e.target.scrollTop;
249 | if (lastScrollTop !== currentScrollTop) {
250 | if ((ref = _this.controller()) != null) {
251 | ref.view.hide(e);
252 | }
253 | }
254 | lastScrollTop = currentScrollTop;
255 | return true;
256 | };
257 | };
258 | })(this)());
259 | };
260 |
261 | App.prototype.shutdown = function() {
262 | var _, c, ref;
263 | ref = this.controllers;
264 | for (_ in ref) {
265 | c = ref[_];
266 | c.destroy();
267 | delete this.controllers[_];
268 | }
269 | this.$inputor.off('.atwhoInner');
270 | return this.$el.remove();
271 | };
272 |
273 | App.prototype.dispatch = function(e) {
274 | var _, c, ref, results;
275 | ref = this.controllers;
276 | results = [];
277 | for (_ in ref) {
278 | c = ref[_];
279 | results.push(c.lookUp(e));
280 | }
281 | return results;
282 | };
283 |
284 | App.prototype.onKeyup = function(e) {
285 | var ref;
286 | switch (e.keyCode) {
287 | case KEY_CODE.ESC:
288 | e.preventDefault();
289 | if ((ref = this.controller()) != null) {
290 | ref.view.hide();
291 | }
292 | break;
293 | case KEY_CODE.DOWN:
294 | case KEY_CODE.UP:
295 | case KEY_CODE.CTRL:
296 | case KEY_CODE.ENTER:
297 | $.noop();
298 | break;
299 | case KEY_CODE.P:
300 | case KEY_CODE.N:
301 | if (!e.ctrlKey) {
302 | this.dispatch(e);
303 | }
304 | break;
305 | default:
306 | this.dispatch(e);
307 | }
308 | };
309 |
310 | App.prototype.onKeydown = function(e) {
311 | var ref, view;
312 | view = (ref = this.controller()) != null ? ref.view : void 0;
313 | if (!(view && view.visible())) {
314 | return;
315 | }
316 | switch (e.keyCode) {
317 | case KEY_CODE.ESC:
318 | e.preventDefault();
319 | view.hide(e);
320 | break;
321 | case KEY_CODE.UP:
322 | e.preventDefault();
323 | view.prev();
324 | break;
325 | case KEY_CODE.DOWN:
326 | e.preventDefault();
327 | view.next();
328 | break;
329 | case KEY_CODE.P:
330 | if (!e.ctrlKey) {
331 | return;
332 | }
333 | e.preventDefault();
334 | view.prev();
335 | break;
336 | case KEY_CODE.N:
337 | if (!e.ctrlKey) {
338 | return;
339 | }
340 | e.preventDefault();
341 | view.next();
342 | break;
343 | case KEY_CODE.TAB:
344 | case KEY_CODE.ENTER:
345 | case KEY_CODE.SPACE:
346 | if (!view.visible()) {
347 | return;
348 | }
349 | if (!this.controller().getOpt('spaceSelectsMatch') && e.keyCode === KEY_CODE.SPACE) {
350 | return;
351 | }
352 | if (!this.controller().getOpt('tabSelectsMatch') && e.keyCode === KEY_CODE.TAB) {
353 | return;
354 | }
355 | if (view.highlighted()) {
356 | e.preventDefault();
357 | view.choose(e);
358 | } else {
359 | view.hide(e);
360 | }
361 | break;
362 | default:
363 | $.noop();
364 | }
365 | };
366 |
367 | return App;
368 |
369 | })();
370 |
371 | var Controller,
372 | slice = [].slice;
373 |
374 | Controller = (function() {
375 | Controller.prototype.uid = function() {
376 | return (Math.random().toString(16) + "000000000").substr(2, 8) + (new Date().getTime());
377 | };
378 |
379 | function Controller(app, at1) {
380 | this.app = app;
381 | this.at = at1;
382 | this.$inputor = this.app.$inputor;
383 | this.id = this.$inputor[0].id || this.uid();
384 | this.id = this.id.replace(':', '\\:')
385 | this.expectedQueryCBId = null;
386 | this.setting = null;
387 | this.query = null;
388 | this.pos = 0;
389 | this.range = null;
390 | if ((this.$el = $("#atwho-ground-" + this.id, this.app.$el)).length === 0) {
391 | this.app.$el.append(this.$el = $(""));
392 | }
393 | this.model = new Model(this);
394 | this.view = new View(this);
395 | }
396 |
397 | Controller.prototype.init = function(setting) {
398 | this.setting = $.extend({}, this.setting || $.fn.atwho["default"], setting);
399 | this.view.init();
400 | return this.model.reload(this.setting.data);
401 | };
402 |
403 | Controller.prototype.destroy = function() {
404 | this.trigger('beforeDestroy');
405 | this.model.destroy();
406 | this.view.destroy();
407 | return this.$el.remove();
408 | };
409 |
410 | Controller.prototype.callDefault = function() {
411 | var args, error, error1, funcName;
412 | funcName = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
413 | try {
414 | return DEFAULT_CALLBACKS[funcName].apply(this, args);
415 | } catch (error1) {
416 | error = error1;
417 | return $.error(error + " Or maybe At.js doesn't have function " + funcName);
418 | }
419 | };
420 |
421 | Controller.prototype.trigger = function(name, data) {
422 | var alias, eventName;
423 | if (data == null) {
424 | data = [];
425 | }
426 | data.push(this);
427 | alias = this.getOpt('alias');
428 | eventName = alias ? name + "-" + alias + ".atwho" : name + ".atwho";
429 | return this.$inputor.trigger(eventName, data);
430 | };
431 |
432 | Controller.prototype.callbacks = function(funcName) {
433 | return this.getOpt("callbacks")[funcName] || DEFAULT_CALLBACKS[funcName];
434 | };
435 |
436 | Controller.prototype.getOpt = function(at, default_value) {
437 | var e, error1;
438 | try {
439 | return this.setting[at];
440 | } catch (error1) {
441 | e = error1;
442 | return null;
443 | }
444 | };
445 |
446 | Controller.prototype.insertContentFor = function($li) {
447 | var data, tpl;
448 | tpl = this.getOpt('insertTpl');
449 | data = $.extend({}, $li.data('item-data'), {
450 | 'atwho-at': this.at
451 | });
452 | return this.callbacks("tplEval").call(this, tpl, data, "onInsert");
453 | };
454 |
455 | Controller.prototype.renderView = function(data) {
456 | var searchKey;
457 | searchKey = this.getOpt("searchKey");
458 | data = this.callbacks("sorter").call(this, this.query.text, data.slice(0, 1001), searchKey);
459 | return this.view.render(data.slice(0, this.getOpt('limit')));
460 | };
461 |
462 | Controller.arrayToDefaultHash = function(data) {
463 | var i, item, len, results;
464 | if (!$.isArray(data)) {
465 | return data;
466 | }
467 | results = [];
468 | for (i = 0, len = data.length; i < len; i++) {
469 | item = data[i];
470 | if ($.isPlainObject(item)) {
471 | results.push(item);
472 | } else {
473 | results.push({
474 | name: item
475 | });
476 | }
477 | }
478 | return results;
479 | };
480 |
481 | Controller.prototype.lookUp = function(e) {
482 | var query, wait;
483 | if (e && e.type === 'click' && !this.getOpt('lookUpOnClick')) {
484 | return;
485 | }
486 | if (this.getOpt('suspendOnComposing') && this.app.isComposing) {
487 | return;
488 | }
489 | query = this.catchQuery(e);
490 | if (!query) {
491 | this.expectedQueryCBId = null;
492 | return query;
493 | }
494 | this.app.setContextFor(this.at);
495 | if (wait = this.getOpt('delay')) {
496 | this._delayLookUp(query, wait);
497 | } else {
498 | this._lookUp(query);
499 | }
500 | return query;
501 | };
502 |
503 | Controller.prototype._delayLookUp = function(query, wait) {
504 | var now, remaining;
505 | now = Date.now ? Date.now() : new Date().getTime();
506 | this.previousCallTime || (this.previousCallTime = now);
507 | remaining = wait - (now - this.previousCallTime);
508 | if ((0 < remaining && remaining < wait)) {
509 | this.previousCallTime = now;
510 | this._stopDelayedCall();
511 | return this.delayedCallTimeout = setTimeout((function(_this) {
512 | return function() {
513 | _this.previousCallTime = 0;
514 | _this.delayedCallTimeout = null;
515 | return _this._lookUp(query);
516 | };
517 | })(this), wait);
518 | } else {
519 | this._stopDelayedCall();
520 | if (this.previousCallTime !== now) {
521 | this.previousCallTime = 0;
522 | }
523 | return this._lookUp(query);
524 | }
525 | };
526 |
527 | Controller.prototype._stopDelayedCall = function() {
528 | if (this.delayedCallTimeout) {
529 | clearTimeout(this.delayedCallTimeout);
530 | return this.delayedCallTimeout = null;
531 | }
532 | };
533 |
534 | Controller.prototype._generateQueryCBId = function() {
535 | return {};
536 | };
537 |
538 | Controller.prototype._lookUp = function(query) {
539 | var _callback;
540 | _callback = function(queryCBId, data) {
541 | if (queryCBId !== this.expectedQueryCBId) {
542 | return;
543 | }
544 | if (data && data.length > 0) {
545 | return this.renderView(this.constructor.arrayToDefaultHash(data));
546 | } else {
547 | return this.view.hide();
548 | }
549 | };
550 | this.expectedQueryCBId = this._generateQueryCBId();
551 | return this.model.query(query.text, $.proxy(_callback, this, this.expectedQueryCBId));
552 | };
553 |
554 | return Controller;
555 |
556 | })();
557 |
558 | var TextareaController,
559 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
560 | hasProp = {}.hasOwnProperty;
561 |
562 | TextareaController = (function(superClass) {
563 | extend(TextareaController, superClass);
564 |
565 | function TextareaController() {
566 | return TextareaController.__super__.constructor.apply(this, arguments);
567 | }
568 |
569 | TextareaController.prototype.catchQuery = function() {
570 | var caretPos, content, end, isString, query, start, subtext;
571 | content = this.$inputor.val();
572 | caretPos = this.$inputor.caret('pos', {
573 | iframe: this.app.iframe
574 | });
575 | subtext = content.slice(0, caretPos);
576 | query = this.callbacks("matcher").call(this, this.at, subtext, this.getOpt('startWithSpace'));
577 | isString = typeof query === 'string';
578 | if (isString && query.length < this.getOpt('minLen', 0)) {
579 | return;
580 | }
581 | if (isString && query.length <= this.getOpt('maxLen', 20)) {
582 | start = caretPos - query.length;
583 | end = start + query.length;
584 | this.pos = start;
585 | query = {
586 | 'text': query,
587 | 'headPos': start,
588 | 'endPos': end
589 | };
590 | this.trigger("matched", [this.at, query.text]);
591 | } else {
592 | query = null;
593 | this.view.hide();
594 | }
595 | return this.query = query;
596 | };
597 |
598 | TextareaController.prototype.rect = function() {
599 | var c, iframeOffset, scaleBottom;
600 | if (!(c = this.$inputor.caret('offset', this.pos - 1, {
601 | iframe: this.app.iframe
602 | }))) {
603 | return;
604 | }
605 | if (this.app.iframe && !this.app.iframeAsRoot) {
606 | iframeOffset = $(this.app.iframe).offset();
607 | c.left += iframeOffset.left;
608 | c.top += iframeOffset.top;
609 | }
610 | scaleBottom = this.app.document.selection ? 0 : 2;
611 | return {
612 | left: c.left,
613 | top: c.top,
614 | bottom: c.top + c.height + scaleBottom
615 | };
616 | };
617 |
618 | TextareaController.prototype.insert = function(content, $li) {
619 | var $inputor, source, startStr, suffix, text;
620 | $inputor = this.$inputor;
621 | source = $inputor.val();
622 | startStr = source.slice(0, Math.max(this.query.headPos - this.at.length, 0));
623 | suffix = (suffix = this.getOpt('suffix')) === "" ? suffix : suffix || " ";
624 | content += suffix;
625 | text = "" + startStr + content + (source.slice(this.query['endPos'] || 0));
626 | $inputor.val(text);
627 | $inputor.caret('pos', startStr.length + content.length, {
628 | iframe: this.app.iframe
629 | });
630 | if (!$inputor.is(':focus')) {
631 | $inputor.focus();
632 | }
633 | return $inputor.change();
634 | };
635 |
636 | return TextareaController;
637 |
638 | })(Controller);
639 |
640 | var EditableController,
641 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
642 | hasProp = {}.hasOwnProperty;
643 |
644 | EditableController = (function(superClass) {
645 | extend(EditableController, superClass);
646 |
647 | function EditableController() {
648 | return EditableController.__super__.constructor.apply(this, arguments);
649 | }
650 |
651 | EditableController.prototype._getRange = function() {
652 | var sel;
653 | sel = this.app.window.getSelection();
654 | if (sel.rangeCount > 0) {
655 | return sel.getRangeAt(0);
656 | }
657 | };
658 |
659 | EditableController.prototype._setRange = function(position, node, range) {
660 | if (range == null) {
661 | range = this._getRange();
662 | }
663 | if (!range) {
664 | return;
665 | }
666 | node = $(node)[0];
667 | if (position === 'after') {
668 | range.setEndAfter(node);
669 | range.setStartAfter(node);
670 | } else {
671 | range.setEndBefore(node);
672 | range.setStartBefore(node);
673 | }
674 | range.collapse(false);
675 | return this._clearRange(range);
676 | };
677 |
678 | EditableController.prototype._clearRange = function(range) {
679 | var sel;
680 | if (range == null) {
681 | range = this._getRange();
682 | }
683 | sel = this.app.window.getSelection();
684 | if (this.ctrl_a_pressed == null) {
685 | sel.removeAllRanges();
686 | return sel.addRange(range);
687 | }
688 | };
689 |
690 | EditableController.prototype._movingEvent = function(e) {
691 | var ref;
692 | return e.type === 'click' || ((ref = e.which) === KEY_CODE.RIGHT || ref === KEY_CODE.LEFT || ref === KEY_CODE.UP || ref === KEY_CODE.DOWN);
693 | };
694 |
695 | EditableController.prototype._unwrap = function(node) {
696 | var next;
697 | node = $(node).unwrap().get(0);
698 | if ((next = node.nextSibling) && next.nodeValue) {
699 | node.nodeValue += next.nodeValue;
700 | $(next).remove();
701 | }
702 | return node;
703 | };
704 |
705 | EditableController.prototype.catchQuery = function(e) {
706 | var $inserted, $query, _range, index, inserted, isString, lastNode, matched, offset, query, query_content, range;
707 | if (!(range = this._getRange())) {
708 | return;
709 | }
710 | if (!range.collapsed) {
711 | return;
712 | }
713 | if (e.which === KEY_CODE.ENTER) {
714 | ($query = $(range.startContainer).closest('.atwho-query')).contents().unwrap();
715 | if ($query.is(':empty')) {
716 | $query.remove();
717 | }
718 | ($query = $(".atwho-query", this.app.document)).text($query.text()).contents().last().unwrap();
719 | this._clearRange();
720 | return;
721 | }
722 | if (/firefox/i.test(navigator.userAgent)) {
723 | if ($(range.startContainer).is(this.$inputor)) {
724 | this._clearRange();
725 | return;
726 | }
727 | if (e.which === KEY_CODE.BACKSPACE && range.startContainer.nodeType === document.ELEMENT_NODE && (offset = range.startOffset - 1) >= 0) {
728 | _range = range.cloneRange();
729 | _range.setStart(range.startContainer, offset);
730 | if ($(_range.cloneContents()).contents().last().is('.atwho-inserted')) {
731 | inserted = $(range.startContainer).contents().get(offset);
732 | this._setRange('after', $(inserted).contents().last());
733 | }
734 | } else if (e.which === KEY_CODE.LEFT && range.startContainer.nodeType === document.TEXT_NODE) {
735 | $inserted = $(range.startContainer.previousSibling);
736 | if ($inserted.is('.atwho-inserted') && range.startOffset === 0) {
737 | this._setRange('after', $inserted.contents().last());
738 | }
739 | }
740 | }
741 | $(range.startContainer).closest('.atwho-inserted').addClass('atwho-query').siblings().removeClass('atwho-query');
742 | if (($query = $(".atwho-query", this.app.document)).length > 0 && $query.is(':empty') && $query.text().length === 0) {
743 | $query.remove();
744 | }
745 | if (!this._movingEvent(e)) {
746 | $query.removeClass('atwho-inserted');
747 | }
748 | if ($query.length > 0) {
749 | switch (e.which) {
750 | case KEY_CODE.LEFT:
751 | this._setRange('before', $query.get(0), range);
752 | $query.removeClass('atwho-query');
753 | return;
754 | case KEY_CODE.RIGHT:
755 | this._setRange('after', $query.get(0).nextSibling, range);
756 | $query.removeClass('atwho-query');
757 | return;
758 | }
759 | }
760 | if ($query.length > 0 && (query_content = $query.attr('data-atwho-at-query'))) {
761 | $query.empty().html(query_content).attr('data-atwho-at-query', null);
762 | this._setRange('after', $query.get(0), range);
763 | }
764 | _range = range.cloneRange();
765 | _range.setStart(range.startContainer, 0);
766 | matched = this.callbacks("matcher").call(this, this.at, _range.toString(), this.getOpt('startWithSpace'));
767 | isString = typeof matched === 'string';
768 | if ($query.length === 0 && isString && (index = range.startOffset - this.at.length - matched.length) >= 0) {
769 | range.setStart(range.startContainer, index);
770 | $query = $('', this.app.document).attr(this.getOpt("editableAtwhoQueryAttrs")).addClass('atwho-query');
771 | range.surroundContents($query.get(0));
772 | lastNode = $query.contents().last().get(0);
773 | if (/firefox/i.test(navigator.userAgent)) {
774 | range.setStart(lastNode, lastNode.length);
775 | range.setEnd(lastNode, lastNode.length);
776 | this._clearRange(range);
777 | } else {
778 | this._setRange('after', lastNode, range);
779 | }
780 | }
781 | if (isString && matched.length < this.getOpt('minLen', 0)) {
782 | return;
783 | }
784 | if (isString && matched.length <= this.getOpt('maxLen', 20)) {
785 | query = {
786 | text: matched,
787 | el: $query
788 | };
789 | this.trigger("matched", [this.at, query.text]);
790 | return this.query = query;
791 | } else {
792 | this.view.hide();
793 | this.query = {
794 | el: $query
795 | };
796 | if ($query.text().indexOf(this.at) >= 0) {
797 | if (this._movingEvent(e) && $query.hasClass('atwho-inserted')) {
798 | $query.removeClass('atwho-query');
799 | } else if (false !== this.callbacks('afterMatchFailed').call(this, this.at, $query)) {
800 | this._setRange("after", this._unwrap($query.text($query.text()).contents().first()));
801 | }
802 | }
803 | return null;
804 | }
805 | };
806 |
807 | EditableController.prototype.rect = function() {
808 | if (this.query.el.length == 0) {
809 | return
810 | }
811 |
812 | var $iframe, iframeOffset, rect;
813 | rect = this.query.el.offset();
814 | if (this.app.iframe && !this.app.iframeAsRoot) {
815 | iframeOffset = ($iframe = $(this.app.iframe)).offset();
816 | rect.left += iframeOffset.left - this.$inputor.scrollLeft();
817 | rect.top += iframeOffset.top - this.$inputor.scrollTop();
818 | }
819 | rect.bottom = rect.top + this.query.el.height();
820 | return rect;
821 | };
822 |
823 | EditableController.prototype.insert = function(content, $li) {
824 | var data, range, suffix, suffixNode;
825 | suffix = (suffix = this.getOpt('suffix')) === "" ? suffix : suffix || "\u00A0";
826 | data = $li.data('item-data');
827 | this.query.el.removeClass('atwho-query').addClass('atwho-inserted').html(content).attr('data-atwho-at-query', "" + data['atwho-at'] + this.query.text);
828 | if (range = this._getRange()) {
829 | range.setEndAfter(this.query.el[0]);
830 | range.collapse(false);
831 | range.insertNode(suffixNode = this.app.document.createTextNode(suffix));
832 | this._setRange('after', suffixNode, range);
833 | }
834 | if (!this.$inputor.is(':focus')) {
835 | this.$inputor.focus();
836 | }
837 | return this.$inputor.change();
838 | };
839 |
840 | return EditableController;
841 |
842 | })(Controller);
843 |
844 | var Model;
845 |
846 | Model = (function() {
847 | function Model(context) {
848 | this.context = context;
849 | this.at = this.context.at;
850 | this.storage = this.context.$inputor;
851 | }
852 |
853 | Model.prototype.destroy = function() {
854 | return this.storage.data(this.at, null);
855 | };
856 |
857 | Model.prototype.saved = function() {
858 | return this.fetch() > 0;
859 | };
860 |
861 | Model.prototype.query = function(query, callback) {
862 | var _remoteFilter, data, searchKey;
863 | data = this.fetch();
864 | searchKey = this.context.getOpt("searchKey");
865 | data = this.context.callbacks('filter').call(this.context, query, data, searchKey) || [];
866 | _remoteFilter = this.context.callbacks('remoteFilter');
867 | if (data.length > 0 || (!_remoteFilter && data.length === 0)) {
868 | return callback(data);
869 | } else {
870 | return _remoteFilter.call(this.context, query, callback);
871 | }
872 | };
873 |
874 | Model.prototype.fetch = function() {
875 | return this.storage.data(this.at) || [];
876 | };
877 |
878 | Model.prototype.save = function(data) {
879 | return this.storage.data(this.at, this.context.callbacks("beforeSave").call(this.context, data || []));
880 | };
881 |
882 | Model.prototype.load = function(data) {
883 | if (!(this.saved() || !data)) {
884 | return this._load(data);
885 | }
886 | };
887 |
888 | Model.prototype.reload = function(data) {
889 | return this._load(data);
890 | };
891 |
892 | Model.prototype._load = function(data) {
893 | if (typeof data === "string") {
894 | return $.ajax(data, {
895 | dataType: "json"
896 | }).done((function(_this) {
897 | return function(data) {
898 | return _this.save(data);
899 | };
900 | })(this));
901 | } else {
902 | return this.save(data);
903 | }
904 | };
905 |
906 | return Model;
907 |
908 | })();
909 |
910 | var View;
911 |
912 | View = (function() {
913 | function View(context) {
914 | this.context = context;
915 | this.$el = $(``);
916 | this.$elUl = this.$el.children();
917 | this.timeoutID = null;
918 | this.context.$el.append(this.$el);
919 | this.bindEvent();
920 | }
921 |
922 | View.prototype.init = function() {
923 | var header_tpl, id;
924 | id = this.context.getOpt("alias") || this.context.at.charCodeAt(0);
925 | header_tpl = this.context.getOpt("headerTpl");
926 | if (header_tpl && this.$el.children().length === 1) {
927 | this.$el.prepend(header_tpl);
928 | }
929 | return this.$el.attr({
930 | 'id': "at-view-" + id
931 | });
932 | };
933 |
934 | View.prototype.destroy = function() {
935 | return this.$el.remove();
936 | };
937 |
938 | View.prototype.bindEvent = function() {
939 | var $menu, lastCoordX, lastCoordY;
940 | $menu = this.$el.find('ul');
941 | lastCoordX = 0;
942 | lastCoordY = 0;
943 | return $menu.on('mousemove.atwho-view', 'li', (function(_this) {
944 | return function(e) {
945 | var $cur;
946 | if (lastCoordX === e.clientX && lastCoordY === e.clientY) {
947 | return;
948 | }
949 | lastCoordX = e.clientX;
950 | lastCoordY = e.clientY;
951 | $cur = $(e.currentTarget);
952 | if ($cur.hasClass('cur')) {
953 | return;
954 | }
955 | $menu.find('.cur').removeClass('cur');
956 | return $cur.addClass('cur');
957 | };
958 | })(this)).on('click.atwho-view', 'li', (function(_this) {
959 | return function(e) {
960 | $menu.find('.cur').removeClass('cur');
961 | $(e.currentTarget).addClass('cur');
962 | _this.choose(e);
963 | return e.preventDefault();
964 | };
965 | })(this));
966 | };
967 |
968 | View.prototype.visible = function() {
969 | return this.$el.is(":visible");
970 | };
971 |
972 | View.prototype.highlighted = function() {
973 | return this.$el.find(".cur").length > 0;
974 | };
975 |
976 | View.prototype.choose = function(e) {
977 | var $li, content;
978 | if (($li = this.$el.find(".cur")).length) {
979 | content = this.context.insertContentFor($li);
980 | this.context._stopDelayedCall();
981 | this.context.insert(this.context.callbacks("beforeInsert").call(this.context, content, $li), $li);
982 | this.context.trigger("inserted", [$li, e]);
983 | this.hide(e);
984 | }
985 | if (this.context.getOpt("hideWithoutSuffix")) {
986 | return this.stopShowing = true;
987 | }
988 | };
989 |
990 | View.prototype.reposition = function(rect) {
991 | var _window, offset, overflowOffset, ref;
992 | _window = this.context.app.iframeAsRoot ? this.context.app.window : window;
993 | if (rect.bottom + this.$el.height() - $(_window).scrollTop() > $(_window).height()) {
994 | rect.bottom = rect.top - this.$el.height();
995 | }
996 | if (rect.left > (overflowOffset = $(_window).width() - this.$el.width() - 5)) {
997 | rect.left = overflowOffset;
998 | }
999 | offset = {
1000 | left: rect.left,
1001 | top: rect.bottom
1002 | };
1003 | if ((ref = this.context.callbacks("beforeReposition")) != null) {
1004 | ref.call(this.context, offset);
1005 | }
1006 | this.$el.offset(offset);
1007 | return this.context.trigger("reposition", [offset]);
1008 | };
1009 |
1010 | View.prototype.next = function() {
1011 | var cur, next, nextEl, offset;
1012 | cur = this.$el.find('.cur').removeClass('cur');
1013 | next = cur.next();
1014 | if (!next.length) {
1015 | next = this.$el.find('li:first');
1016 | }
1017 | next.addClass('cur');
1018 | nextEl = next[0];
1019 | offset = nextEl.offsetTop + nextEl.offsetHeight + (nextEl.nextSibling ? nextEl.nextSibling.offsetHeight : 0);
1020 | return this.scrollTop(Math.max(0, offset - this.$el.height()));
1021 | };
1022 |
1023 | View.prototype.prev = function() {
1024 | var cur, offset, prev, prevEl;
1025 | cur = this.$el.find('.cur').removeClass('cur');
1026 | prev = cur.prev();
1027 | if (!prev.length) {
1028 | prev = this.$el.find('li:last');
1029 | }
1030 | prev.addClass('cur');
1031 | prevEl = prev[0];
1032 | offset = prevEl.offsetTop + prevEl.offsetHeight + (prevEl.nextSibling ? prevEl.nextSibling.offsetHeight : 0);
1033 | return this.scrollTop(Math.max(0, offset - this.$el.height()));
1034 | };
1035 |
1036 | View.prototype.scrollTop = function(scrollTop) {
1037 | var scrollDuration;
1038 | scrollDuration = this.context.getOpt('scrollDuration');
1039 | if (scrollDuration) {
1040 | return this.$elUl.animate({
1041 | scrollTop: scrollTop
1042 | }, scrollDuration);
1043 | } else {
1044 | return this.$elUl.scrollTop(scrollTop);
1045 | }
1046 | };
1047 |
1048 | View.prototype.show = function() {
1049 | var rect;
1050 | if (this.stopShowing) {
1051 | this.stopShowing = false;
1052 | return;
1053 | }
1054 | if (!this.visible()) {
1055 | this.$el.show();
1056 | this.$el.scrollTop(0);
1057 | this.context.trigger('shown');
1058 | }
1059 | if (rect = this.context.rect()) {
1060 | return this.reposition(rect);
1061 | }
1062 | };
1063 |
1064 | View.prototype.hide = function(e, time) {
1065 | var callback;
1066 | if (!this.visible()) {
1067 | return;
1068 | }
1069 | if (isNaN(time)) {
1070 | this.$el.hide();
1071 | return this.context.trigger('hidden', [e]);
1072 | } else {
1073 | callback = (function(_this) {
1074 | return function() {
1075 | return _this.hide();
1076 | };
1077 | })(this);
1078 | clearTimeout(this.timeoutID);
1079 | return this.timeoutID = setTimeout(callback, time);
1080 | }
1081 | };
1082 |
1083 | View.prototype.render = function(list) {
1084 | var $li, $ul, i, item, len, li, tpl;
1085 | if (!($.isArray(list) && list.length > 0)) {
1086 | this.hide();
1087 | return;
1088 | }
1089 | this.$el.find('ul').empty();
1090 | $ul = this.$el.find('ul');
1091 | tpl = this.context.getOpt('displayTpl');
1092 | for (i = 0, len = list.length; i < len; i++) {
1093 | item = list[i];
1094 | item = $.extend({}, item, {
1095 | 'atwho-at': this.context.at
1096 | });
1097 | li = this.context.callbacks("tplEval").call(this.context, tpl, item, "onDisplay");
1098 | $li = $(this.context.callbacks("highlighter").call(this.context, li, this.context.query.text));
1099 | $li.data("item-data", item);
1100 | $ul.append($li);
1101 | }
1102 | this.show();
1103 | if (this.context.getOpt('highlightFirst')) {
1104 | return $ul.find("li:first").addClass("cur");
1105 | }
1106 | };
1107 |
1108 | return View;
1109 |
1110 | })();
1111 |
1112 | var Api;
1113 |
1114 | Api = {
1115 | load: function(at, data) {
1116 | var c;
1117 | if (c = this.controller(at)) {
1118 | return c.model.load(data);
1119 | }
1120 | },
1121 | isSelecting: function() {
1122 | var ref;
1123 | return !!((ref = this.controller()) != null ? ref.view.visible() : void 0);
1124 | },
1125 | hide: function() {
1126 | var ref;
1127 | return (ref = this.controller()) != null ? ref.view.hide() : void 0;
1128 | },
1129 | reposition: function() {
1130 | var c;
1131 | if (c = this.controller()) {
1132 | return c.view.reposition(c.rect());
1133 | }
1134 | },
1135 | setIframe: function(iframe, asRoot) {
1136 | this.setupRootElement(iframe, asRoot);
1137 | return null;
1138 | },
1139 | run: function() {
1140 | return this.dispatch();
1141 | },
1142 | destroy: function() {
1143 | this.shutdown();
1144 | return this.$inputor.data('atwho', null);
1145 | }
1146 | };
1147 |
1148 | $.fn.atwho = function(method) {
1149 | var _args, result;
1150 | _args = arguments;
1151 | result = null;
1152 | this.filter('textarea, input, [contenteditable=""], [contenteditable=true]').each(function() {
1153 | var $this, app;
1154 | if (!(app = ($this = $(this)).data("atwho"))) {
1155 | $this.data('atwho', (app = new App(this)));
1156 | }
1157 | if (typeof method === 'object' || !method) {
1158 | return app.reg(method.at, method);
1159 | } else if (Api[method] && app) {
1160 | return result = Api[method].apply(app, Array.prototype.slice.call(_args, 1));
1161 | } else {
1162 | return $.error("Method " + method + " does not exist on jQuery.atwho");
1163 | }
1164 | });
1165 | if (result != null) {
1166 | return result;
1167 | } else {
1168 | return this;
1169 | }
1170 | };
1171 |
1172 | $.fn.atwho["default"] = {
1173 | at: void 0,
1174 | alias: void 0,
1175 | data: null,
1176 | displayTpl: "${name}",
1177 | insertTpl: "${atwho-at}${name}",
1178 | callbacks: DEFAULT_CALLBACKS,
1179 | searchKey: "name",
1180 | suffix: void 0,
1181 | hideWithoutSuffix: false,
1182 | startWithSpace: true,
1183 | highlightFirst: true,
1184 | limit: 5,
1185 | maxLen: 20,
1186 | minLen: 0,
1187 | displayTimeout: 300,
1188 | delay: null,
1189 | spaceSelectsMatch: false,
1190 | tabSelectsMatch: true,
1191 | editableAtwhoQueryAttrs: {},
1192 | scrollDuration: 150,
1193 | suspendOnComposing: true,
1194 | lookUpOnClick: true
1195 | };
1196 |
1197 | $.fn.atwho.debug = false;
1198 |
1199 | }));
1200 |
--------------------------------------------------------------------------------
/src/content/vendor/jquery.atwho.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/settings";
2 |
3 | :global {
4 |
5 | .atwho-view {
6 | position:absolute;
7 | top: 0;
8 | left: 0;
9 | display: none;
10 | color: black;
11 | min-width: 120px;
12 | z-index: 11110 !important;
13 |
14 | border-radius: 3px;
15 | background: white;
16 | border: 1px solid #DDD;
17 | box-shadow: 0 0 5px rgba(0,0,0,0.1);
18 | border-radius: 5px;
19 |
20 | & * {
21 | font-size: 12px;
22 | line-height: 14px;
23 | font-family: 'Avenir', sans-serif;
24 | font-weight: 400;
25 | }
26 | }
27 |
28 | .atwho-view-icon {
29 | width: 10px;
30 | float: left;
31 | margin-top: 5px;
32 | margin-bottom: 5px;
33 | margin-left: 5px;
34 | }
35 |
36 | .atwho-view .atwho-header {
37 | padding: 5px;
38 | margin: 5px;
39 | cursor: pointer;
40 | border-bottom: solid 1px #eaeff1;
41 | color: #6f8092;
42 | font-size: 11px;
43 | font-weight: bold;
44 | }
45 |
46 | .atwho-view .atwho-header .small {
47 | color: #6f8092;
48 | float: right;
49 | padding-top: 2px;
50 | margin-right: -5px;
51 | font-size: 12px;
52 | font-weight: normal;
53 | }
54 |
55 | .atwho-view .atwho-header:hover {
56 | cursor: default;
57 | }
58 |
59 | .atwho-view .cur {
60 | color: $color-red;
61 | }
62 | .atwho-view .cur small {
63 | color: $color-red;
64 | }
65 | .atwho-view strong {
66 | color: $color-red;
67 | }
68 | .atwho-view .cur strong {
69 | font-weight: 700;
70 | }
71 |
72 | .atwho-view ul {
73 | list-style:none;
74 | padding:0;
75 | margin: 0;
76 | max-height: 200px;
77 | overflow-y: auto;
78 | }
79 |
80 | .atwho-view ul li {
81 | padding: 5px;
82 | padding-bottom: 7px;
83 | display: block;
84 | border-bottom: 1px solid #DDD;
85 | cursor: pointer;
86 | }
87 |
88 | .atwho-view ul li img {
89 | width: 16px;
90 | vertical-align: middle;
91 | float: right;
92 | }
93 |
94 | .atwho-view small {
95 | font-size: smaller;
96 | color: #777;
97 | font-weight: normal;
98 | }
99 |
100 | }
101 |
--------------------------------------------------------------------------------
/src/content/vendor/jquery.caret.js:
--------------------------------------------------------------------------------
1 | (function (root, factory) {
2 | if (typeof define === 'function' && define.amd) {
3 | // AMD. Register as an anonymous module unless amdModuleId is set
4 | define(["jquery"], function (a0) {
5 | return (factory(a0));
6 | });
7 | } else if (typeof exports === 'object') {
8 | // Node. Does not work with strict CommonJS, but
9 | // only CommonJS-like environments that support module.exports,
10 | // like Node.
11 | module.exports = factory(require("jquery"));
12 | } else {
13 | factory(jQuery);
14 | }
15 | }(this, function ($) {
16 |
17 | /*
18 | Implement Github like autocomplete mentions
19 | http://ichord.github.com/At.js
20 |
21 | Copyright (c) 2013 chord.luo@gmail.com
22 | Licensed under the MIT license.
23 | */
24 |
25 | /*
26 | 本插件操作 textarea 或者 input 内的插入符
27 | 只实现了获得插入符在文本框中的位置，我设置
28 | 插入符的位置.
29 | */
30 |
31 | "use strict";
32 | var EditableCaret, InputCaret, Mirror, Utils, discoveryIframeOf, methods, oDocument, oFrame, oWindow, pluginName, setContextBy;
33 |
34 | pluginName = 'caret';
35 |
36 | EditableCaret = (function() {
37 | function EditableCaret($inputor) {
38 | this.$inputor = $inputor;
39 | this.domInputor = this.$inputor[0];
40 | }
41 |
42 | EditableCaret.prototype.setPos = function(pos) {
43 | var fn, found, offset, sel;
44 | if (sel = oWindow.getSelection()) {
45 | offset = 0;
46 | found = false;
47 | (fn = function(pos, parent) {
48 | var node, range, _i, _len, _ref, _results;
49 | _ref = parent.childNodes;
50 | _results = [];
51 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
52 | node = _ref[_i];
53 | if (found) {
54 | break;
55 | }
56 | if (node.nodeType === 3) {
57 | if (offset + node.length >= pos) {
58 | found = true;
59 | range = oDocument.createRange();
60 | range.setStart(node, pos - offset);
61 | sel.removeAllRanges();
62 | sel.addRange(range);
63 | break;
64 | } else {
65 | _results.push(offset += node.length);
66 | }
67 | } else {
68 | _results.push(fn(pos, node));
69 | }
70 | }
71 | return _results;
72 | })(pos, this.domInputor);
73 | }
74 | return this.domInputor;
75 | };
76 |
77 | EditableCaret.prototype.getIEPosition = function() {
78 | return this.getPosition();
79 | };
80 |
81 | EditableCaret.prototype.getPosition = function() {
82 | var inputor_offset, offset;
83 | offset = this.getOffset();
84 | inputor_offset = this.$inputor.offset();
85 | offset.left -= inputor_offset.left;
86 | offset.top -= inputor_offset.top;
87 | return offset;
88 | };
89 |
90 | EditableCaret.prototype.getOldIEPos = function() {
91 | var preCaretTextRange, textRange;
92 | textRange = oDocument.selection.createRange();
93 | preCaretTextRange = oDocument.body.createTextRange();
94 | preCaretTextRange.moveToElementText(this.domInputor);
95 | preCaretTextRange.setEndPoint("EndToEnd", textRange);
96 | return preCaretTextRange.text.length;
97 | };
98 |
99 | EditableCaret.prototype.getPos = function() {
100 | var clonedRange, pos, range;
101 | if (range = this.range()) {
102 | clonedRange = range.cloneRange();
103 | clonedRange.selectNodeContents(this.domInputor);
104 | clonedRange.setEnd(range.endContainer, range.endOffset);
105 | pos = clonedRange.toString().length;
106 | clonedRange.detach();
107 | return pos;
108 | } else if (oDocument.selection) {
109 | return this.getOldIEPos();
110 | }
111 | };
112 |
113 | EditableCaret.prototype.getOldIEOffset = function() {
114 | var range, rect;
115 | range = oDocument.selection.createRange().duplicate();
116 | range.moveStart("character", -1);
117 | rect = range.getBoundingClientRect();
118 | return {
119 | height: rect.bottom - rect.top,
120 | left: rect.left,
121 | top: rect.top
122 | };
123 | };
124 |
125 | EditableCaret.prototype.getOffset = function(pos) {
126 | var clonedRange, offset, range, rect, shadowCaret;
127 | if (oWindow.getSelection && (range = this.range())) {
128 | if (range.endOffset - 1 > 0 && range.endContainer === !this.domInputor) {
129 | clonedRange = range.cloneRange();
130 | clonedRange.setStart(range.endContainer, range.endOffset - 1);
131 | clonedRange.setEnd(range.endContainer, range.endOffset);
132 | rect = clonedRange.getBoundingClientRect();
133 | offset = {
134 | height: rect.height,
135 | left: rect.left + rect.width,
136 | top: rect.top
137 | };
138 | }
139 | if (!offset || (offset != null ? offset.height : void 0) === 0) {
140 | clonedRange = range.cloneRange();
141 | shadowCaret = $(oDocument.createTextNode("|"));
142 | clonedRange.insertNode(shadowCaret[0]);
143 | clonedRange.selectNode(shadowCaret[0]);
144 | rect = clonedRange.getBoundingClientRect();
145 | offset = {
146 | height: rect.height,
147 | left: rect.left,
148 | top: rect.top
149 | };
150 | shadowCaret.remove();
151 | }
152 | } else if (oDocument.selection) {
153 | offset = this.getOldIEOffset();
154 | }
155 | if (offset) {
156 | offset.top += $(oWindow).scrollTop();
157 | offset.left += $(oWindow).scrollLeft();
158 | }
159 | return offset;
160 | };
161 |
162 | EditableCaret.prototype.range = function() {
163 | var sel;
164 | if (!oWindow.getSelection) {
165 | return;
166 | }
167 | sel = oWindow.getSelection();
168 | if (sel.rangeCount > 0) {
169 | return sel.getRangeAt(0);
170 | } else {
171 | return null;
172 | }
173 | };
174 |
175 | return EditableCaret;
176 |
177 | })();
178 |
179 | InputCaret = (function() {
180 | function InputCaret($inputor) {
181 | this.$inputor = $inputor;
182 | this.domInputor = this.$inputor[0];
183 | }
184 |
185 | InputCaret.prototype.getIEPos = function() {
186 | var endRange, inputor, len, normalizedValue, pos, range, textInputRange;
187 | inputor = this.domInputor;
188 | range = oDocument.selection.createRange();
189 | pos = 0;
190 | if (range && range.parentElement() === inputor) {
191 | normalizedValue = inputor.value.replace(/\r\n/g, "\n");
192 | len = normalizedValue.length;
193 | textInputRange = inputor.createTextRange();
194 | textInputRange.moveToBookmark(range.getBookmark());
195 | endRange = inputor.createTextRange();
196 | endRange.collapse(false);
197 | if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
198 | pos = len;
199 | } else {
200 | pos = -textInputRange.moveStart("character", -len);
201 | }
202 | }
203 | return pos;
204 | };
205 |
206 | InputCaret.prototype.getPos = function() {
207 | if (oDocument.selection) {
208 | return this.getIEPos();
209 | } else {
210 | return this.domInputor.selectionStart;
211 | }
212 | };
213 |
214 | InputCaret.prototype.setPos = function(pos) {
215 | var inputor, range;
216 | inputor = this.domInputor;
217 | if (oDocument.selection) {
218 | range = inputor.createTextRange();
219 | range.move("character", pos);
220 | range.select();
221 | } else if (inputor.setSelectionRange) {
222 | inputor.setSelectionRange(pos, pos);
223 | }
224 | return inputor;
225 | };
226 |
227 | InputCaret.prototype.getIEOffset = function(pos) {
228 | var h, textRange, x, y;
229 | textRange = this.domInputor.createTextRange();
230 | pos || (pos = this.getPos());
231 | textRange.move('character', pos);
232 | x = textRange.boundingLeft;
233 | y = textRange.boundingTop;
234 | h = textRange.boundingHeight;
235 | return {
236 | left: x,
237 | top: y,
238 | height: h
239 | };
240 | };
241 |
242 | InputCaret.prototype.getOffset = function(pos) {
243 | var $inputor, offset, position;
244 | $inputor = this.$inputor;
245 | if (oDocument.selection) {
246 | offset = this.getIEOffset(pos);
247 | offset.top += $(oWindow).scrollTop() + $inputor.scrollTop();
248 | offset.left += $(oWindow).scrollLeft() + $inputor.scrollLeft();
249 | return offset;
250 | } else {
251 | offset = $inputor.offset();
252 | position = this.getPosition(pos);
253 | return offset = {
254 | left: offset.left + position.left - $inputor.scrollLeft(),
255 | top: offset.top + position.top - $inputor.scrollTop(),
256 | height: position.height
257 | };
258 | }
259 | };
260 |
261 | InputCaret.prototype.getPosition = function(pos) {
262 | var $inputor, at_rect, end_range, format, html, mirror, start_range;
263 | $inputor = this.$inputor;
264 | format = function(value) {
265 | value = value.replace(/<|>|`|"|&/g, '?').replace(/\r\n|\r|\n/g, "
");
266 | if (/firefox/i.test(navigator.userAgent)) {
267 | value = value.replace(/\s/g, ' ');
268 | }
269 | return value;
270 | };
271 | if (pos === void 0) {
272 | pos = this.getPos();
273 | }
274 | start_range = $inputor.val().slice(0, pos);
275 | end_range = $inputor.val().slice(pos);
276 | html = "" + format(start_range) + "";
277 | html += "|";
278 | html += "" + format(end_range) + "";
279 | mirror = new Mirror($inputor);
280 | return at_rect = mirror.create(html).rect();
281 | };
282 |
283 | InputCaret.prototype.getIEPosition = function(pos) {
284 | var h, inputorOffset, offset, x, y;
285 | offset = this.getIEOffset(pos);
286 | inputorOffset = this.$inputor.offset();
287 | x = offset.left - inputorOffset.left;
288 | y = offset.top - inputorOffset.top;
289 | h = offset.height;
290 | return {
291 | left: x,
292 | top: y,
293 | height: h
294 | };
295 | };
296 |
297 | return InputCaret;
298 |
299 | })();
300 |
301 | Mirror = (function() {
302 | Mirror.prototype.css_attr = ["borderBottomWidth", "borderLeftWidth", "borderRightWidth", "borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle", "borderTopWidth", "boxSizing", "fontFamily", "fontSize", "fontWeight", "height", "letterSpacing", "lineHeight", "marginBottom", "marginLeft", "marginRight", "marginTop", "outlineWidth", "overflow", "overflowX", "overflowY", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "textAlign", "textOverflow", "textTransform", "whiteSpace", "wordBreak", "wordWrap"];
303 |
304 | function Mirror($inputor) {
305 | this.$inputor = $inputor;
306 | }
307 |
308 | Mirror.prototype.mirrorCss = function() {
309 | var css,
310 | _this = this;
311 | css = {
312 | position: 'absolute',
313 | left: -9999,
314 | top: 0,
315 | zIndex: -20000
316 | };
317 | if (this.$inputor.prop('tagName') === 'TEXTAREA') {
318 | this.css_attr.push('width');
319 | }
320 | $.each(this.css_attr, function(i, p) {
321 | return css[p] = _this.$inputor.css(p);
322 | });
323 | return css;
324 | };
325 |
326 | Mirror.prototype.create = function(html) {
327 | this.$mirror = $('');
328 | this.$mirror.css(this.mirrorCss());
329 | this.$mirror.html(html);
330 | this.$inputor.after(this.$mirror);
331 | return this;
332 | };
333 |
334 | Mirror.prototype.rect = function() {
335 | var $flag, pos, rect;
336 | $flag = this.$mirror.find("#caret");
337 | pos = $flag.position();
338 | rect = {
339 | left: pos.left,
340 | top: pos.top,
341 | height: $flag.height()
342 | };
343 | this.$mirror.remove();
344 | return rect;
345 | };
346 |
347 | return Mirror;
348 |
349 | })();
350 |
351 | Utils = {
352 | contentEditable: function($inputor) {
353 | return !!($inputor[0].contentEditable && $inputor[0].contentEditable === 'true');
354 | }
355 | };
356 |
357 | methods = {
358 | pos: function(pos) {
359 | if (pos || pos === 0) {
360 | return this.setPos(pos);
361 | } else {
362 | return this.getPos();
363 | }
364 | },
365 | position: function(pos) {
366 | if (oDocument.selection) {
367 | return this.getIEPosition(pos);
368 | } else {
369 | return this.getPosition(pos);
370 | }
371 | },
372 | offset: function(pos) {
373 | var offset;
374 | offset = this.getOffset(pos);
375 | return offset;
376 | }
377 | };
378 |
379 | oDocument = null;
380 |
381 | oWindow = null;
382 |
383 | oFrame = null;
384 |
385 | setContextBy = function(settings) {
386 | var iframe;
387 | if (iframe = settings != null ? settings.iframe : void 0) {
388 | oFrame = iframe;
389 | oWindow = iframe.contentWindow;
390 | return oDocument = iframe.contentDocument || oWindow.document;
391 | } else {
392 | oFrame = void 0;
393 | oWindow = window;
394 | return oDocument = document;
395 | }
396 | };
397 |
398 | discoveryIframeOf = function($dom) {
399 | var error;
400 | oDocument = $dom[0].ownerDocument;
401 | oWindow = oDocument.defaultView || oDocument.parentWindow;
402 | try {
403 | return oFrame = oWindow.frameElement;
404 | } catch (_error) {
405 | error = _error;
406 | }
407 | };
408 |
409 | $.fn.caret = function(method, value, settings) {
410 | var caret;
411 | if (methods[method]) {
412 | if ($.isPlainObject(value)) {
413 | setContextBy(value);
414 | value = void 0;
415 | } else {
416 | setContextBy(settings);
417 | }
418 | caret = Utils.contentEditable(this) ? new EditableCaret(this) : new InputCaret(this);
419 | return methods[method].apply(caret, [value]);
420 | } else {
421 | return $.error("Method " + method + " does not exist on jQuery.caret");
422 | }
423 | };
424 |
425 | $.fn.caret.EditableCaret = EditableCaret;
426 |
427 | $.fn.caret.InputCaret = InputCaret;
428 |
429 | $.fn.caret.Utils = Utils;
430 |
431 | $.fn.caret.apis = methods;
432 |
433 |
434 | }));
435 |
--------------------------------------------------------------------------------
/src/content/vendor/jquery.rangyinputs.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Rangy Inputs, a jQuery plug-in for selection and caret manipulation within textareas and text inputs.
3 | *
4 | * https://github.com/timdown/rangyinputs
5 | *
6 | * For range and selection features for contenteditable, see Rangy.
7 |
8 | * http://code.google.com/p/rangy/
9 | *
10 | * Depends on jQuery 1.0 or later.
11 | *
12 | * Copyright 2014, Tim Down
13 | * Licensed under the MIT license.
14 | * Version: 1.2.0
15 | * Build date: 30 November 2014
16 | */
17 | (function($) {
18 | var UNDEF = "undefined";
19 | var getSelection, setSelection, deleteSelectedText, deleteText, insertText;
20 | var replaceSelectedText, surroundSelectedText, extractSelectedText, collapseSelection;
21 |
22 | // Trio of isHost* functions taken from Peter Michaux's article:
23 | // http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
24 | function isHostMethod(object, property) {
25 | var t = typeof object[property];
26 | return t === "function" || (!!(t == "object" && object[property])) || t == "unknown";
27 | }
28 |
29 | function isHostProperty(object, property) {
30 | return typeof(object[property]) != UNDEF;
31 | }
32 |
33 | function isHostObject(object, property) {
34 | return !!(typeof(object[property]) == "object" && object[property]);
35 | }
36 |
37 | function fail(reason) {
38 | if (window.console && window.console.log) {
39 | window.console.log("RangyInputs not supported in your browser. Reason: " + reason);
40 | }
41 | }
42 |
43 | function adjustOffsets(el, start, end) {
44 | if (start < 0) {
45 | start += el.value.length;
46 | }
47 | if (typeof end == UNDEF) {
48 | end = start;
49 | }
50 | if (end < 0) {
51 | end += el.value.length;
52 | }
53 | return { start: start, end: end };
54 | }
55 |
56 | function makeSelection(el, start, end) {
57 | return {
58 | start: start,
59 | end: end,
60 | length: end - start,
61 | text: el.value.slice(start, end)
62 | };
63 | }
64 |
65 | function getBody() {
66 | return isHostObject(document, "body") ? document.body : document.getElementsByTagName("body")[0];
67 | }
68 |
69 | $(document).ready(function() {
70 | var testTextArea = document.createElement("textarea");
71 |
72 | getBody().appendChild(testTextArea);
73 |
74 | if (isHostProperty(testTextArea, "selectionStart") && isHostProperty(testTextArea, "selectionEnd")) {
75 | getSelection = function(el) {
76 | var start = el.selectionStart, end = el.selectionEnd;
77 | return makeSelection(el, start, end);
78 | };
79 |
80 | setSelection = function(el, startOffset, endOffset) {
81 | var offsets = adjustOffsets(el, startOffset, endOffset);
82 | el.selectionStart = offsets.start;
83 | el.selectionEnd = offsets.end;
84 | };
85 |
86 | collapseSelection = function(el, toStart) {
87 | if (toStart) {
88 | el.selectionEnd = el.selectionStart;
89 | } else {
90 | el.selectionStart = el.selectionEnd;
91 | }
92 | };
93 | } else if (isHostMethod(testTextArea, "createTextRange") && isHostObject(document, "selection") &&
94 | isHostMethod(document.selection, "createRange")) {
95 |
96 | getSelection = function(el) {
97 | var start = 0, end = 0, normalizedValue, textInputRange, len, endRange;
98 | var range = document.selection.createRange();
99 |
100 | if (range && range.parentElement() == el) {
101 | len = el.value.length;
102 |
103 | normalizedValue = el.value.replace(/\r\n/g, "\n");
104 | textInputRange = el.createTextRange();
105 | textInputRange.moveToBookmark(range.getBookmark());
106 | endRange = el.createTextRange();
107 | endRange.collapse(false);
108 | if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
109 | start = end = len;
110 | } else {
111 | start = -textInputRange.moveStart("character", -len);
112 | start += normalizedValue.slice(0, start).split("\n").length - 1;
113 | if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
114 | end = len;
115 | } else {
116 | end = -textInputRange.moveEnd("character", -len);
117 | end += normalizedValue.slice(0, end).split("\n").length - 1;
118 | }
119 | }
120 | }
121 |
122 | return makeSelection(el, start, end);
123 | };
124 |
125 | // Moving across a line break only counts as moving one character in a TextRange, whereas a line break in
126 | // the textarea value is two characters. This function corrects for that by converting a text offset into a
127 | // range character offset by subtracting one character for every line break in the textarea prior to the
128 | // offset
129 | var offsetToRangeCharacterMove = function(el, offset) {
130 | return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
131 | };
132 |
133 | setSelection = function(el, startOffset, endOffset) {
134 | var offsets = adjustOffsets(el, startOffset, endOffset);
135 | var range = el.createTextRange();
136 | var startCharMove = offsetToRangeCharacterMove(el, offsets.start);
137 | range.collapse(true);
138 | if (offsets.start == offsets.end) {
139 | range.move("character", startCharMove);
140 | } else {
141 | range.moveEnd("character", offsetToRangeCharacterMove(el, offsets.end));
142 | range.moveStart("character", startCharMove);
143 | }
144 | range.select();
145 | };
146 |
147 | collapseSelection = function(el, toStart) {
148 | var range = document.selection.createRange();
149 | range.collapse(toStart);
150 | range.select();
151 | };
152 | } else {
153 | getBody().removeChild(testTextArea);
154 | fail("No means of finding text input caret position");
155 | return;
156 | }
157 |
158 | // Clean up
159 | getBody().removeChild(testTextArea);
160 |
161 | function getValueAfterPaste(el, text) {
162 | var val = el.value, sel = getSelection(el), selStart = sel.start;
163 | return {
164 | value: val.slice(0, selStart) + text + val.slice(sel.end),
165 | index: selStart,
166 | replaced: sel.text
167 | };
168 | }
169 |
170 | function pasteTextWithCommand(el, text) {
171 | el.focus();
172 | var sel = getSelection(el);
173 |
174 | // Hack to work around incorrect delete command when deleting the last word on a line
175 | setSelection(el, sel.start, sel.end);
176 | if (text == "") {
177 | document.execCommand("delete", false, null);
178 | } else {
179 | document.execCommand("insertText", false, text);
180 | }
181 |
182 | return {
183 | replaced: sel.text,
184 | index: sel.start
185 | };
186 | }
187 |
188 | function pasteTextWithValueChange(el, text) {
189 | el.focus();
190 | var valueAfterPaste = getValueAfterPaste(el, text);
191 | el.value = valueAfterPaste.value;
192 | return valueAfterPaste;
193 | }
194 |
195 | var pasteText = function(el, text) {
196 | var valueAfterPaste = getValueAfterPaste(el, text);
197 | try {
198 | var pasteInfo = pasteTextWithCommand(el, text);
199 | if (el.value == valueAfterPaste.value) {
200 | pasteText = pasteTextWithCommand;
201 | return pasteInfo;
202 | }
203 | } catch (ex) {
204 | // Do nothing and fall back to changing the value manually
205 | }
206 | pasteText = pasteTextWithValueChange;
207 | el.value = valueAfterPaste.value;
208 | return valueAfterPaste;
209 | };
210 |
211 | deleteText = function(el, start, end, moveSelection) {
212 | if (start != end) {
213 | setSelection(el, start, end);
214 | pasteText(el, "");
215 | }
216 | if (moveSelection) {
217 | setSelection(el, start);
218 | }
219 | };
220 |
221 | deleteSelectedText = function(el) {
222 | setSelection(el, pasteText(el, "").index);
223 | };
224 |
225 | extractSelectedText = function(el) {
226 | var pasteInfo = pasteText(el, "");
227 | setSelection(el, pasteInfo.index);
228 | return pasteInfo.replaced;
229 | };
230 |
231 | var updateSelectionAfterInsert = function(el, startIndex, text, selectionBehaviour) {
232 | var endIndex = startIndex + text.length;
233 |
234 | selectionBehaviour = (typeof selectionBehaviour == "string") ?
235 | selectionBehaviour.toLowerCase() : "";
236 |
237 | if ((selectionBehaviour == "collapsetoend" || selectionBehaviour == "select") && /[\r\n]/.test(text)) {
238 | // Find the length of the actual text inserted, which could vary
239 | // depending on how the browser deals with line breaks
240 | var normalizedText = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
241 | endIndex = startIndex + normalizedText.length;
242 | var firstLineBreakIndex = startIndex + normalizedText.indexOf("\n");
243 |
244 | if (el.value.slice(firstLineBreakIndex, firstLineBreakIndex + 2) == "\r\n") {
245 | // Browser uses \r\n, so we need to account for extra \r characters
246 | endIndex += normalizedText.match(/\n/g).length;
247 | }
248 | }
249 |
250 | switch (selectionBehaviour) {
251 | case "collapsetostart":
252 | setSelection(el, startIndex, startIndex);
253 | break;
254 | case "collapsetoend":
255 | setSelection(el, endIndex, endIndex);
256 | break;
257 | case "select":
258 | setSelection(el, startIndex, endIndex);
259 | break;
260 | }
261 | };
262 |
263 | insertText = function(el, text, index, selectionBehaviour) {
264 | setSelection(el, index);
265 | pasteText(el, text);
266 | if (typeof selectionBehaviour == "boolean") {
267 | selectionBehaviour = selectionBehaviour ? "collapseToEnd" : "";
268 | }
269 | updateSelectionAfterInsert(el, index, text, selectionBehaviour);
270 | };
271 |
272 | replaceSelectedText = function(el, text, selectionBehaviour) {
273 | var pasteInfo = pasteText(el, text);
274 | updateSelectionAfterInsert(el, pasteInfo.index, text, selectionBehaviour || "collapseToEnd");
275 | };
276 |
277 | surroundSelectedText = function(el, before, after, selectionBehaviour) {
278 | if (typeof after == UNDEF) {
279 | after = before;
280 | }
281 | var sel = getSelection(el);
282 | var pasteInfo = pasteText(el, before + sel.text + after);
283 | updateSelectionAfterInsert(el, pasteInfo.index + before.length, sel.text, selectionBehaviour || "select");
284 | };
285 |
286 | function jQuerify(func, returnThis) {
287 | return function() {
288 | var el = this.jquery ? this[0] : this;
289 | var nodeName = el.nodeName.toLowerCase();
290 |
291 | if (el.nodeType == 1 && (nodeName == "textarea" ||
292 | (nodeName == "input" && /^(?:text|email|number|search|tel|url|password)$/i.test(el.type)))) {
293 | var args = [el].concat(Array.prototype.slice.call(arguments));
294 | var result = func.apply(this, args);
295 | if (!returnThis) {
296 | return result;
297 | }
298 | }
299 | if (returnThis) {
300 | return this;
301 | }
302 | };
303 | }
304 |
305 | $.fn.extend({
306 | getSelection: jQuerify(getSelection, false),
307 | setSelection: jQuerify(setSelection, true),
308 | collapseSelection: jQuerify(collapseSelection, true),
309 | deleteSelectedText: jQuerify(deleteSelectedText, true),
310 | deleteText: jQuerify(deleteText, true),
311 | extractSelectedText: jQuerify(extractSelectedText, false),
312 | insertText: jQuerify(insertText, true),
313 | replaceSelectedText: jQuerify(replaceSelectedText, true),
314 | surroundSelectedText: jQuerify(surroundSelectedText, true)
315 | });
316 | });
317 | })(jQuery);
318 |
--------------------------------------------------------------------------------
/src/icons/command-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command-128.png
--------------------------------------------------------------------------------
/src/icons/command-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command-16.png
--------------------------------------------------------------------------------
/src/icons/command-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command-32.png
--------------------------------------------------------------------------------
/src/icons/command.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command.png
--------------------------------------------------------------------------------
/src/icons/command@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command@2x.png
--------------------------------------------------------------------------------
/src/icons/command@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessepollak/command/e0f7b027f63ea8bcfe1ecc2e3f342aebeec089f6/src/icons/command@3x.png
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "homepage_url": "https://github.com/jessepollak/command",
4 | "background": {
5 | "scripts": ["background/index.js"],
6 | "persistent": true
7 | },
8 | "content_scripts": [
9 | {
10 | "matches": [""],
11 | "js": ["content/index.js"]
12 | }
13 | ],
14 | "permissions": [
15 | "",
16 | "webRequest",
17 | "webRequestBlocking",
18 | "background",
19 | "tabs",
20 | "storage"
21 | ],
22 | "icons": {
23 | "16": "icons/command-16.png",
24 | "32": "icons/command-32.png",
25 | "128": "icons/command-128.png"
26 | },
27 | "web_accessible_resources": [
28 | "icons/*"
29 | ],
30 | "content_security_policy": "script-src 'self'; media-src 'self';"
31 | }
32 |
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Test
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
}){kind=icon}
59 | 
36 | )
37 | }
38 |
39 | class Giphy extends React.Component {
40 | onSelect(result) {
41 | this.props.onDone(new Types.Image({
42 | src: result.images.original.url,
43 | alt: result.slug,
44 | url: result.url
45 | }))
46 | }
47 |
48 | render() {
49 | return (
50 | ![](${require("icons/command.png")})