mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-11 17:16:26 +02:00
feature: add any external js/css lib. fixes #19
This commit is contained in:
@ -1,11 +1,15 @@
|
|||||||
window.trackEvent = function (category, action, label, value) {
|
window.trackEvent = function (category, action, label, value) {
|
||||||
|
if (window.DEBUG) {
|
||||||
|
utils.log('trackevent', category, action, label, value)
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (window.ga) {
|
if (window.ga) {
|
||||||
ga('send', 'event', category, action, label, value);
|
ga('send', 'event', category, action, label, value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// if online, load after 2 seconds
|
// if online, load after 2 seconds
|
||||||
if (navigator.onLine) {
|
if (navigator.onLine && !window.DEBUG) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
(function(i,s,o,g,r,a,m){
|
(function(i,s,o,g,r,a,m){
|
||||||
i['GoogleAnalyticsObject']=r;
|
i['GoogleAnalyticsObject']=r;
|
||||||
|
@ -38,6 +38,10 @@
|
|||||||
.fr {
|
.fr {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.full-width { width: 100%; }
|
||||||
.caret {
|
.caret {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0;
|
width: 0;
|
||||||
@ -51,7 +55,7 @@
|
|||||||
a > svg {
|
a > svg {
|
||||||
fill: rgba(255, 255, 255, 0.2)
|
fill: rgba(255, 255, 255, 0.2)
|
||||||
}
|
}
|
||||||
input[type="text"] {
|
select, input[type="text"], textarea {
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
@ -294,15 +298,16 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
font-size: 1.5em;
|
font-size: 1.3em;
|
||||||
transition: all 0.3s;
|
transition: all 0.19s;
|
||||||
transform: scale(0.7);
|
transform: translateY(-50px) scale(0.7);
|
||||||
}
|
}
|
||||||
.is-modal-visible {
|
.is-modal-visible {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
.is-modal-visible .modal__content {
|
.is-modal-visible .modal__content {
|
||||||
transform: scale(1);
|
transition-duration: 0.3s;
|
||||||
|
transform: translateY(0px) scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
@ -523,6 +528,12 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
.count-label {
|
||||||
|
color: #ddd;
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -530,8 +541,12 @@
|
|||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<div class="main-header">
|
<div class="main-header">
|
||||||
<div class="fr">
|
<div class="fr">
|
||||||
|
<a id="js-add-library-btn" class="">
|
||||||
|
Add library <span id="js-external-lib-count" style="visibility:hidden;" class="count-label"></span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a id="js-new-btn"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
<a id="js-new-btn"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||||||
|
}
|
||||||
<path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
<path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||||
</svg>New</a>
|
</svg>New</a>
|
||||||
<a id="js-save-btn" style="margin-left:10px"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
<a id="js-save-btn" style="margin-left:10px"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||||||
@ -667,6 +682,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="js-add-library-modal">
|
||||||
|
<div class="modal__content" id="app">
|
||||||
|
<h1>Add Library</h1>
|
||||||
|
<h3>JavaScript</h3>
|
||||||
|
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Put each library in new line"></textarea>
|
||||||
|
|
||||||
|
<h3>CSS</h3>
|
||||||
|
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5"></textarea>
|
||||||
|
|
||||||
|
<div style="margin-top:20px;">
|
||||||
|
Choose from popular libraries:
|
||||||
|
<select name="" id="js-add-library-select">
|
||||||
|
<option value="">-------</option>
|
||||||
|
<optgroup label="JavaScript Libraries">
|
||||||
|
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="CSS Libraries">
|
||||||
|
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal" id="js-help-modal">
|
<div class="modal" id="js-help-modal">
|
||||||
<div class="modal__content">
|
<div class="modal__content">
|
||||||
<h1>Web Maker<small style="font-size:14px;"> v1.7.1</small></h1>
|
<h1>Web Maker<small style="font-size:14px;"> v1.7.1</small></h1>
|
||||||
@ -781,6 +820,7 @@
|
|||||||
<script src="deferred.js"></script>
|
<script src="deferred.js"></script>
|
||||||
<script src="loader.js"></script>
|
<script src="loader.js"></script>
|
||||||
<script src="notifications.js"></script>
|
<script src="notifications.js"></script>
|
||||||
|
<script src="library-list.js"></script>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
<script src="dropdown.js"></script>
|
<script src="dropdown.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
@ -5,8 +5,6 @@
|
|||||||
var editur = window.editur || {};
|
var editur = window.editur || {};
|
||||||
var version = '1.7.1';
|
var version = '1.7.1';
|
||||||
|
|
||||||
window.DEBUG = 1;
|
|
||||||
|
|
||||||
var HtmlModes = {
|
var HtmlModes = {
|
||||||
HTML: 'html',
|
HTML: 'html',
|
||||||
MARKDOWN: 'markdown',
|
MARKDOWN: 'markdown',
|
||||||
@ -74,6 +72,11 @@
|
|||||||
, cssModelLabel = $('#js-css-mode-label')
|
, cssModelLabel = $('#js-css-mode-label')
|
||||||
, jsModelLabel = $('#js-js-mode-label')
|
, jsModelLabel = $('#js-js-mode-label')
|
||||||
, titleInput = $('#js-title-input')
|
, titleInput = $('#js-title-input')
|
||||||
|
, addLibrarySelect = $('#js-add-library-select')
|
||||||
|
, addLibraryBtn = $('#js-add-library-btn')
|
||||||
|
, addLibraryModal = $('#js-add-library-modal')
|
||||||
|
, externalJsTextarea = $('#js-external-js')
|
||||||
|
, externalCssTextarea = $('#js-external-css')
|
||||||
;
|
;
|
||||||
|
|
||||||
editur.cm = {};
|
editur.cm = {};
|
||||||
@ -144,6 +147,25 @@
|
|||||||
trackEvent('ui', 'toggleLayout', mode);
|
trackEvent('ui', 'toggleLayout', mode);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onExternalLibChange() {
|
||||||
|
utils.log('onExternalLibChange');
|
||||||
|
updateExternalLibUi();
|
||||||
|
editur.setPreviewContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateExternalLibUi() {
|
||||||
|
// Calculate no. of external libs
|
||||||
|
var noOfExternalLibs = 0;
|
||||||
|
noOfExternalLibs += externalJsTextarea.value.split('\n').filter(lib => !!lib).length;
|
||||||
|
noOfExternalLibs += externalCssTextarea.value.split('\n').filter(lib => !!lib).length;
|
||||||
|
if (noOfExternalLibs) {
|
||||||
|
$('#js-external-lib-count').textContent = noOfExternalLibs;
|
||||||
|
$('#js-external-lib-count').style.visibility = 'visible';
|
||||||
|
} else {
|
||||||
|
$('#js-external-lib-count').style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function saveSetting(setting, value, cb) {
|
function saveSetting(setting, value, cb) {
|
||||||
var obj = {};
|
var obj = {};
|
||||||
obj[setting] = value;
|
obj[setting] = value;
|
||||||
@ -179,6 +201,7 @@
|
|||||||
currentItem.jsMode = jsMode;
|
currentItem.jsMode = jsMode;
|
||||||
currentItem.updatedOn = Date.now();
|
currentItem.updatedOn = Date.now();
|
||||||
currentItem.layoutMode = currentLayoutMode;
|
currentItem.layoutMode = currentLayoutMode;
|
||||||
|
currentItem.externalLibs = { js: externalJsTextarea.value, css: externalCssTextarea.value };
|
||||||
|
|
||||||
// debugger;
|
// debugger;
|
||||||
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
|
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
|
||||||
@ -262,6 +285,7 @@
|
|||||||
html: '',
|
html: '',
|
||||||
css: '',
|
css: '',
|
||||||
js: '',
|
js: '',
|
||||||
|
externalLibs: { js: '', css: '' },
|
||||||
layoutMode: currentLayoutMode
|
layoutMode: currentLayoutMode
|
||||||
};
|
};
|
||||||
alertsService.add('New item created');
|
alertsService.add('New item created');
|
||||||
@ -298,10 +322,13 @@
|
|||||||
|
|
||||||
function refreshEditor() {
|
function refreshEditor() {
|
||||||
titleInput.value = currentItem.title || 'Untitled';
|
titleInput.value = currentItem.title || 'Untitled';
|
||||||
|
externalJsTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.js || '');
|
||||||
|
externalCssTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.css || '');
|
||||||
|
externalJsTextarea.dispatchEvent(new Event('change'));
|
||||||
|
|
||||||
editur.cm.html.setValue(currentItem.html);
|
editur.cm.html.setValue(currentItem.html);
|
||||||
editur.cm.css.setValue(currentItem.css);
|
editur.cm.css.setValue(currentItem.css);
|
||||||
editur.cm.js.setValue(currentItem.js);
|
editur.cm.js.setValue(currentItem.js);
|
||||||
|
|
||||||
editur.cm.html.refresh();
|
editur.cm.html.refresh();
|
||||||
editur.cm.css.refresh();
|
editur.cm.css.refresh();
|
||||||
editur.cm.js.refresh();
|
editur.cm.js.refresh();
|
||||||
@ -481,12 +508,25 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function createPreviewFile(html, css, js) {
|
|
||||||
|
function getCompleteHtml(html, css, js) {
|
||||||
|
var externalJs = externalJsTextarea.value.split('\n').reduce(function (html, url) {
|
||||||
|
return html + (url ? '\n<script src="' + url + '"></script>' : '');
|
||||||
|
}, '');
|
||||||
|
var externalCss = externalCssTextarea.value.split('\n').reduce(function (html, url) {
|
||||||
|
return html + (url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '');
|
||||||
|
}, '');
|
||||||
var contents = '<html>\n<head>\n'
|
var contents = '<html>\n<head>\n'
|
||||||
|
+ externalCss + '\n'
|
||||||
+ '<style>\n' + css + '\n</style>\n'
|
+ '<style>\n' + css + '\n</style>\n'
|
||||||
+ '</head>\n'
|
+ '</head>\n'
|
||||||
+ '<body>\n' + html + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>';
|
+ '<body>\n' + html + '\n'
|
||||||
|
+ externalJs + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>';
|
||||||
|
|
||||||
|
return contents;
|
||||||
|
}
|
||||||
|
function createPreviewFile(html, css, js) {
|
||||||
|
var contents = getCompleteHtml(html, css, js)
|
||||||
var fileWritten = false;
|
var fileWritten = false;
|
||||||
|
|
||||||
var blob = new Blob([ contents ], { type: "text/plain;charset=UTF-8" });
|
var blob = new Blob([ contents ], { type: "text/plain;charset=UTF-8" });
|
||||||
@ -534,9 +574,7 @@
|
|||||||
css = result[1],
|
css = result[1],
|
||||||
js = result[2];
|
js = result[2];
|
||||||
|
|
||||||
var fileContent = '<html><head>\n<style>\n'
|
var fileContent = getCompleteHtml(html, css, js);
|
||||||
+ css + '\n</style>\n</head>\n<body>\n'
|
|
||||||
+ html + '\n<script>\n' + js + '\n</script>\n\n</body>\n</html>';
|
|
||||||
|
|
||||||
var d = new Date();
|
var d = new Date();
|
||||||
var fileName = [ 'web-maker', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-');
|
var fileName = [ 'web-maker', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-');
|
||||||
@ -608,6 +646,10 @@
|
|||||||
helpModal.classList.toggle('is-modal-visible');
|
helpModal.classList.toggle('is-modal-visible');
|
||||||
trackEvent('ui', 'helpButtonClick');
|
trackEvent('ui', 'helpButtonClick');
|
||||||
});
|
});
|
||||||
|
utils.onButtonClick(addLibraryBtn, function () {
|
||||||
|
addLibraryModal.classList.toggle('is-modal-visible');
|
||||||
|
trackEvent('ui', 'addLibraryButtonClick');
|
||||||
|
});
|
||||||
|
|
||||||
notificationsBtn.addEventListener('click', function () {
|
notificationsBtn.addEventListener('click', function () {
|
||||||
notificationsModal.classList.toggle('is-modal-visible');
|
notificationsModal.classList.toggle('is-modal-visible');
|
||||||
@ -729,6 +771,7 @@
|
|||||||
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
|
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
|
||||||
helpModal.classList.remove('is-modal-visible');
|
helpModal.classList.remove('is-modal-visible');
|
||||||
notificationsModal.classList.remove('is-modal-visible');
|
notificationsModal.classList.remove('is-modal-visible');
|
||||||
|
addLibraryModal.classList.remove('is-modal-visible');
|
||||||
toggleSavedItemsPane(false);
|
toggleSavedItemsPane(false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -749,6 +792,24 @@
|
|||||||
trackEvent('ui', 'settingsBtnClick');
|
trackEvent('ui', 'settingsBtnClick');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Initialize add library select box
|
||||||
|
var libOptions = window.jsLibs.reduce(
|
||||||
|
(html, lib) => html + `<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
|
||||||
|
'');
|
||||||
|
addLibrarySelect.children[1].innerHTML = libOptions;
|
||||||
|
libOptions = window.cssLibs.reduce(
|
||||||
|
(html, lib) => html + `<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
|
||||||
|
'');
|
||||||
|
addLibrarySelect.children[2].innerHTML = libOptions;
|
||||||
|
addLibrarySelect.addEventListener('change', function onSelectChange(e) {
|
||||||
|
var target = e.target;
|
||||||
|
$('#js-external-' + target.selectedOptions[0].dataset.type).value += target.value + '\n';
|
||||||
|
onExternalLibChange();
|
||||||
|
});
|
||||||
|
externalJsTextarea.addEventListener('change', onExternalLibChange);
|
||||||
|
externalCssTextarea.addEventListener('change', onExternalLibChange);
|
||||||
|
|
||||||
|
// TODO: move to split.js ondrag listeners
|
||||||
window.addEventListener('mousedown', function() {
|
window.addEventListener('mousedown', function() {
|
||||||
document.body.classList.add('is-dragging');
|
document.body.classList.add('is-dragging');
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
(function () {
|
(function () {
|
||||||
|
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
|
||||||
|
|
||||||
window.$ = document.querySelector.bind(document);
|
window.$ = document.querySelector.bind(document);
|
||||||
window.$all = document.querySelectorAll.bind(document);
|
window.$all = document.querySelectorAll.bind(document);
|
||||||
var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||||
|
Reference in New Issue
Block a user