')
104 | .attr('id', this.containerId)
105 | .html(html)
106 |
107 | $(document.body).append(container)
108 | return container
109 | }
110 |
111 | jasmine.Fixtures.prototype.addToContainer_ = function (html){
112 | var container = $(document.body).find('#'+this.containerId).append(html)
113 |
114 | if (!container.length) {
115 | this.createContainer_(html)
116 | }
117 | }
118 |
119 | jasmine.Fixtures.prototype.getFixtureHtml_ = function (url) {
120 | if (typeof this.fixturesCache_[url] === 'undefined') {
121 | this.loadFixtureIntoCache_(url)
122 | }
123 | return this.fixturesCache_[url]
124 | }
125 |
126 | jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function (relativeUrl) {
127 | var self = this
128 | , url = this.makeFixtureUrl_(relativeUrl)
129 | , htmlText = ''
130 | , request = $.ajax({
131 | async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
132 | cache: false,
133 | url: url,
134 | dataType: 'html',
135 | success: function (data, status, $xhr) {
136 | htmlText = $xhr.responseText
137 | }
138 | }).fail(function ($xhr, status, err) {
139 | throw new Error('Fixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + err.message + ')')
140 | })
141 |
142 | var scripts = $($.parseHTML(htmlText, true)).find('script[src]') || [];
143 |
144 | scripts.each(function(){
145 | $.ajax({
146 | async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
147 | cache: false,
148 | dataType: 'script',
149 | url: $(this).attr('src'),
150 | success: function (data, status, $xhr) {
151 | htmlText += ''
152 | },
153 | error: function ($xhr, status, err) {
154 | throw new Error('Script could not be loaded: ' + url + ' (status: ' + status + ', message: ' + err.message + ')')
155 | }
156 | });
157 | })
158 |
159 | self.fixturesCache_[relativeUrl] = htmlText;
160 | }
161 |
162 | jasmine.Fixtures.prototype.makeFixtureUrl_ = function (relativeUrl){
163 | return this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl
164 | }
165 |
166 | jasmine.Fixtures.prototype.proxyCallTo_ = function (methodName, passedArguments) {
167 | return this[methodName].apply(this, passedArguments)
168 | }
169 |
170 |
171 | jasmine.StyleFixtures = function () {
172 | this.fixturesCache_ = {}
173 | this.fixturesNodes_ = []
174 | this.fixturesPath = 'spec/javascripts/fixtures'
175 | }
176 |
177 | jasmine.StyleFixtures.prototype.set = function (css) {
178 | this.cleanUp()
179 | this.createStyle_(css)
180 | }
181 |
182 | jasmine.StyleFixtures.prototype.appendSet = function (css) {
183 | this.createStyle_(css)
184 | }
185 |
186 | jasmine.StyleFixtures.prototype.preload = function () {
187 | this.read_.apply(this, arguments)
188 | }
189 |
190 | jasmine.StyleFixtures.prototype.load = function () {
191 | this.cleanUp()
192 | this.createStyle_(this.read_.apply(this, arguments))
193 | }
194 |
195 | jasmine.StyleFixtures.prototype.appendLoad = function () {
196 | this.createStyle_(this.read_.apply(this, arguments))
197 | }
198 |
199 | jasmine.StyleFixtures.prototype.cleanUp = function () {
200 | while(this.fixturesNodes_.length) {
201 | this.fixturesNodes_.pop().remove()
202 | }
203 | }
204 |
205 | jasmine.StyleFixtures.prototype.createStyle_ = function (html) {
206 | var styleText = $('
').html(html).text()
207 | , style = $('')
208 |
209 | this.fixturesNodes_.push(style)
210 | $('head').append(style)
211 | }
212 |
213 | jasmine.StyleFixtures.prototype.clearCache = jasmine.Fixtures.prototype.clearCache
214 | jasmine.StyleFixtures.prototype.read_ = jasmine.Fixtures.prototype.read
215 | jasmine.StyleFixtures.prototype.getFixtureHtml_ = jasmine.Fixtures.prototype.getFixtureHtml_
216 | jasmine.StyleFixtures.prototype.loadFixtureIntoCache_ = jasmine.Fixtures.prototype.loadFixtureIntoCache_
217 | jasmine.StyleFixtures.prototype.makeFixtureUrl_ = jasmine.Fixtures.prototype.makeFixtureUrl_
218 | jasmine.StyleFixtures.prototype.proxyCallTo_ = jasmine.Fixtures.prototype.proxyCallTo_
219 |
220 | jasmine.getJSONFixtures = function () {
221 | return jasmine.currentJSONFixtures_ = jasmine.currentJSONFixtures_ || new jasmine.JSONFixtures()
222 | }
223 |
224 | jasmine.JSONFixtures = function () {
225 | this.fixturesCache_ = {}
226 | this.fixturesPath = 'spec/javascripts/fixtures/json'
227 | }
228 |
229 | jasmine.JSONFixtures.prototype.load = function () {
230 | this.read.apply(this, arguments)
231 | return this.fixturesCache_
232 | }
233 |
234 | jasmine.JSONFixtures.prototype.read = function () {
235 | var fixtureUrls = arguments
236 |
237 | for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
238 | this.getFixtureData_(fixtureUrls[urlIndex])
239 | }
240 |
241 | return this.fixturesCache_
242 | }
243 |
244 | jasmine.JSONFixtures.prototype.clearCache = function () {
245 | this.fixturesCache_ = {}
246 | }
247 |
248 | jasmine.JSONFixtures.prototype.getFixtureData_ = function (url) {
249 | if (!this.fixturesCache_[url]) this.loadFixtureIntoCache_(url)
250 | return this.fixturesCache_[url]
251 | }
252 |
253 | jasmine.JSONFixtures.prototype.loadFixtureIntoCache_ = function (relativeUrl) {
254 | var self = this
255 | , url = this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl
256 |
257 | $.ajax({
258 | async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
259 | cache: false,
260 | dataType: 'json',
261 | url: url,
262 | success: function (data) {
263 | self.fixturesCache_[relativeUrl] = data
264 | },
265 | error: function ($xhr, status, err) {
266 | throw new Error('JSONFixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + err.message + ')')
267 | }
268 | })
269 | }
270 |
271 | jasmine.JSONFixtures.prototype.proxyCallTo_ = function (methodName, passedArguments) {
272 | return this[methodName].apply(this, passedArguments)
273 | }
274 |
275 | jasmine.jQuery = function () {}
276 |
277 | jasmine.jQuery.browserTagCaseIndependentHtml = function (html) {
278 | return $('
').append(html).html()
279 | }
280 |
281 | jasmine.jQuery.elementToString = function (element) {
282 | return $(element).map(function () { return this.outerHTML; }).toArray().join(', ')
283 | }
284 |
285 | var data = {
286 | spiedEvents: {}
287 | , handlers: []
288 | }
289 |
290 | jasmine.jQuery.events = {
291 | spyOn: function (selector, eventName) {
292 | var handler = function (e) {
293 | var calls = (typeof data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)] !== 'undefined') ? data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)].calls : 0
294 | data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)] = {
295 | args: jasmine.util.argsToArray(arguments),
296 | calls: ++calls
297 | }
298 | }
299 |
300 | $(selector).on(eventName, handler)
301 | data.handlers.push(handler)
302 |
303 | return {
304 | selector: selector,
305 | eventName: eventName,
306 | handler: handler,
307 | reset: function (){
308 | delete data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)]
309 | },
310 | calls: {
311 | count: function () {
312 | return data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)] ?
313 | data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)].calls : 0;
314 | },
315 | any: function () {
316 | return data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)] ?
317 | !!data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)].calls : false;
318 | }
319 | }
320 | }
321 | },
322 |
323 | args: function (selector, eventName) {
324 | var actualArgs = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)].args
325 |
326 | if (!actualArgs) {
327 | throw "There is no spy for " + eventName + " on " + selector.toString() + ". Make sure to create a spy using spyOnEvent."
328 | }
329 |
330 | return actualArgs
331 | },
332 |
333 | wasTriggered: function (selector, eventName) {
334 | return !!(data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)])
335 | },
336 |
337 | wasTriggeredWith: function (selector, eventName, expectedArgs, util, customEqualityTesters) {
338 | var actualArgs = jasmine.jQuery.events.args(selector, eventName).slice(1)
339 |
340 | if (Object.prototype.toString.call(expectedArgs) !== '[object Array]')
341 | actualArgs = actualArgs[0]
342 |
343 | return util.equals(actualArgs, expectedArgs, customEqualityTesters)
344 | },
345 |
346 | wasPrevented: function (selector, eventName) {
347 | var spiedEvent = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)]
348 | , args = (jasmine.util.isUndefined(spiedEvent)) ? {} : spiedEvent.args
349 | , e = args ? args[0] : undefined
350 |
351 | return e && e.isDefaultPrevented()
352 | },
353 |
354 | wasStopped: function (selector, eventName) {
355 | var spiedEvent = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)]
356 | , args = (jasmine.util.isUndefined(spiedEvent)) ? {} : spiedEvent.args
357 | , e = args ? args[0] : undefined
358 |
359 | return e && e.isPropagationStopped()
360 | },
361 |
362 | cleanUp: function () {
363 | data.spiedEvents = {}
364 | data.handlers = []
365 | }
366 | }
367 |
368 | var hasProperty = function (actualValue, expectedValue) {
369 | if (expectedValue === undefined)
370 | return actualValue !== undefined
371 |
372 | return actualValue === expectedValue
373 | }
374 |
375 | beforeEach(function () {
376 | jasmine.addMatchers({
377 | toHaveClass: function () {
378 | return {
379 | compare: function (actual, className) {
380 | return { pass: $(actual).hasClass(className) }
381 | }
382 | }
383 | },
384 |
385 | toHaveCss: function () {
386 | return {
387 | compare: function (actual, css) {
388 | var stripCharsRegex = /[\s;\"\']/g
389 | for (var prop in css) {
390 | var value = css[prop]
391 | // see issue #147 on gh
392 | ;if ((value === 'auto') && ($(actual).get(0).style[prop] === 'auto')) continue
393 | var actualStripped = $(actual).css(prop).replace(stripCharsRegex, '')
394 | var valueStripped = value.replace(stripCharsRegex, '')
395 | if (actualStripped !== valueStripped) return { pass: false }
396 | }
397 | return { pass: true }
398 | }
399 | }
400 | },
401 |
402 | toBeVisible: function () {
403 | return {
404 | compare: function (actual) {
405 | return { pass: $(actual).is(':visible') }
406 | }
407 | }
408 | },
409 |
410 | toBeHidden: function () {
411 | return {
412 | compare: function (actual) {
413 | return { pass: $(actual).is(':hidden') }
414 | }
415 | }
416 | },
417 |
418 | toBeSelected: function () {
419 | return {
420 | compare: function (actual) {
421 | return { pass: $(actual).is(':selected') }
422 | }
423 | }
424 | },
425 |
426 | toBeChecked: function () {
427 | return {
428 | compare: function (actual) {
429 | return { pass: $(actual).is(':checked') }
430 | }
431 | }
432 | },
433 |
434 | toBeEmpty: function () {
435 | return {
436 | compare: function (actual) {
437 | return { pass: $(actual).is(':empty') }
438 | }
439 | }
440 | },
441 |
442 | toBeInDOM: function () {
443 | return {
444 | compare: function (actual) {
445 | return { pass: $.contains(document.documentElement, $(actual)[0]) }
446 | }
447 | }
448 | },
449 |
450 | toExist: function () {
451 | return {
452 | compare: function (actual) {
453 | return { pass: $(actual).length }
454 | }
455 | }
456 | },
457 |
458 | toHaveLength: function () {
459 | return {
460 | compare: function (actual, length) {
461 | return { pass: $(actual).length === length }
462 | }
463 | }
464 | },
465 |
466 | toHaveAttr: function () {
467 | return {
468 | compare: function (actual, attributeName, expectedAttributeValue) {
469 | return { pass: hasProperty($(actual).attr(attributeName), expectedAttributeValue) }
470 | }
471 | }
472 | },
473 |
474 | toHaveProp: function () {
475 | return {
476 | compare: function (actual, propertyName, expectedPropertyValue) {
477 | return { pass: hasProperty($(actual).prop(propertyName), expectedPropertyValue) }
478 | }
479 | }
480 | },
481 |
482 | toHaveId: function () {
483 | return {
484 | compare: function (actual, id) {
485 | return { pass: $(actual).attr('id') == id }
486 | }
487 | }
488 | },
489 |
490 | toHaveHtml: function () {
491 | return {
492 | compare: function (actual, html) {
493 | return { pass: $(actual).html() == jasmine.jQuery.browserTagCaseIndependentHtml(html) }
494 | }
495 | }
496 | },
497 |
498 | toContainHtml: function () {
499 | return {
500 | compare: function (actual, html) {
501 | var actualHtml = $(actual).html()
502 | , expectedHtml = jasmine.jQuery.browserTagCaseIndependentHtml(html)
503 |
504 | return { pass: (actualHtml.indexOf(expectedHtml) >= 0) }
505 | }
506 | }
507 | },
508 |
509 | toHaveText: function () {
510 | return {
511 | compare: function (actual, text) {
512 | var actualText = $(actual).text()
513 | var trimmedText = $.trim(actualText)
514 |
515 | if (text && $.isFunction(text.test)) {
516 | return { pass: text.test(actualText) || text.test(trimmedText) }
517 | } else {
518 | return { pass: (actualText == text || trimmedText == text) }
519 | }
520 | }
521 | }
522 | },
523 |
524 | toContainText: function () {
525 | return {
526 | compare: function (actual, text) {
527 | var trimmedText = $.trim($(actual).text())
528 |
529 | if (text && $.isFunction(text.test)) {
530 | return { pass: text.test(trimmedText) }
531 | } else {
532 | return { pass: trimmedText.indexOf(text) != -1 }
533 | }
534 | }
535 | }
536 | },
537 |
538 | toHaveValue: function () {
539 | return {
540 | compare: function (actual, value) {
541 | return { pass: $(actual).val() === value }
542 | }
543 | }
544 | },
545 |
546 | toHaveData: function () {
547 | return {
548 | compare: function (actual, key, expectedValue) {
549 | return { pass: hasProperty($(actual).data(key), expectedValue) }
550 | }
551 | }
552 | },
553 |
554 | toContainElement: function () {
555 | return {
556 | compare: function (actual, selector) {
557 | return { pass: $(actual).find(selector).length }
558 | }
559 | }
560 | },
561 |
562 | toBeMatchedBy: function () {
563 | return {
564 | compare: function (actual, selector) {
565 | return { pass: $(actual).filter(selector).length }
566 | }
567 | }
568 | },
569 |
570 | toBeDisabled: function () {
571 | return {
572 | compare: function (actual, selector) {
573 | return { pass: $(actual).is(':disabled') }
574 | }
575 | }
576 | },
577 |
578 | toBeFocused: function (selector) {
579 | return {
580 | compare: function (actual, selector) {
581 | return { pass: $(actual)[0] === $(actual)[0].ownerDocument.activeElement }
582 | }
583 | }
584 | },
585 |
586 | toHandle: function () {
587 | return {
588 | compare: function (actual, event) {
589 | if ( !actual || actual.length === 0 ) return { pass: false };
590 | var events = $._data($(actual).get(0), "events")
591 |
592 | if (!events || !event || typeof event !== "string") {
593 | return { pass: false }
594 | }
595 |
596 | var namespaces = event.split(".")
597 | , eventType = namespaces.shift()
598 | , sortedNamespaces = namespaces.slice(0).sort()
599 | , namespaceRegExp = new RegExp("(^|\\.)" + sortedNamespaces.join("\\.(?:.*\\.)?") + "(\\.|$)")
600 |
601 | if (events[eventType] && namespaces.length) {
602 | for (var i = 0; i < events[eventType].length; i++) {
603 | var namespace = events[eventType][i].namespace
604 |
605 | if (namespaceRegExp.test(namespace))
606 | return { pass: true }
607 | }
608 | } else {
609 | return { pass: (events[eventType] && events[eventType].length > 0) }
610 | }
611 |
612 | return { pass: false }
613 | }
614 | }
615 | },
616 |
617 | toHandleWith: function () {
618 | return {
619 | compare: function (actual, eventName, eventHandler) {
620 | if ( !actual || actual.length === 0 ) return { pass: false };
621 | var normalizedEventName = eventName.split('.')[0]
622 | , stack = $._data($(actual).get(0), "events")[normalizedEventName]
623 |
624 | for (var i = 0; i < stack.length; i++) {
625 | if (stack[i].handler == eventHandler) return { pass: true }
626 | }
627 |
628 | return { pass: false }
629 | }
630 | }
631 | },
632 |
633 | toHaveBeenTriggeredOn: function () {
634 | return {
635 | compare: function (actual, selector) {
636 | var result = { pass: jasmine.jQuery.events.wasTriggered(selector, actual) }
637 |
638 | result.message = result.pass ?
639 | "Expected event " + $(actual) + " not to have been triggered on " + selector :
640 | "Expected event " + $(actual) + " to have been triggered on " + selector
641 |
642 | return result;
643 | }
644 | }
645 | },
646 |
647 | toHaveBeenTriggered: function (){
648 | return {
649 | compare: function (actual) {
650 | var eventName = actual.eventName
651 | , selector = actual.selector
652 | , result = { pass: jasmine.jQuery.events.wasTriggered(selector, eventName) }
653 |
654 | result.message = result.pass ?
655 | "Expected event " + eventName + " not to have been triggered on " + selector :
656 | "Expected event " + eventName + " to have been triggered on " + selector
657 |
658 | return result
659 | }
660 | }
661 | },
662 |
663 | toHaveBeenTriggeredOnAndWith: function (j$, customEqualityTesters) {
664 | return {
665 | compare: function (actual, selector, expectedArgs) {
666 | var wasTriggered = jasmine.jQuery.events.wasTriggered(selector, actual)
667 | , result = { pass: wasTriggered && jasmine.jQuery.events.wasTriggeredWith(selector, actual, expectedArgs, j$, customEqualityTesters) }
668 |
669 | if (wasTriggered) {
670 | var actualArgs = jasmine.jQuery.events.args(selector, actual, expectedArgs)[1]
671 | result.message = result.pass ?
672 | "Expected event " + actual + " not to have been triggered with " + jasmine.pp(expectedArgs) + " but it was triggered with " + jasmine.pp(actualArgs) :
673 | "Expected event " + actual + " to have been triggered with " + jasmine.pp(expectedArgs) + " but it was triggered with " + jasmine.pp(actualArgs)
674 |
675 | } else {
676 | // todo check on this
677 | result.message = result.pass ?
678 | "Expected event " + actual + " not to have been triggered on " + selector :
679 | "Expected event " + actual + " to have been triggered on " + selector
680 | }
681 |
682 | return result
683 | }
684 | }
685 | },
686 |
687 | toHaveBeenPreventedOn: function () {
688 | return {
689 | compare: function (actual, selector) {
690 | var result = { pass: jasmine.jQuery.events.wasPrevented(selector, actual) }
691 |
692 | result.message = result.pass ?
693 | "Expected event " + actual + " not to have been prevented on " + selector :
694 | "Expected event " + actual + " to have been prevented on " + selector
695 |
696 | return result
697 | }
698 | }
699 | },
700 |
701 | toHaveBeenPrevented: function () {
702 | return {
703 | compare: function (actual) {
704 | var eventName = actual.eventName
705 | , selector = actual.selector
706 | , result = { pass: jasmine.jQuery.events.wasPrevented(selector, eventName) }
707 |
708 | result.message = result.pass ?
709 | "Expected event " + eventName + " not to have been prevented on " + selector :
710 | "Expected event " + eventName + " to have been prevented on " + selector
711 |
712 | return result
713 | }
714 | }
715 | },
716 |
717 | toHaveBeenStoppedOn: function () {
718 | return {
719 | compare: function (actual, selector) {
720 | var result = { pass: jasmine.jQuery.events.wasStopped(selector, actual) }
721 |
722 | result.message = result.pass ?
723 | "Expected event " + actual + " not to have been stopped on " + selector :
724 | "Expected event " + actual + " to have been stopped on " + selector
725 |
726 | return result;
727 | }
728 | }
729 | },
730 |
731 | toHaveBeenStopped: function () {
732 | return {
733 | compare: function (actual) {
734 | var eventName = actual.eventName
735 | , selector = actual.selector
736 | , result = { pass: jasmine.jQuery.events.wasStopped(selector, eventName) }
737 |
738 | result.message = result.pass ?
739 | "Expected event " + eventName + " not to have been stopped on " + selector :
740 | "Expected event " + eventName + " to have been stopped on " + selector
741 |
742 | return result
743 | }
744 | }
745 | }
746 | })
747 |
748 | jasmine.getEnv().addCustomEqualityTester(function(a, b) {
749 | if (a && b) {
750 | if (a instanceof $ || jasmine.isDomNode(a)) {
751 | var $a = $(a)
752 |
753 | if (b instanceof $)
754 | return $a.length == b.length && a.is(b)
755 |
756 | return $a.is(b);
757 | }
758 |
759 | if (b instanceof $ || jasmine.isDomNode(b)) {
760 | var $b = $(b)
761 |
762 | if (a instanceof $)
763 | return a.length == $b.length && $b.is(a)
764 |
765 | return $(b).is(a);
766 | }
767 | }
768 | })
769 |
770 | jasmine.getEnv().addCustomEqualityTester(function (a, b) {
771 | if (a instanceof $ && b instanceof $ && a.size() == b.size())
772 | return a.is(b)
773 | })
774 | })
775 |
776 | afterEach(function () {
777 | jasmine.getFixtures().cleanUp()
778 | jasmine.getStyleFixtures().cleanUp()
779 | jasmine.jQuery.events.cleanUp()
780 | })
781 |
782 | window.readFixtures = function () {
783 | return jasmine.getFixtures().proxyCallTo_('read', arguments)
784 | }
785 |
786 | window.preloadFixtures = function () {
787 | jasmine.getFixtures().proxyCallTo_('preload', arguments)
788 | }
789 |
790 | window.loadFixtures = function () {
791 | jasmine.getFixtures().proxyCallTo_('load', arguments)
792 | }
793 |
794 | window.appendLoadFixtures = function () {
795 | jasmine.getFixtures().proxyCallTo_('appendLoad', arguments)
796 | }
797 |
798 | window.setFixtures = function (html) {
799 | return jasmine.getFixtures().proxyCallTo_('set', arguments)
800 | }
801 |
802 | window.appendSetFixtures = function () {
803 | jasmine.getFixtures().proxyCallTo_('appendSet', arguments)
804 | }
805 |
806 | window.sandbox = function (attributes) {
807 | return jasmine.getFixtures().sandbox(attributes)
808 | }
809 |
810 | window.spyOnEvent = function (selector, eventName) {
811 | return jasmine.jQuery.events.spyOn(selector, eventName)
812 | }
813 |
814 | window.preloadStyleFixtures = function () {
815 | jasmine.getStyleFixtures().proxyCallTo_('preload', arguments)
816 | }
817 |
818 | window.loadStyleFixtures = function () {
819 | jasmine.getStyleFixtures().proxyCallTo_('load', arguments)
820 | }
821 |
822 | window.appendLoadStyleFixtures = function () {
823 | jasmine.getStyleFixtures().proxyCallTo_('appendLoad', arguments)
824 | }
825 |
826 | window.setStyleFixtures = function (html) {
827 | jasmine.getStyleFixtures().proxyCallTo_('set', arguments)
828 | }
829 |
830 | window.appendSetStyleFixtures = function (html) {
831 | jasmine.getStyleFixtures().proxyCallTo_('appendSet', arguments)
832 | }
833 |
834 | window.loadJSONFixtures = function () {
835 | return jasmine.getJSONFixtures().proxyCallTo_('load', arguments)
836 | }
837 |
838 | window.getJSONFixture = function (url) {
839 | return jasmine.getJSONFixtures().proxyCallTo_('read', arguments)[url]
840 | }
841 | }));
842 |
--------------------------------------------------------------------------------
/themes/basic.scss:
--------------------------------------------------------------------------------
1 | #skitt-ui {
2 | display: block!important;
3 | }
4 | #skitt-ui.skitt-ui--hidden {
5 | display: none !important;
6 | }
7 |
--------------------------------------------------------------------------------
/themes/flat-amethyst/flat-amethyst.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #8E44AD !default;
4 | $buttonColor2: #9B59B6 !default;
5 | $listeningBoxColor: #8E44AD !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-clouds/flat-clouds.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #BDC3C7 !default;
4 | $buttonColor2: #ECF0F1 !default;
5 | $listeningBoxColor: #ECF0F1 !default;
6 | $instructionColor: #333 !default;
7 |
8 | @import '../flat/flat.scss';
9 |
--------------------------------------------------------------------------------
/themes/flat-concrete/flat-concrete.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #95A5A6 !default;
4 | $buttonColor2: #7F8C8D !default;
5 | $listeningBoxColor: #7F8C8D !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-emerald/flat-emerald.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #27AE60 !default;
4 | $buttonColor2: #2ECC71 !default;
5 | $listeningBoxColor: #27AE60 !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-midnight-blue/flat-midnight-blue.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #2C3E50 !default;
4 | $buttonColor2: #34495E !default;
5 | $listeningBoxColor: #2C3E50 !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-orange/flat-orange.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #F39C12 !default;
4 | $buttonColor2: #F1C40F !default;
5 | $listeningBoxColor: #F39C12 !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-pomegranate/flat-pomegranate.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #C0392B !default;
4 | $buttonColor2: #E74C3C !default;
5 | $listeningBoxColor: #C0392B !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-pumpkin/flat-pumpkin.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #D35400 !default;
4 | $buttonColor2: #E67E22 !default;
5 | $listeningBoxColor: #D35400 !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat-turquoise/flat-turquoise.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 |
3 | $buttonColor1: #16A085 !default;
4 | $buttonColor2: #1ABC9C !default;
5 | $listeningBoxColor: #16A085 !default;
6 |
7 | @import '../flat/flat.scss';
8 |
--------------------------------------------------------------------------------
/themes/flat/flat.scss:
--------------------------------------------------------------------------------
1 | @import '../basic';
2 |
3 | /* Variables */
4 |
5 | $toggleButtonWidth: 50px !default;
6 | $toggleButtonHeight: 50px !default;
7 | $buttonColor1: #2980B9 !default;
8 | $buttonColor2: #3498DB !default;
9 | $listeningBoxColor: #2980B9 !default;
10 | $instructionColor: #fff !default;
11 |
12 | /* Theme styles */
13 |
14 | #skitt-ui {
15 | height: $toggleButtonHeight;
16 | display: inline-block;
17 | background-color: $listeningBoxColor;
18 | z-index: 200;
19 | border-radius: $toggleButtonWidth / 2;
20 | position: fixed;
21 | bottom: 20px;
22 | left: 20px;
23 | outline: none;
24 | border: none;
25 | box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
26 | cursor: default;
27 | font-family: Lato,Helvetica,Arial,sans-serif;
28 | font-size: 16px;
29 | }
30 |
31 | #skitt-toggle-button {
32 | width: $toggleButtonWidth;
33 | height: $toggleButtonHeight;
34 | border-radius: 50%;
35 | cursor: pointer;
36 | display: inline-block;
37 | background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMSBUaW55Ly9FTicgICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS10aW55LmR0ZCc+PHN2ZyBiYXNlUHJvZmlsZT0idGlueSIgaGVpZ2h0PSIzMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJHdWlkZXNfX3gyNl9fRm9ybXMiLz48ZyBpZD0iSWNvbnMiPjxnPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTYsMjFjMi4yMDksMCw0LTEuNzkxLDQtNHYtN2MwLTIuMjA5LTEuNzkxLTQtNC00Yy0yLjIwOSwwLTQsMS43OTEtNCw0djdDMTIsMTkuMjA5LDEzLjc5MSwyMSwxNiwyMXogTTE0LDEwICAgIGMwLTEuMTAzLDAuODk3LTIsMi0yYzEuMTAzLDAsMiwwLjg5NywyLDJ2N2MwLDEuMTAzLTAuODk3LDItMiwyYy0xLjEwMywwLTItMC44OTctMi0yVjEweiIvPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMjQsMTdoLTJjMCwzLjMwOC0yLjY5Miw2LTYsNnMtNi0yLjY5Mi02LTZIOGMwLDQuMDc5LDMuMDU1LDcuNDM4LDcsNy45MzFWMjZoLTR2MmgxMHYtMmgtNHYtMS4wNjkgICAgQzIwLjk0NSwyNC40MzgsMjQsMjEuMDc5LDI0LDE3eiIvPjwvZz48L2c+PC9zdmc+');
38 | background-size: 72% 72%;
39 | background-position: $toggleButtonHeight * 0.14 $toggleButtonWidth * 0.12;
40 | background-repeat: no-repeat;
41 | -webkit-transition: background-color 400ms ease;
42 | float: left;
43 | }
44 |
45 | label#skitt-toggle-button__label {
46 | display: none;
47 | }
48 |
49 | .skitt-ui--not-listening #skitt-toggle-button {
50 | background-color: $buttonColor1;
51 | }
52 |
53 | .skitt-ui--listening #skitt-toggle-button {
54 | -webkit-animation: listen_pulse 2s ease-out infinite;
55 | }
56 |
57 | @-webkit-keyframes "listen_pulse" {
58 | 0% {
59 | background-color: $buttonColor1;
60 | }
61 | 50% {
62 | background-color: $buttonColor2;
63 | }
64 | 100% {
65 | background-color: $buttonColor1;
66 | }
67 | }
68 |
69 | .skitt-ui--not-listening #skitt-toggle-button:hover {
70 | background-color: $buttonColor2
71 | }
72 | .skitt-ui--listening #skitt-toggle-button:hover {
73 | background-color: $buttonColor2
74 | }
75 |
76 | #skitt-listening-box {
77 | float: left;
78 | display: inline-block;
79 | line-height: $toggleButtonHeight;
80 | color: $instructionColor;
81 | }
82 |
83 | #skitt-listening-text {
84 | display: inline-block;
85 | overflow: hidden;
86 | }
87 | .skitt-ui--not-listening #skitt-listening-text {
88 | width: 0;
89 | }
90 | .skitt-ui--listening #skitt-listening-text {
91 | width: 100%;
92 | -webkit-transition: width 1s ease-in-out;
93 | margin: 0 $toggleButtonWidth/2 0 15px;
94 | }
95 |
96 | #skitt-listening-text__samples {
97 | font-weight: bold;
98 | margin-left: 10px;
99 | }
100 |
101 | #skitt-listening-text__recognized-sentence {
102 | display: none;
103 | }
104 | @media (max-width: 1200px) and (orientation: portrait) {
105 | $sizeMultipliers: 2.5;
106 | #skitt-ui {
107 | border-radius: $toggleButtonWidth * $sizeMultipliers / 2;
108 | font-size: 35px;
109 | height: $toggleButtonHeight * $sizeMultipliers;
110 | }
111 | #skitt-toggle-button {
112 | width: $toggleButtonWidth * $sizeMultipliers;
113 | height: $toggleButtonHeight * $sizeMultipliers;
114 | background-position: $toggleButtonHeight * $sizeMultipliers * 0.14 $toggleButtonWidth * $sizeMultipliers * 0.12;
115 | }
116 | #skitt-listening-box {
117 | line-height: $toggleButtonHeight * $sizeMultipliers;
118 | }
119 | }
120 |
121 | @media (max-width: 1200px) and (orientation: landscape) {
122 | $sizeMultipliers: 1.6;
123 | #skitt-ui {
124 | border-radius: $toggleButtonWidth * $sizeMultipliers / 2;
125 | font-size: 25px;
126 | height: $toggleButtonHeight * $sizeMultipliers;
127 | }
128 | #skitt-toggle-button {
129 | width: $toggleButtonWidth * $sizeMultipliers;
130 | height: $toggleButtonHeight * $sizeMultipliers;
131 | background-position: $toggleButtonHeight * $sizeMultipliers * 0.14 $toggleButtonWidth * $sizeMultipliers * 0.12;
132 | }
133 | #skitt-listening-box {
134 | line-height: $toggleButtonHeight * $sizeMultipliers;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
3 |
4 | > A flexible GUI for interacting with Speech Recognition
5 |
6 | Speech KITT makes it easy to add a GUI to sites using Speech Recognition. Whether you are using [annyang](https://github.com/TalAter/annyang), a different library or webkitSpeechRecognition directly, KITT will take care of the GUI.
7 |
8 | Speech KITT provides a graphical interface for the user to start or stop Speech Recognition and see its current status. It can also help guide the user on how to interact with your site using their voice, providing instructions and sample commands. It can even be used to carry a natural conversation with the user, asking questions the user can answer with his voice, and then asking follow up questions.
9 |
10 | Speech KITT is fully customizable, and comes with many different themes (and instructions on how to create your own designs).
11 |
12 | [](https://github.com/TalAter/SpeechKITT)
13 |
14 |
15 | ## Hello World
16 |
17 | The most basic implementation requires 6 commands.
18 |
19 | 1. Let KITT know how to start and stop the SpeechRecognition engine you use with `SpeechKITT.setStartCommand()` and `SpeechKITT.setAbortCommand`.
20 | 2. Add events to your SpeechRecognition engine so it calls `SpeechKITT.onStart()` when it starts, and `SpeechKITT.onEnd()` when it stops.
21 | 3. Tell KITT which stylesheet to use for its GUI with `SpeechKITT.setStylesheet()` (KITT comes with a number of pre-made [styles](https://github.com/TalAter/SpeechKITT/tree/master/dist/themes)).
22 | 4. Start your engines with `SpeechKITT.vroom()`
23 |
24 | ````html
25 |
26 |
48 | ````
49 |
50 | ## Hello World - With annyang
51 |
52 | If you're doing [Speech Recognition with annyang](https://www.talater.com/annyang/), you can skip most of the configuration above. Just calling `SpeechKITT.annyang()` will take care of the configuration explained in steps 1 & 2 above.
53 |
54 | ````html
55 |
56 |
57 |
74 | ````
75 |
76 | ## API Docs
77 |
78 | For details on all available methods, options and more details, check out the [API documentation](https://github.com/TalAter/SpeechKITT/blob/master/docs/README.md).
79 |
80 | ## Pretty Badges
81 |
82 | [](https://travis-ci.org/TalAter/SpeechKITT)
83 |
84 | ### Author
85 |
86 | Tal Ater: [@TalAter](https://twitter.com/TalAter)
87 |
88 | ### License
89 |
90 | Licensed under [MIT](https://github.com/TalAter/SpeechKITT/blob/master/LICENSE).
91 |
--------------------------------------------------------------------------------
/demo/README-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalAter/SpeechKITT/082dc7323074e581c1937dfb042a5511030c0b44/demo/README-logo.png
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |