mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-17 15:50:34 +02:00
248 lines
7.2 KiB
JavaScript
248 lines
7.2 KiB
JavaScript
;(function () {
|
||
|
||
editur = window.editur || {};
|
||
|
||
var $ = document.querySelector.bind(document);
|
||
var $all = document.querySelectorAll.bind(document);
|
||
|
||
var updateTimer
|
||
, updateDelay = 500
|
||
, currentLayoutMode
|
||
, frame = $('#demo-frame')
|
||
, htmlCode = $('#js-html-code')
|
||
,cssCode = $('#js-css-code')
|
||
, jsCode = $('#js-js-code')
|
||
, layoutBtn1 = $('#js-layout-btn-1')
|
||
, layoutBtn2 = $('#js-layout-btn-2')
|
||
, layoutBtn3 = $('#js-layout-btn-3')
|
||
, helpBtn = $('#js-help-btn')
|
||
, helpModal = $('#js-help-modal')
|
||
, codepenBtn = $('#js-codepen-btn')
|
||
, codepenForm = $('#js-codepen-form')
|
||
, saveHtmlBtn = $('#js-save-html')
|
||
, settingsBtn = $('#js-settings-btn')
|
||
;
|
||
|
||
editur.cm = {};
|
||
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
|
||
|
||
function resetSplitting() {
|
||
var gutters = $all('.gutter');
|
||
for (var i = gutters.length; i--;) {
|
||
gutters[i].remove();
|
||
}
|
||
$('#js-html-code').setAttribute('style', '');
|
||
$('#js-css-code').setAttribute('style', '');
|
||
$('#js-js-code').setAttribute('style', '');
|
||
$('#js-code-side').setAttribute('style', '');
|
||
$('#js-demo-side').setAttribute('style', '');
|
||
|
||
Split(['#js-html-code', '#js-css-code', '#js-js-code'], {
|
||
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical')
|
||
});
|
||
Split(['#js-code-side', '#js-demo-side' ], {
|
||
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal')
|
||
});
|
||
}
|
||
window.toggleLayout = function (mode) {
|
||
currentLayoutMode = mode;
|
||
$('#js-layout-btn-1').classList.remove('selected');
|
||
$('#js-layout-btn-2').classList.remove('selected');
|
||
$('#js-layout-btn-3').classList.remove('selected');
|
||
$('#js-layout-btn-' + mode).classList.add('selected');
|
||
document.body.classList.remove('layout-1');
|
||
document.body.classList.remove('layout-2');
|
||
document.body.classList.remove('layout-3');
|
||
document.body.classList.add('layout-' + mode);
|
||
|
||
resetSplitting();
|
||
}
|
||
|
||
window.saveSetting = function saveSetting(setting, value) {
|
||
var obj = {};
|
||
obj[setting] = value;
|
||
// TODO: remove me
|
||
// We delegate the saving to background script because, this tab cannot do
|
||
// async saving once the tab starts unloading.
|
||
// chrome.runtime.sendMessage(obj, function(response) {
|
||
// console.log(response);
|
||
// });
|
||
chrome.storage.local.set(obj, function() {
|
||
console.log('saved', request);
|
||
});
|
||
};
|
||
|
||
function saveCode() {
|
||
var code = {
|
||
html: editur.cm.html.getValue(),
|
||
css: editur.cm.css.getValue(),
|
||
js: editur.cm.js.getValue()
|
||
};
|
||
saveSetting('code', code);
|
||
}
|
||
|
||
window.onunload = function () {
|
||
saveCode();
|
||
};
|
||
|
||
editur.setPreviewContent = function () {
|
||
var self = this;
|
||
var html = editur.cm.html.getValue();
|
||
var css = editur.cm.css.getValue();
|
||
var js = editur.cm.js.getValue();
|
||
|
||
|
||
html = '<html>\n<head>\n<style>\n' + css + '\n</style>\n</head>\n<body>\n' + html + '\n<script>\n' + js + '\n</script></body>\n</html>';
|
||
|
||
var fileWritten = false;
|
||
|
||
var blob = new Blob([ html ], {type : "text/plain;charset=UTF-8"});
|
||
|
||
function errorHandler() { console.log(arguments); }
|
||
|
||
window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024 * 5, function(fs){
|
||
fs.root.getFile('preview.html', {create: true}, function(fileEntry) {
|
||
fileEntry.createWriter(function(fileWriter) {
|
||
function onWriteComplete() {
|
||
if (fileWritten) {
|
||
frame.src = 'filesystem:chrome-extension://' + chrome.i18n.getMessage('@@extension_id') + '/temporary/' + 'preview.html';
|
||
}
|
||
else {
|
||
fileWritten = true;
|
||
fileWriter.seek(0);
|
||
fileWriter.write(blob);
|
||
}
|
||
}
|
||
fileWriter.onwriteend = onWriteComplete;
|
||
fileWriter.truncate(0)
|
||
}, errorHandler);
|
||
}, errorHandler);
|
||
}, errorHandler);
|
||
};
|
||
|
||
function initEditor(element, options) {
|
||
var cm = CodeMirror(element, {
|
||
mode: options.mode,
|
||
lineNumbers: true,
|
||
lineWrapping: true,
|
||
autofocus: options.autofocus || false,
|
||
autoCloseBrackets: true,
|
||
matchBrackets: true,
|
||
tabMode: 'indent',
|
||
keyMap: 'sublime',
|
||
theme: 'monokai',
|
||
// cursorScrollMargin: '20', has issue with scrolling
|
||
profile: options.profile || ''
|
||
});
|
||
cm.on('change', function onChange() {
|
||
clearTimeout(updateTimer);
|
||
updateTimer = setTimeout(function () {
|
||
editur.setPreviewContent();
|
||
}, updateDelay);
|
||
});
|
||
return cm;
|
||
}
|
||
|
||
editur.cm.html = initEditor(htmlCode, {
|
||
mode: 'htmlmixed',
|
||
autofocus: true,
|
||
profile: 'xhtml'
|
||
});
|
||
emmetCodeMirror(editur.cm.html);
|
||
editur.cm.css = initEditor(cssCode, {
|
||
mode: 'css'
|
||
});
|
||
editur.cm.js = initEditor(jsCode, {
|
||
mode: 'javascript'
|
||
});
|
||
|
||
function init () {
|
||
layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });
|
||
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; });
|
||
layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; });
|
||
|
||
helpBtn.addEventListener('click', function () {
|
||
helpModal.classList.toggle('is-modal-visible');
|
||
return false;
|
||
});
|
||
|
||
codepenBtn.addEventListener('click', function (e) {
|
||
var json = {
|
||
title: 'A Web Maker experiment',
|
||
html: editur.cm.html.getValue(),
|
||
css: editur.cm.css.getValue(),
|
||
js: editur.cm.js.getValue()
|
||
};
|
||
json = JSON.stringify(json)
|
||
.replace(/"/g, """)
|
||
.replace(/'/g, "'")
|
||
codepenForm.querySelector('input').value = json;
|
||
codepenForm.submit();
|
||
e.preventDefault();
|
||
});
|
||
|
||
saveHtmlBtn.addEventListener('click', function (e) {
|
||
var html = editur.cm.html.getValue();
|
||
var css = editur.cm.css.getValue();
|
||
var js = editur.cm.js.getValue();
|
||
|
||
var fileContent = '<html><head>\n<style>\n'
|
||
+ 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 fileName = [ 'web-maker', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-');
|
||
fileName += '.html';
|
||
|
||
var a = document.createElement('a');
|
||
var blob = new Blob([ fileContent ], {type : "text/html;charset=UTF-8"});
|
||
a.href = window.URL.createObjectURL(blob);
|
||
a.download = fileName;
|
||
a.style.display = 'none';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
});
|
||
|
||
window.addEventListener('click', function(e) {
|
||
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
|
||
e.target.previousElementSibling.classList.toggle('is-modal-visible');
|
||
}
|
||
});
|
||
|
||
settingsBtn.addEventListener('click', function(e) {
|
||
if (!chrome.runtime.openOptionsPage) {
|
||
// New way to open options pages, if supported (Chrome 42+).
|
||
// Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
|
||
// Until this bug fixes, use the
|
||
// fallback.
|
||
chrome.runtime.openOptionsPage();
|
||
} else {
|
||
// Fallback.
|
||
chrome.tabs.create({
|
||
url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
|
||
});
|
||
}
|
||
return false;
|
||
});
|
||
|
||
|
||
chrome.storage.local.get({
|
||
layoutMode: 1,
|
||
code: ''
|
||
}, function localGetCallback(result) {
|
||
toggleLayout(result.layoutMode);
|
||
if (result.code) {
|
||
editur.cm.html.setValue(result.code.html);
|
||
editur.cm.css.setValue(result.code.css);
|
||
editur.cm.js.setValue(result.code.js);
|
||
editur.cm.html.refresh();
|
||
editur.cm.css.refresh();
|
||
editur.cm.js.refresh();
|
||
}
|
||
});
|
||
}
|
||
|
||
init();
|
||
|
||
})(); |