mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 02:26:20 +02:00
Code Issues Releases Wiki Activity

improve add external lib modal ux

Browse Source
This commit is contained in:
Kushagra Gour
2017-12-11 17:55:24 +05:30
parent c232a167ef
commit 75e941f1e1
4 changed files with 47 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.html
View File

@ -249,14 +249,12 @@
</svg>
</a>
<h1>Add Library</h1>
<h3>JavaScript</h3>
<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<h3>CSS</h3>
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<div style="margin-top:20px;">
<input type="text" id="externalLibrarySearchInput" class="full-width" placeholder="Type here to search libraries">
<div class="tar opacity--70">
<small>Powered by cdnjs</small>
</div>
<div style="margin:20px 0;">
Choose from popular libraries:
<select name="" id="js-add-library-select">
<option value="">-------</option>
@ -268,6 +266,14 @@
</optgroup>
</select>
</div>
<h3>JavaScript</h3>
<p style="font-size: 0.8em;" class="opacity--70">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<h3>CSS</h3>
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
</div>
</div>

23
src/script.js
View File

@ -7,7 +7,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
globalConsoleContainerEl
globalConsoleContainerEl, externalLibrarySearchInput
*/
/* eslint-disable no-extra-semi */
(function(alertsService) {
@ -2249,12 +2249,21 @@ globalConsoleContainerEl
externalJsTextarea.addEventListener('blur', onExternalLibChange);
externalCssTextarea.addEventListener('blur', onExternalLibChange);
new TextareaAutoComplete(externalJsTextarea, obj =>
obj.latest.match(/\.js$/)
);
new TextareaAutoComplete(externalCssTextarea, obj =>
obj.latest.match(/\.css$/)
);
new TextareaAutoComplete(externalJsTextarea, {
filter: obj => obj.latest.match(/\.js$/)
});
new TextareaAutoComplete(externalCssTextarea, {
filter: obj => obj.latest.match(/\.css$/)
});
new TextareaAutoComplete(externalLibrarySearchInput, {
selectedCallback: value => {
const textarea = value.match(/\.js$/)
? externalJsTextarea
: externalCssTextarea;
textarea.value = `${textarea.value}\n${value}`;
externalLibrarySearchInput.value = '';
}
});
// Console header drag resize logic
var consoleHeaderDragStartY;

6
src/style.css
View File

@ -26,9 +26,11 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
.fr { float: right; }
.relative { position: relative; }
.tac { text-align: center; }
.tar { text-align: right; }
.va-m { vertical-align: middle; }
.full-width { width: 100%; }
.opacity--30 { opacity: 0.3; }
.opacity--70 { opacity: 0.7; }
.pointer-none { pointer-events: none; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
@ -858,8 +860,8 @@ transition: 0.25s ease;
}
.autocomplete__loader {
position: absolute;
right: 10px;
bottom: 10px;
right: 3px;
bottom: 1px;
}
@keyframes wobble {
from {

19
src/textarea-autocomplete.js
View File

@ -1,9 +1,10 @@
// textarea-autocomplete.js
(function() {
class TextareaAutoComplete {
constructor(textarea, filter) {
constructor(textarea, options) {
this.t = textarea;
this.filter = filter;
this.filter = options.filter;
this.selectedCallback = options.selectedCallback;
var wrap = document.createElement('div');
wrap.classList.add('btn-group');
textarea.parentElement.insertBefore(wrap, textarea);
@ -128,17 +129,25 @@
event.preventDefault();
} else if (event.keyCode === 13 && this.isShowingSuggestions) {
selectedItemElement = this.list.querySelector('.selected');
this.replaceCurrentLine(selectedItemElement.dataset.url);
this.selectSuggestion(selectedItemElement.dataset.url);
this.closeSuggestions();
}
}
onListMouseDown(event) {
var target = event.target;
if (target.parentElement.dataset.url) {
this.replaceCurrentLine(target.parentElement.dataset.url);
this.closeSuggestions();
this.selectSuggestion(target.parentElement.dataset.url);
}
}
selectSuggestion(value) {
if (this.selectedCallback) {
this.selectedCallback.call(null, value);
} else {
this.replaceCurrentLine(value);
}
this.closeSuggestions();
}
}
window.TextareaAutoComplete = TextareaAutoComplete;