coffeekraken-s-codemirror-component
Advanced tools
Comparing version 1.0.7 to 1.0.8
@@ -147,11 +147,18 @@ "use strict"; | ||
this._refs.run.className = "".concat(this._componentNameDash, "__run"); | ||
this._refs.run.innerHTML = 'Run'; | ||
this._refs.run.innerHTML = this.props.runLabel; | ||
this._refs.copy = document.createElement('button'); | ||
this._refs.copy.className = "".concat(this._componentNameDash, "__copy"); | ||
this._refs.copy.innerHTML = 'Copy to clipboard'; // init accept | ||
this._refs.copy.innerHTML = this.props.copyLabel; // display actions | ||
if (this.props.displayActions === 'always') { | ||
this.addComponentClass(this, null, 'actions-visible'); | ||
} // init accept | ||
this._initAccept(); // append elements to actions | ||
this._refs.actions.appendChild(this._refs.copy); | ||
if (this.props.copyEnabled) { | ||
this._refs.actions.appendChild(this._refs.copy); | ||
} | ||
@@ -181,3 +188,5 @@ if (this.props.updateOn === 'run') { | ||
this._autoFormatCode(); // handle update | ||
if (this.props.autoFormat) { | ||
this._autoFormatCode(); | ||
} // handle update | ||
@@ -234,3 +243,5 @@ | ||
this._autoFormatCode(); | ||
if (this.props.autoFormat) { | ||
this._autoFormatCode(); | ||
} | ||
@@ -342,3 +353,3 @@ if (this._refs.modes) { | ||
_this4._refs.copy.innerHTML = 'Copy to clipboard'; | ||
_this4._refs.copy.innerHTML = _this4.props.copyLabel; | ||
}, 1000); | ||
@@ -386,3 +397,3 @@ return _this4._codemirror.getValue(); | ||
// handle run button | ||
_this5._refs.run.innerHTML = 'Compiling...'; | ||
_this5._refs.run.innerHTML = _this5.props.compilingLabel; | ||
_this5._refs.run.disabled = true; // launch a compileStart event | ||
@@ -408,3 +419,3 @@ | ||
if (_this5.props.compile) { | ||
_this5._refs.run.innerHTML = 'Compiled!'; // remove class | ||
_this5._refs.run.innerHTML = _this5.props.compiledLabel; // remove class | ||
@@ -422,3 +433,3 @@ _this5.removeComponentClass(_this5, null, 'compiling'); // add success class | ||
setTimeout(function () { | ||
_this5._refs.run.innerHTML = 'Run'; | ||
_this5._refs.run.innerHTML = _this5.props.runLabel; | ||
@@ -439,7 +450,7 @@ _this5._refs.run.classList.remove('success'); // add success class | ||
}, function (error) { | ||
_this5._refs.run.innerHTML = 'Error while compiling...'; | ||
_this5._refs.run.innerHTML = _this5.props.compileErrorLabel; | ||
console.error('Compiling error', error); | ||
if (_this5.props.compile) { | ||
_this5._refs.run.innerHTML = 'Compiled!'; // remove class | ||
_this5._refs.run.innerHTML = _this5.props.compiledLabel; // remove class | ||
@@ -517,3 +528,3 @@ _this5.removeComponentClass(_this5, null, 'compiling'); // add success class | ||
value: function defaultCss(componentName, componentNameDash) { | ||
return "\n\t\t\t".concat(componentNameDash, " {\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:relative;\n\t\t\t}\n\t\t\t.CodeMirror{font-family:monospace;height:300px;color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}\n\t\t\t").concat(componentNameDash, " .CodeMirror{\n\t\t\t\theight:100%;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-lines {\n\t\t\t\tpadding: 60px 10px 10px 0;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-sizer[style*=\"margin-left: 0px;\"] {\n\t\t\t\tpadding-left: 20px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions {\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:15px; right:0px;\n\t\t\t\tz-index:90;\n\t\t\t\topacity:0;\n\t\t\t\ttransition:all .1s ease-in-out;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button {\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tbackground-repeat:no-repeat;\n\t\t\t\tbackground-size:12px;\n\t\t\t\tbackground-position:0 50%;\n\t\t\t\tpadding:0 10px 0 20px;\n\t\t\t\tmargin-left:10px;\n\t\t\t\tcolor: #37A0CE;\n\t\t\t\toutline:none;\n\t\t\t\tborder:none;\n\t\t\t\tcursor:pointer;\n\t\t\t\tfont-size:12px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button:disabled {\n\t\t\t\topacity:.65;\n\t\t\t\tcolor: #f2bc2b;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.error {\n\t\t\t\tcolor: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.success {\n\t\t\t\tcolor: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__modes {\n\t\t\t\tmargin-right: 10px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name {\n\t\t\t\tbox-sizing:border-box;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\tpadding:15px 20px 10px 20px;\n\t\t\t\twidth:100%;\n\t\t\t\tz-index:10;\n\t\t\t\tdisplay:block;\n\t\t\t\tfont-size:16px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling {\n\t\t\t 0% {\n\t\t\t left:0;\n\t\t\t\t right:100%;\n\t\t\t }\n\t\t\t\t50% {\n\t\t\t\t\tright:0;\n\t\t\t\t}\n\t\t\t 100% {\n\t\t\t\t left:100%;\n\t\t\t\t right:0;\n\t\t\t }\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling-success {\n\t\t\t\t0% {\n\t\t\t\t opacity:0;\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\topacity:1;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: #f2bc2b;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling 1.5s ease-in-out infinite;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling-success .8s cubic-bezier(0.275, 0.200, 0.090, 1);\n\t\t\t\tbackground: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-error .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name:after {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\twidth:100%; height:100%;\n\t\t\t\tbackground:rgba(0,0,0,.1);\n\t\t\t\tmix-blend-mode:overlay;\n\t\t\t\tpointer-events:none;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:after {\n\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__copy {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M15.143 13.244l.837-2.244 2.698 5.641-5.678 2.502.805-2.23s-8.055-3.538-7.708-10.913c2.715 5.938 9.046 7.244 9.046 7.244zm8.857-7.244v18h-18v-6h-6v-18h18v6h6zm-2 2h-12.112c-.562-.578-1.08-1.243-1.521-2h7.633v-4h-14v14h4v-3.124c.6.961 1.287 1.823 2 2.576v6.548h14v-14z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__run {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm0-2C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9 17V7l9 5-9 5z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name.cm-s-default {\n\t\t\t\tbackground-color: #f7f7f7;\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__actions,\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__actions,\n\t\t\t").concat(componentNameDash, ":hover .").concat(componentNameDash, "__actions {\n\t\t\t\topacity:1;\n\t\t\t\tright:10px;\n\t\t\t}\n\t\t"); | ||
return "\n\t\t\t".concat(componentNameDash, " {\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:relative;\n\t\t\t}\n\t\t\t.CodeMirror{font-family:monospace;height:300px;color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}\n\t\t\t").concat(componentNameDash, " .CodeMirror{\n\t\t\t\theight:100%;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-lines {\n\t\t\t\tpadding: 60px 10px 10px 0;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-sizer[style*=\"margin-left: 0px;\"] {\n\t\t\t\tpadding-left: 20px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions {\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:15px; right:0px;\n\t\t\t\tz-index:90;\n\t\t\t\topacity:0;\n\t\t\t\ttransition:all .1s ease-in-out;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button {\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tbackground-repeat:no-repeat;\n\t\t\t\tbackground-size:12px;\n\t\t\t\tbackground-position:0 50%;\n\t\t\t\tpadding:0 10px 0 20px;\n\t\t\t\tmargin-left:10px;\n\t\t\t\tcolor: #37A0CE;\n\t\t\t\toutline:none;\n\t\t\t\tborder:none;\n\t\t\t\tcursor:pointer;\n\t\t\t\tfont-size:12px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button:disabled {\n\t\t\t\topacity:.65;\n\t\t\t\tcolor: #f2bc2b;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.error {\n\t\t\t\tcolor: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.success {\n\t\t\t\tcolor: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__modes {\n\t\t\t\tmargin-right: 10px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name {\n\t\t\t\tbox-sizing:border-box;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\tpadding:15px 20px 10px 20px;\n\t\t\t\twidth:100%;\n\t\t\t\tz-index:10;\n\t\t\t\tdisplay:block;\n\t\t\t\tfont-size:16px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling {\n\t\t\t 0% {\n\t\t\t left:0;\n\t\t\t\t right:100%;\n\t\t\t }\n\t\t\t\t50% {\n\t\t\t\t\tright:0;\n\t\t\t\t}\n\t\t\t 100% {\n\t\t\t\t left:100%;\n\t\t\t\t right:0;\n\t\t\t }\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling-success {\n\t\t\t\t0% {\n\t\t\t\t opacity:0;\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\topacity:1;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: #f2bc2b;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling 1.5s ease-in-out infinite;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling-success .8s cubic-bezier(0.275, 0.200, 0.090, 1);\n\t\t\t\tbackground: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-error .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name:after {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\twidth:100%; height:100%;\n\t\t\t\tbackground:rgba(0,0,0,.1);\n\t\t\t\tmix-blend-mode:overlay;\n\t\t\t\tpointer-events:none;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:after {\n\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__copy {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M15.143 13.244l.837-2.244 2.698 5.641-5.678 2.502.805-2.23s-8.055-3.538-7.708-10.913c2.715 5.938 9.046 7.244 9.046 7.244zm8.857-7.244v18h-18v-6h-6v-18h18v6h6zm-2 2h-12.112c-.562-.578-1.08-1.243-1.521-2h7.633v-4h-14v14h4v-3.124c.6.961 1.287 1.823 2 2.576v6.548h14v-14z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__run {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm0-2C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9 17V7l9 5-9 5z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name.cm-s-default {\n\t\t\t\tbackground-color: #f7f7f7;\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--actions-visible .").concat(componentNameDash, "__actions,\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__actions,\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__actions,\n\t\t\t").concat(componentNameDash, ":hover .").concat(componentNameDash, "__actions {\n\t\t\t\topacity:1;\n\t\t\t\tright:10px;\n\t\t\t}\n\t\t"); | ||
} | ||
@@ -557,2 +568,9 @@ }, { | ||
/** | ||
* Specify if need to auto format the code or not | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
autoFormat: true, | ||
/** | ||
* Set the indent unit to use | ||
@@ -632,2 +650,9 @@ * @prop | ||
/** | ||
* Specify the display action mode. Can be "hover" or "always" | ||
* @prop | ||
* @type {String} | ||
*/ | ||
displayActions: 'hover', | ||
/** | ||
* Specify when to trigger the update | ||
@@ -641,2 +666,44 @@ * @prop | ||
/** | ||
* Specify the run label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
runLabel: 'Run', | ||
/** | ||
* Specify the compiling label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
compilingLabel: 'Compiling...', | ||
/** | ||
* Specify the compiled label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
compiledLabel: 'Compiled!', | ||
/** | ||
* Specify the compile error label | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
compileErrorLabel: 'Compilation error...', | ||
/** | ||
* Specify if the copy feature is enables or not | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
copyEnabled: true, | ||
/** | ||
* Specify the copy to clipboard label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
copyLabel: 'Copy', | ||
/** | ||
* Update timeout when the updateOn property is on "change" | ||
@@ -643,0 +710,0 @@ * @prop |
@@ -62,2 +62,11 @@ # SCodemirrorComponent | ||
### autoFormat | ||
Specify if need to auto format the code or not | ||
Type : **{ [Boolean](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) }** | ||
Default : **true** | ||
### indentUnit | ||
@@ -155,2 +164,11 @@ | ||
### displayActions | ||
Specify the display action mode. Can be "hover" or "always" | ||
Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }** | ||
Default : **hover** | ||
### updateOn | ||
@@ -167,2 +185,56 @@ | ||
### runLabel | ||
Specify the run label | ||
Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }** | ||
Default : **Run** | ||
### compilingLabel | ||
Specify the compiling label | ||
Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }** | ||
Default : **Compiling...** | ||
### compiledLabel | ||
Specify the compiled label | ||
Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }** | ||
Default : **Compiled!** | ||
### compileErrorLabel | ||
Specify the compile error label | ||
Type : **{ [Boolean](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) }** | ||
Default : **Compilation error...** | ||
### copyEnabled | ||
Specify if the copy feature is enables or not | ||
Type : **{ [Boolean](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) }** | ||
Default : **true** | ||
### copyLabel | ||
Specify the copy to clipboard label | ||
Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }** | ||
Default : **Copy** | ||
### updateTimeout | ||
@@ -169,0 +241,0 @@ |
{ | ||
"name": "coffeekraken-s-codemirror-component", | ||
"version": "1.0.7", | ||
"version": "1.0.8", | ||
"description": "Webcomponent wrapper for the codemirror editor library.", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -70,2 +70,9 @@ import SWebComponent from 'coffeekraken-sugar/js/core/SWebComponent' | ||
/** | ||
* Specify if need to auto format the code or not | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
autoFormat: true, | ||
/** | ||
* Set the indent unit to use | ||
@@ -145,2 +152,9 @@ * @prop | ||
/** | ||
* Specify the display action mode. Can be "hover" or "always" | ||
* @prop | ||
* @type {String} | ||
*/ | ||
displayActions: 'hover', | ||
/** | ||
* Specify when to trigger the update | ||
@@ -154,2 +168,44 @@ * @prop | ||
/** | ||
* Specify the run label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
runLabel: 'Run', | ||
/** | ||
* Specify the compiling label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
compilingLabel: 'Compiling...', | ||
/** | ||
* Specify the compiled label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
compiledLabel: 'Compiled!', | ||
/** | ||
* Specify the compile error label | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
compileErrorLabel: 'Compilation error...', | ||
/** | ||
* Specify if the copy feature is enables or not | ||
* @prop | ||
* @type {Boolean} | ||
*/ | ||
copyEnabled: true, | ||
/** | ||
* Specify the copy to clipboard label | ||
* @prop | ||
* @type {String} | ||
*/ | ||
copyLabel: 'Copy', | ||
/** | ||
* Update timeout when the updateOn property is on "change" | ||
@@ -318,2 +374,3 @@ * @prop | ||
} | ||
.${componentNameDash}--actions-visible .${componentNameDash}__actions, | ||
.${componentNameDash}--compiling .${componentNameDash}__actions, | ||
@@ -374,7 +431,13 @@ .${componentNameDash}--compiling-success .${componentNameDash}__actions, | ||
this._refs.run.className = `${this._componentNameDash}__run`; | ||
this._refs.run.innerHTML = 'Run'; | ||
this._refs.run.innerHTML = this.props.runLabel; | ||
this._refs.copy = document.createElement('button'); | ||
this._refs.copy.className = `${this._componentNameDash}__copy`; | ||
this._refs.copy.innerHTML = 'Copy to clipboard'; | ||
this._refs.copy.innerHTML = this.props.copyLabel; | ||
// display actions | ||
if (this.props.displayActions === 'always') { | ||
this.addComponentClass(this, null, 'actions-visible') | ||
} | ||
// init accept | ||
@@ -384,3 +447,5 @@ this._initAccept(); | ||
// append elements to actions | ||
this._refs.actions.appendChild(this._refs.copy); | ||
if (this.props.copyEnabled) { | ||
this._refs.actions.appendChild(this._refs.copy); | ||
} | ||
if (this.props.updateOn === 'run') { | ||
@@ -412,3 +477,5 @@ this._refs.actions.appendChild(this._refs.run); | ||
// auto format | ||
this._autoFormatCode(); | ||
if (this.props.autoFormat) { | ||
this._autoFormatCode(); | ||
} | ||
@@ -454,3 +521,5 @@ // handle update | ||
this._codemirror.setOption('mode', mode); | ||
this._autoFormatCode(); | ||
if (this.props.autoFormat) { | ||
this._autoFormatCode(); | ||
} | ||
if (this._refs.modes) { | ||
@@ -534,3 +603,3 @@ this._refs.modes.value = newVal; | ||
this._refs.copy.classList.remove('success'); | ||
this._refs.copy.innerHTML = 'Copy to clipboard'; | ||
this._refs.copy.innerHTML = this.props.copyLabel; | ||
}, 1000); | ||
@@ -564,3 +633,3 @@ return this._codemirror.getValue(); | ||
// handle run button | ||
this._refs.run.innerHTML = 'Compiling...'; | ||
this._refs.run.innerHTML = this.props.compilingLabel; | ||
this._refs.run.disabled = true; | ||
@@ -582,3 +651,3 @@ // launch a compileStart event | ||
if (this.props.compile) { | ||
this._refs.run.innerHTML = 'Compiled!'; | ||
this._refs.run.innerHTML = this.props.compiledLabel; | ||
// remove class | ||
@@ -592,3 +661,3 @@ this.removeComponentClass(this, null, 'compiling'); | ||
setTimeout(() => { | ||
this._refs.run.innerHTML = 'Run'; | ||
this._refs.run.innerHTML = this.props.runLabel; | ||
this._refs.run.classList.remove('success'); | ||
@@ -607,6 +676,6 @@ // add success class | ||
}, (error) => { | ||
this._refs.run.innerHTML = 'Error while compiling...'; | ||
this._refs.run.innerHTML = this.props.compileErrorLabel; | ||
console.error('Compiling error', error); | ||
if (this.props.compile) { | ||
this._refs.run.innerHTML = 'Compiled!'; | ||
this._refs.run.innerHTML = this.props.compiledLabel; | ||
// remove class | ||
@@ -613,0 +682,0 @@ this.removeComponentClass(this, null, 'compiling'); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1858687
14612