diff --git a/app/app.js b/app/app.js index 7ab011010..5c711d2b5 100644 --- a/app/app.js +++ b/app/app.js @@ -2,6 +2,11 @@ import Application from '@ember/application'; import Resolver from './resolver'; import loadInitializers from 'ember-load-initializers'; import config from './config/environment'; +import jsyaml from "npm:js-yaml"; + +// init jsyaml for codemirror, can't directly import npm module from addon `shared` +window.jsyaml||(window.jsyaml = jsyaml); + const App = Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, diff --git a/app/styles/components/_pipeline.scss b/app/styles/components/_pipeline.scss index 3e9dc0246..4f976cf2c 100644 --- a/app/styles/components/_pipeline.scss +++ b/app/styles/components/_pipeline.scss @@ -316,4 +316,9 @@ .text-line-through{ text-decoration: line-through !important; +} + +.CodeMirror{ + height: auto; + min-height: 300px; } \ No newline at end of file diff --git a/ember-cli-build.js b/ember-cli-build.js index 8bf520383..000d47378 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -26,7 +26,7 @@ module.exports = function(defaults) { codemirror: { modes: ['yaml', 'dockerfile', 'shell', 'markdown'], themes: ['monokai'], - addons: ['hint/show-hint.js','hint/anyword-hint.js'], + addonFiles: ['lint/lint.css', 'lint/lint.js', 'hint/show-hint.js', 'hint/show-hint.css', 'hint/anyword-hint.js', 'lint/yaml-lint.js'] }, outputPaths: { app: { @@ -89,11 +89,6 @@ module.exports = function(defaults) { app.import('bower_components/async/dist/async.js'); app.import('bower_components/jszip/dist/jszip.js') app.import('bower_components/position-calculator/dist/position-calculator.js'); - app.import('vendor/aws-sdk-ec2.js'); - app.import('vendor/codemirror/show-hint.js'); - app.import('vendor/file-saver/fileSaver.mini.js'); - app.import('vendor/codemirror/show-hint.css'); - app.import('vendor/json-sanitizer/json-sanitizer.js'); app.import('bower_components/identicon.js/pnglib.js'); app.import('bower_components/identicon.js/identicon.js'); app.import('bower_components/momentjs/moment.js'); @@ -109,6 +104,9 @@ module.exports = function(defaults) { app.import('vendor/prompt/prompt-v1-latin-300.woff2',{ destDir: 'assets/fonts/'}); app.import('vendor/prompt/prompt-v1-latin-600.woff', { destDir: 'assets/fonts/'}); app.import('vendor/prompt/prompt-v1-latin-600.woff2',{ destDir: 'assets/fonts/'}); + app.import('vendor/aws-sdk-ec2.js'); + app.import('vendor/file-saver/fileSaver.mini.js'); + app.import('vendor/json-sanitizer/json-sanitizer.js'); app.import('vendor/dropdown/bootstrap.js'); app.import('vendor/dropdown/bootstrap.css'); diff --git a/lib/pipeline/addon/import/template.hbs b/lib/pipeline/addon/import/template.hbs index 9aea6649e..944bf392d 100644 --- a/lib/pipeline/addon/import/template.hbs +++ b/lib/pipeline/addon/import/template.hbs @@ -3,7 +3,7 @@
-{{input-text-file accept=".yml, .yaml" name="pipeline.yml" canChangeName=false value=compose placeholder="pipelinesPage.importPlaceHolder"}} +{{input-text-file mode='yaml' accept=".yml, .yaml" name="pipeline.yml" canChangeName=false value=compose placeholder="pipelinesPage.importPlaceHolder"}}
{{top-errors errors=errors}} diff --git a/lib/shared/addon/components/input-text-file/component.js b/lib/shared/addon/components/input-text-file/component.js index 05772ee75..e725d435b 100644 --- a/lib/shared/addon/components/input-text-file/component.js +++ b/lib/shared/addon/components/input-text-file/component.js @@ -9,7 +9,7 @@ import { Promise as EmberPromise, all } from 'rsvp'; export default Component.extend({ layout, settings: service(), - + mode: 'text', label: null, namePlaceholder: '', nameRequired: false, @@ -18,13 +18,14 @@ export default Component.extend({ placeholder: "", accept: "text/*", multiple: false, + viewportMargin: Infinity, minHeight: 0, maxHeight: 200, inputName: false, canChangeName: true, canUpload: true, showUploadLabel: true, - + gutters: ["CodeMirror-lint-markers"], tagName: ['div'], _boundChange: null, diff --git a/lib/shared/addon/components/input-text-file/template.hbs b/lib/shared/addon/components/input-text-file/template.hbs index 1d07f19b3..ed1b18409 100644 --- a/lib/shared/addon/components/input-text-file/template.hbs +++ b/lib/shared/addon/components/input-text-file/template.hbs @@ -34,13 +34,12 @@
-
- {{textarea-autogrow +
+ {{ivy-codemirror value=value - classNames="form-control text-small" + valueUpdated=(if valueUpdated valueUpdated (action (mut value)) ) + options=(hash autofocus=true theme="monokai" lineNumbers=true mode=mode readOnly=(if (eq modalOpts.type 'review') true false) gutters=gutters lint=true viewportMargin=viewportMargin) placeholder=placeholder - minHeight=minHeight - maxHeight=maxHeight }}
diff --git a/lib/shared/addon/components/modal-yaml/component.js b/lib/shared/addon/components/modal-yaml/component.js new file mode 100644 index 000000000..7d40f9e42 --- /dev/null +++ b/lib/shared/addon/components/modal-yaml/component.js @@ -0,0 +1,103 @@ +import { alias } from '@ember/object/computed'; +import Component from '@ember/component'; +import NewOrEdit from 'ui/mixins/new-or-edit'; +import { inject as service } from '@ember/service'; +import { ajaxPromise } from 'ember-api-store/utils/ajax-promise'; +import CodeMirror from 'codemirror'; +import jsyaml from 'npm:js-yaml'; +import ModalBase from 'shared/mixins/modal-base'; +import fetchYaml from 'shared/utils/fetch-yaml'; +import layout from './template'; + +export default Component.extend(ModalBase, NewOrEdit, { + layout, + errors: null, + editing: false, + compose: null, + intl: service(), + classNames: ['modal-container', 'large-modal', 'fullscreen-modal'], + resource: alias('modalService.modalOpts.resource'), + model: null, + type: function (argument) { + let resource = this.get('model.resource'); + if(resource){ + return ` ${resource.type} `; + } + return ' '; + }.property('model.resource'), + mode: function () { + let resource = this.get('model.resource'); + if(resource){ + return 'Edit'; + } + return 'Import'; + }.property('model.resource'), + createLabel: function (argument) { + let resource = this.get('model.resource'); + if(resource){ + return 'generic.save'; + } + return 'generic.add'; + }.property('model.resource'), + name: function (argument) { + let resource = this.get('model.resource'); + if(resource){ + return resource.name + '.yaml'; + } + return 'kubenetes.yaml'; + }.property('model.resource'), + files: null, + growl: service(), + scope: service(), + store: service('store'), + init() { + this._super(...arguments); + window.jsyaml||(window.jsyaml=jsyaml); + let resource = this.get('resource'); + if(resource && resource.links.yaml){ + let yamlLink = resource.links.yaml + return fetchYaml(yamlLink) + .then(yaml => { + this.set('model', { + resource, + yaml + }); + }) + }else + this.set('model', { + resource, + yaml: '' + }); + }, + yamlObserve: function () { + let yaml = this.get('model.yaml'); + CodeMirror.lint.yaml(yaml); + }.observes('model.yaml'), + actions: { + save: function(success){ + let model = this.get('model'); + let lintError = CodeMirror.lint.yaml(model.yaml); + + if(lintError.length){ + this.set('errors', [this.get('intl').t('yamlPage.errors')]); + success(false); + return + } + this.set('errors', null); + let resource = model.resource; + if(resource){ + this.get('store').request({ + data: JSON.stringify(jsyaml.load(model.yaml)), + url: resource.links.yaml, + method: 'PUT' + }).then(data =>{ + this.send('cancel'); + }).catch(()=>{ + success(false); + }) + return + } + } + }, + +}); diff --git a/lib/shared/addon/components/modal-yaml/template.hbs b/lib/shared/addon/components/modal-yaml/template.hbs new file mode 100644 index 000000000..d9d26f582 --- /dev/null +++ b/lib/shared/addon/components/modal-yaml/template.hbs @@ -0,0 +1,11 @@ +
+

{{mode}}{{uc-first type}}Yaml

+
+ +
+{{input-text-file mode="yaml" accept=".yml, .yaml" name=name canChangeName=false value=model.yaml placeholder="pipelinesPage.importPlaceHolder"}} + +
+ +{{top-errors errors=errors}} +{{save-cancel save="save" cancel="cancel" createLabel=createLabel}} diff --git a/lib/shared/addon/mixins/cattle-transitioning-resource.js b/lib/shared/addon/mixins/cattle-transitioning-resource.js index 41082b74c..e345abe97 100644 --- a/lib/shared/addon/mixins/cattle-transitioning-resource.js +++ b/lib/shared/addon/mixins/cattle-transitioning-resource.js @@ -63,6 +63,7 @@ export default Mixin.create({ cookies: service(), growl: service(), intl: service(), + session: service(), modalService: service('modal'), reservedKeys: ['waitInterval','waitTimeout'], @@ -125,25 +126,33 @@ export default Mixin.create({ divider: true }); - // @TODO edit yaml action - //out.push({ - // sort: 95, - // label: 'action.edityaml', - // icon: 'icon icon-edit', - // action: 'editYaml', - //}); - // - out.push({ - sort: 96, - label: 'action.downloadYaml', - icon: 'icon icon-download', - action: 'downloadYaml', - bulkable: true, - enabled: !!l.yaml, - }); + if ( l.yaml ) { + out.push({ + sort: 95, + divider: true + }); + + out.push({ + sort: 96, + label: 'action.editYaml', + icon: 'icon icon-edit', + action: 'editYaml', + }); + + out.push({ + sort: 97, + label: 'action.downloadYaml', + icon: 'icon icon-download', + action: 'downloadYaml', + bulkable: true, + enabled: true, + }); + + + } out.push({ - sort: 97, + sort: 98, label: 'action.viewInApi', icon: 'icon icon-external-link', action: 'goToApi', @@ -151,11 +160,11 @@ export default Mixin.create({ }); out.push({ - sort: 98, + sort: 99, divider: true }); out.push({ - sort: 99, + sort: 100, label: 'action.remove', icon: 'icon icon-trash', action: 'promptDelete', @@ -192,6 +201,10 @@ export default Mixin.create({ downloadResourceYaml([this]); }, + editYaml(){ + get(this,'modalService').toggleModal('modal-yaml', {resource: this}); + }, + goToApi() { let url = get(this,'links.self'); // http://a.b.c.d/v1/things/id, a.b.c.d is where the UI is running window.open(url, '_blank'); diff --git a/lib/shared/app/components/modal-yaml/component.js b/lib/shared/app/components/modal-yaml/component.js new file mode 100644 index 000000000..002bfc42a --- /dev/null +++ b/lib/shared/app/components/modal-yaml/component.js @@ -0,0 +1 @@ +export { default } from 'shared/components/modal-yaml/component'; \ No newline at end of file diff --git a/lib/shared/package.json b/lib/shared/package.json index a790e92b0..9abf55836 100644 --- a/lib/shared/package.json +++ b/lib/shared/package.json @@ -17,6 +17,8 @@ "shell-quote": "*", "url-regex": "*", "yamljs": "*", - "xterm": "*" + "xterm": "*", + "ivy-codemirror": "*", + "jsyaml": "*" } } diff --git a/translations/en-us.yaml b/translations/en-us.yaml index c2cfde96a..c7c852598 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -5191,6 +5191,7 @@ action: downloadYaml: Download YAML edit: Edit editService: Edit Service + editYaml: Edit as Yaml evacuate: Evacuate execute: Execute Shell exportConfig: Export Config @@ -5425,3 +5426,6 @@ volumeSource: label: Log Format placeholder: e.g. json helpText: The format of your container's log. + +yamlPage: + errors: There are errors in the yaml. diff --git a/vendor/codemirror/show-hint.css b/vendor/codemirror/show-hint.css deleted file mode 100644 index eb362f330..000000000 --- a/vendor/codemirror/show-hint.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - Copied from https://github.com/codemirror/CodeMirror/blob/master/addon/hint/show-hint.css -*/ -.CodeMirror-hints { - position: absolute; - z-index: 10; - overflow: hidden; - list-style: none; - - margin: 0; - padding: 2px; - - -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2); - -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2); - box-shadow: 2px 3px 5px rgba(0,0,0,.2); - border-radius: 3px; - border: 1px solid silver; - - background: white; - font-size: 90%; - font-family: monospace; - - max-height: 20em; - overflow-y: auto; -} - -.CodeMirror-hint { - margin: 0; - padding: 0 4px; - border-radius: 2px; - white-space: pre; - color: black; - cursor: pointer; -} - -li.CodeMirror-hint-active { - background: #08f; - color: white; -} -.CodeMirror-hints > li:hover { - background: #08f; - color: white; -} diff --git a/vendor/codemirror/show-hint.js b/vendor/codemirror/show-hint.js deleted file mode 100644 index 85e1e27cc..000000000 --- a/vendor/codemirror/show-hint.js +++ /dev/null @@ -1,440 +0,0 @@ -// Copied from https://github.com/codemirror/CodeMirror/blob/master/addon/hint/show-hint.js - -// CodeMirror, copyright (c) by Marijn Haverbeke and others -// Distributed under an MIT license: http://codemirror.net/LICENSE - -(function(mod) { - if (typeof exports == "object" && typeof module == "object") // CommonJS - mod(require("../../lib/codemirror")); - else if (typeof define == "function" && define.amd) // AMD - define(["../../lib/codemirror"], mod); - else // Plain browser env - mod(CodeMirror); -})(function(CodeMirror) { - "use strict"; - - var HINT_ELEMENT_CLASS = "CodeMirror-hint"; - var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active"; - - // This is the old interface, kept around for now to stay - // backwards-compatible. - CodeMirror.showHint = function(cm, getHints, options) { - if (!getHints) return cm.showHint(options); - if (options && options.async) getHints.async = true; - var newOpts = {hint: getHints}; - if (options) for (var prop in options) newOpts[prop] = options[prop]; - return cm.showHint(newOpts); - }; - - CodeMirror.defineExtension("showHint", function(options) { - options = parseOptions(this, this.getCursor("start"), options); - var selections = this.listSelections() - if (selections.length > 1) return; - // By default, don't allow completion when something is selected. - // A hint function can have a `supportsSelection` property to - // indicate that it can handle selections. - if (this.somethingSelected()) { - if (!options.hint.supportsSelection) return; - // Don't try with cross-line selections - for (var i = 0; i < selections.length; i++) - if (selections[i].head.line != selections[i].anchor.line) return; - } - - if (this.state.completionActive) this.state.completionActive.close(); - var completion = this.state.completionActive = new Completion(this, options); - if (!completion.options.hint) return; - - CodeMirror.signal(this, "startCompletion", this); - completion.update(true); - }); - - function Completion(cm, options) { - this.cm = cm; - this.options = options; - this.widget = null; - this.debounce = 0; - this.tick = 0; - this.startPos = this.cm.getCursor("start"); - this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length; - - var self = this; - cm.on("cursorActivity", this.activityFunc = function() { self.cursorActivity(); }); - } - - var requestAnimationFrame = window.requestAnimationFrame || function(fn) { - return setTimeout(fn, 1000/60); - }; - var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout; - - Completion.prototype = { - close: function() { - if (!this.active()) return; - this.cm.state.completionActive = null; - this.tick = null; - this.cm.off("cursorActivity", this.activityFunc); - - if (this.widget && this.data) CodeMirror.signal(this.data, "close"); - if (this.widget) this.widget.close(); - CodeMirror.signal(this.cm, "endCompletion", this.cm); - }, - - active: function() { - return this.cm.state.completionActive == this; - }, - - pick: function(data, i) { - var completion = data.list[i]; - if (completion.hint) completion.hint(this.cm, data, completion); - else this.cm.replaceRange(getText(completion), completion.from || data.from, - completion.to || data.to, "complete"); - CodeMirror.signal(data, "pick", completion); - this.close(); - }, - - cursorActivity: function() { - if (this.debounce) { - cancelAnimationFrame(this.debounce); - this.debounce = 0; - } - - var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line); - if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch || - pos.ch < this.startPos.ch || this.cm.somethingSelected() || - (pos.ch && this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) { - this.close(); - } else { - var self = this; - this.debounce = requestAnimationFrame(function() {self.update();}); - if (this.widget) this.widget.disable(); - } - }, - - update: function(first) { - if (this.tick == null) return - var self = this, myTick = ++this.tick - fetchHints(this.options.hint, this.cm, this.options, function(data) { - if (self.tick == myTick) self.finishUpdate(data, first) - }) - }, - - finishUpdate: function(data, first) { - if (this.data) CodeMirror.signal(this.data, "update"); - - var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle); - if (this.widget) this.widget.close(); - - if (data && this.data && isNewCompletion(this.data, data)) return; - this.data = data; - - if (data && data.list.length) { - if (picked && data.list.length == 1) { - this.pick(data, 0); - } else { - this.widget = new Widget(this, data); - CodeMirror.signal(data, "shown"); - } - } - } - }; - - function isNewCompletion(old, nw) { - var moved = CodeMirror.cmpPos(nw.from, old.from) - return moved > 0 && old.to.ch - old.from.ch != nw.to.ch - nw.from.ch - } - - function parseOptions(cm, pos, options) { - var editor = cm.options.hintOptions; - var out = {}; - for (var prop in defaultOptions) out[prop] = defaultOptions[prop]; - if (editor) for (var prop in editor) - if (editor[prop] !== undefined) out[prop] = editor[prop]; - if (options) for (var prop in options) - if (options[prop] !== undefined) out[prop] = options[prop]; - if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos) - return out; - } - - function getText(completion) { - if (typeof completion == "string") return completion; - else return completion.text; - } - - function buildKeyMap(completion, handle) { - var baseMap = { - Up: function() {handle.moveFocus(-1);}, - Down: function() {handle.moveFocus(1);}, - PageUp: function() {handle.moveFocus(-handle.menuSize() + 1, true);}, - PageDown: function() {handle.moveFocus(handle.menuSize() - 1, true);}, - Home: function() {handle.setFocus(0);}, - End: function() {handle.setFocus(handle.length - 1);}, - Enter: handle.pick, - Tab: handle.pick, - Esc: handle.close - }; - var custom = completion.options.customKeys; - var ourMap = custom ? {} : baseMap; - function addBinding(key, val) { - var bound; - if (typeof val != "string") - bound = function(cm) { return val(cm, handle); }; - // This mechanism is deprecated - else if (baseMap.hasOwnProperty(val)) - bound = baseMap[val]; - else - bound = val; - ourMap[key] = bound; - } - if (custom) - for (var key in custom) if (custom.hasOwnProperty(key)) - addBinding(key, custom[key]); - var extra = completion.options.extraKeys; - if (extra) - for (var key in extra) if (extra.hasOwnProperty(key)) - addBinding(key, extra[key]); - return ourMap; - } - - function getHintElement(hintsElement, el) { - while (el && el != hintsElement) { - if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el; - el = el.parentNode; - } - } - - function Widget(completion, data) { - this.completion = completion; - this.data = data; - this.picked = false; - var widget = this, cm = completion.cm; - - var hints = this.hints = document.createElement("ul"); - hints.className = "CodeMirror-hints"; - this.selectedHint = data.selectedHint || 0; - - var completions = data.list; - for (var i = 0; i < completions.length; ++i) { - var elt = hints.appendChild(document.createElement("li")), cur = completions[i]; - var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS); - if (cur.className != null) className = cur.className + " " + className; - elt.className = className; - if (cur.render) cur.render(elt, data, cur); - else elt.appendChild(document.createTextNode(cur.displayText || getText(cur))); - elt.hintId = i; - } - - var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null); - var left = pos.left, top = pos.bottom, below = true; - hints.style.left = left + "px"; - hints.style.top = top + "px"; - // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor. - var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth); - var winH = window.innerHeight || Math.max(document.body.offsetHeight, document.documentElement.offsetHeight); - (completion.options.container || document.body).appendChild(hints); - var box = hints.getBoundingClientRect(), overlapY = box.bottom - winH; - var scrolls = hints.scrollHeight > hints.clientHeight + 1 - var startScroll = cm.getScrollInfo(); - - if (overlapY > 0) { - var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top); - if (curTop - height > 0) { // Fits above cursor - hints.style.top = (top = pos.top - height) + "px"; - below = false; - } else if (height > winH) { - hints.style.height = (winH - 5) + "px"; - hints.style.top = (top = pos.bottom - box.top) + "px"; - var cursor = cm.getCursor(); - if (data.from.ch != cursor.ch) { - pos = cm.cursorCoords(cursor); - hints.style.left = (left = pos.left) + "px"; - box = hints.getBoundingClientRect(); - } - } - } - var overlapX = box.right - winW; - if (overlapX > 0) { - if (box.right - box.left > winW) { - hints.style.width = (winW - 5) + "px"; - overlapX -= (box.right - box.left) - winW; - } - hints.style.left = (left = pos.left - overlapX) + "px"; - } - if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling) - node.style.paddingRight = cm.display.nativeBarWidth + "px" - - cm.addKeyMap(this.keyMap = buildKeyMap(completion, { - moveFocus: function(n, avoidWrap) { widget.changeActive(widget.selectedHint + n, avoidWrap); }, - setFocus: function(n) { widget.changeActive(n); }, - menuSize: function() { return widget.screenAmount(); }, - length: completions.length, - close: function() { completion.close(); }, - pick: function() { widget.pick(); }, - data: data - })); - - if (completion.options.closeOnUnfocus) { - var closingOnBlur; - cm.on("blur", this.onBlur = function() { closingOnBlur = setTimeout(function() { completion.close(); }, 100); }); - cm.on("focus", this.onFocus = function() { clearTimeout(closingOnBlur); }); - } - - cm.on("scroll", this.onScroll = function() { - var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect(); - var newTop = top + startScroll.top - curScroll.top; - var point = newTop - (window.pageYOffset || (document.documentElement || document.body).scrollTop); - if (!below) point += hints.offsetHeight; - if (point <= editor.top || point >= editor.bottom) return completion.close(); - hints.style.top = newTop + "px"; - hints.style.left = (left + startScroll.left - curScroll.left) + "px"; - }); - - CodeMirror.on(hints, "dblclick", function(e) { - var t = getHintElement(hints, e.target || e.srcElement); - if (t && t.hintId != null) {widget.changeActive(t.hintId); widget.pick();} - }); - - CodeMirror.on(hints, "click", function(e) { - var t = getHintElement(hints, e.target || e.srcElement); - if (t && t.hintId != null) { - widget.changeActive(t.hintId); - if (completion.options.completeOnSingleClick) widget.pick(); - } - }); - - CodeMirror.on(hints, "mousedown", function() { - setTimeout(function(){cm.focus();}, 20); - }); - - CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]); - return true; - } - - Widget.prototype = { - close: function() { - if (this.completion.widget != this) return; - this.completion.widget = null; - this.hints.parentNode.removeChild(this.hints); - this.completion.cm.removeKeyMap(this.keyMap); - - var cm = this.completion.cm; - if (this.completion.options.closeOnUnfocus) { - cm.off("blur", this.onBlur); - cm.off("focus", this.onFocus); - } - cm.off("scroll", this.onScroll); - }, - - disable: function() { - this.completion.cm.removeKeyMap(this.keyMap); - var widget = this; - this.keyMap = {Enter: function() { widget.picked = true; }}; - this.completion.cm.addKeyMap(this.keyMap); - }, - - pick: function() { - this.completion.pick(this.data, this.selectedHint); - }, - - changeActive: function(i, avoidWrap) { - if (i >= this.data.list.length) - i = avoidWrap ? this.data.list.length - 1 : 0; - else if (i < 0) - i = avoidWrap ? 0 : this.data.list.length - 1; - if (this.selectedHint == i) return; - var node = this.hints.childNodes[this.selectedHint]; - node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, ""); - node = this.hints.childNodes[this.selectedHint = i]; - node.className += " " + ACTIVE_HINT_ELEMENT_CLASS; - if (node.offsetTop < this.hints.scrollTop) - this.hints.scrollTop = node.offsetTop - 3; - else if (node.offsetTop + node.offsetHeight > this.hints.scrollTop + this.hints.clientHeight) - this.hints.scrollTop = node.offsetTop + node.offsetHeight - this.hints.clientHeight + 3; - CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node); - }, - - screenAmount: function() { - return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1; - } - }; - - function applicableHelpers(cm, helpers) { - if (!cm.somethingSelected()) return helpers - var result = [] - for (var i = 0; i < helpers.length; i++) - if (helpers[i].supportsSelection) result.push(helpers[i]) - return result - } - - function fetchHints(hint, cm, options, callback) { - if (hint.async) { - hint(cm, callback, options) - } else { - var result = hint(cm, options) - if (result && result.then) result.then(callback) - else callback(result) - } - } - - function resolveAutoHints(cm, pos) { - var helpers = cm.getHelpers(pos, "hint"), words - if (helpers.length) { - var resolved = function(cm, callback, options) { - var app = applicableHelpers(cm, helpers); - function run(i) { - if (i == app.length) return callback(null) - fetchHints(app[i], cm, options, function(result) { - if (result && result.list.length > 0) callback(result) - else run(i + 1) - }) - } - run(0) - } - resolved.async = true - resolved.supportsSelection = true - return resolved - } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) { - return function(cm) { return CodeMirror.hint.fromList(cm, {words: words}) } - } else if (CodeMirror.hint.anyword) { - return function(cm, options) { return CodeMirror.hint.anyword(cm, options) } - } else { - return function() {} - } - } - - CodeMirror.registerHelper("hint", "auto", { - resolve: resolveAutoHints - }); - - CodeMirror.registerHelper("hint", "fromList", function(cm, options) { - var cur = cm.getCursor(), token = cm.getTokenAt(cur); - var to = CodeMirror.Pos(cur.line, token.end); - if (token.string && /\w/.test(token.string[token.string.length - 1])) { - var term = token.string, from = CodeMirror.Pos(cur.line, token.start); - } else { - var term = "", from = to; - } - var found = []; - for (var i = 0; i < options.words.length; i++) { - var word = options.words[i]; - if (word.slice(0, term.length) == term) - found.push(word); - } - - if (found.length) return {list: found, from: from, to: to}; - }); - - CodeMirror.commands.autocomplete = CodeMirror.showHint; - - var defaultOptions = { - hint: CodeMirror.hint.auto, - completeSingle: true, - alignWithWord: true, - closeCharacters: /[\s()\[\]{};:>,]/, - closeOnUnfocus: true, - completeOnSingleClick: true, - container: null, - customKeys: null, - extraKeys: null - }; - - CodeMirror.defineOption("hintOptions", null); -});