-
-
+
Fun
-
@@ -571,6 +600,9 @@
+
+
+
diff --git a/src/library-list.js b/src/library-list.js
index bb46cc9..cbfdc7a 100644
--- a/src/library-list.js
+++ b/src/library-list.js
@@ -11,22 +11,21 @@ window.jsLibs = [
},
{
url:
- 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js',
- label: 'Bootstrap 4α',
- type: 'js'
- },
- {
- url:
- 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js',
+ 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js',
label: 'Bootstrap 4β',
type: 'js'
},
- {
+ {
url:
- 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
label: 'Foundation',
type: 'js'
},
+ {
+ url: 'https://semantic-ui.com/dist/semantic.min.js',
+ label: 'Semantic UI',
+ type: 'js'
+ },
{
url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
label: 'Angular',
@@ -38,12 +37,12 @@ window.jsLibs = [
type: 'js'
},
{
- url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js',
+ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js',
label: 'React DOM',
type: 'js'
},
{
- url: 'https://unpkg.com/vue@2.4.2/dist/vue.min.js',
+ url: 'https://unpkg.com/vue@2.4.4/dist/vue.min.js',
label: 'Vue.js',
type: 'js'
},
@@ -53,7 +52,7 @@ window.jsLibs = [
type: 'js'
},
{
- url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js',
+ url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js',
label: 'D3',
type: 'js'
},
@@ -75,7 +74,7 @@ window.jsLibs = [
},
{
url:
- 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js',
label: 'UIkit 3',
type: 'js'
}
@@ -87,29 +86,29 @@ window.cssLibs = [
label: 'Bootstrap 3',
type: 'css'
},
- {
- url:
- 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css',
- label: 'Bootstrap 4α',
- type: 'css'
- },
{
url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css',
label: 'Bootstrap 4β',
type: 'css'
},
- {
- url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
- label: 'Bulma',
- type: 'css'
- },
- {
+ {
url:
- 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css',
+ 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css',
label: 'Foundation',
type: 'css'
},
+ {
+ url:'https://semantic-ui.com/dist/semantic.min.css',
+ label: 'Semantic UI',
+ type: 'css'
+ },
+ {
+ url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css',
+ label: 'Bulma',
+ type: 'css'
+ },
+
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css',
label: 'Hint.css',
@@ -123,7 +122,7 @@ window.cssLibs = [
},
{
url:
- 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css',
+ 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css',
label: 'UIkit 3',
type: 'css'
},
diff --git a/src/preview.html b/src/preview.html
new file mode 100644
index 0000000..32b727b
--- /dev/null
+++ b/src/preview.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/script.js b/src/script.js
index f3f0faf..c7d4eec 100644
--- a/src/script.js
+++ b/src/script.js
@@ -6,7 +6,7 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
-customEditorFontInput
+customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
*/
/* eslint-disable no-extra-semi */
(function(alertsService) {
@@ -95,7 +95,8 @@ customEditorFontInput
cmPath: 'css',
cmMode: 'css',
codepenVal: 'notsupported',
- cmDisable: true
+ cmDisable: true,
+ hasSettings: true
};
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
@@ -369,6 +370,9 @@ customEditorFontInput
currentItem.htmlMode = htmlMode;
currentItem.cssMode = cssMode;
currentItem.jsMode = jsMode;
+ currentItem.cssSettings = {
+ acssConfig: scope.acssSettingsCm.getValue()
+ };
currentItem.updatedOn = Date.now();
currentItem.layoutMode = currentLayoutMode;
currentItem.externalLibs = {
@@ -592,6 +596,11 @@ customEditorFontInput
scope.cm.css.refresh();
scope.cm.js.refresh();
+ scope.acssSettingsCm.setValue(
+ currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
+ );
+ scope.acssSettingsCm.refresh();
+
scope.clearConsole();
// To have the library count updated
@@ -614,6 +623,7 @@ customEditorFontInput
addLibraryModal.classList.remove('is-modal-visible');
onboardModal.classList.remove('is-modal-visible');
settingsModal.classList.remove('is-modal-visible');
+ cssSettingsModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed'));
}
@@ -681,6 +691,9 @@ customEditorFontInput
cssModelLabel.parentElement.querySelector('select').value = value;
scope.cm.css.setOption('mode', modes[value].cmMode);
scope.cm.css.setOption('readOnly', modes[value].cmDisable);
+ cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
+ 'hide'
+ );
CodeMirror.autoLoadMode(
scope.cm.css,
modes[value].cmPath || modes[value].cmMode
@@ -770,7 +783,15 @@ customEditorFontInput
} else if (cssMode === CssModes.ACSS) {
const html = scope.cm.html.getValue();
const foundClasses = atomizer.findClassNames(html);
- const finalConfig = atomizer.getConfig(foundClasses, {});
+ var finalConfig;
+ try {
+ finalConfig = atomizer.getConfig(
+ foundClasses,
+ JSON.parse(scope.acssSettingsCm.getValue())
+ );
+ } catch (e) {
+ finalConfig = atomizer.getConfig(foundClasses, {});
+ }
const acss = atomizer.getCss(finalConfig);
scope.cm.css.setValue(acss);
d.resolve(acss);
@@ -1038,11 +1059,18 @@ customEditorFontInput
chrome.i18n.getMessage('@@extension_id') +
'/temporary/' +
'preview.html';
+ if (scope.detachedWindow) {
+ scope.detachedWindow.postMessage(frame.src, '*');
+ }
});
});
}
scope.setPreviewContent = function(isForced) {
+ if (!prefs.preserveConsoleLogs) {
+ scope.clearConsole();
+ }
+
var currentCode = {
html: scope.cm.html.getValue(),
css: scope.cm.css.getValue(),
@@ -1589,6 +1617,7 @@ customEditorFontInput
$('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
$('[data-setting=autoSave]').checked = prefs.autoSave;
$('[data-setting=autoComplete]').checked = prefs.autoComplete;
+ $('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
}
/**
@@ -1661,6 +1690,10 @@ customEditorFontInput
scope.cm[type].refresh();
});
scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
+ scope.acssSettingsCm.setOption(
+ 'theme',
+ $('[data-setting=editorTheme]').value
+ );
if (prefs.autoSave) {
if (!autoSaveInterval) {
autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL);
@@ -1805,6 +1838,29 @@ customEditorFontInput
});
}
+ scope.openDetachedPreview = function() {
+ document.body.classList.add('is-detached-mode');
+ scope.detachedWindow = window.open(
+ './preview.html',
+ 'Web Maker',
+ 'width=420,height=230,resizable,scrollbars=yes,status=1'
+ );
+ setTimeout(() => {
+ scope.detachedWindow.postMessage(frame.src, '*');
+ }, 1000);
+ function checkWindow() {
+ if (scope.detachedWindow && scope.detachedWindow.closed) {
+ clearInterval(intervalID);
+ document.body.classList.remove('is-detached-mode');
+ }
+ }
+ var intervalID = window.setInterval(checkWindow, 500);
+ };
+
+ scope.openCssSettingsModal = function() {
+ scope.toggleModal(cssSettingsModal);
+ };
+
function init() {
var lastCode;
@@ -2155,7 +2211,8 @@ customEditorFontInput
editorFont: 'FiraCode',
editorCustomFont: '',
autoSave: true,
- autoComplete: true
+ autoComplete: true,
+ preserveConsoleLogs: true
},
function syncGetCallback(result) {
if (result.preserveLastCode && lastCode) {
@@ -2191,6 +2248,7 @@ customEditorFontInput
prefs.editorCustomFont = result.editorCustomFont;
prefs.autoSave = result.autoSave;
prefs.autoComplete = result.autoComplete;
+ prefs.preserveConsoleLogs = result.preserveConsoleLogs;
updateSettingsInUi();
scope.updateSetting();
@@ -2241,6 +2299,13 @@ customEditorFontInput
}
);
+ scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
+ mode: 'application/ld+json'
+ });
+ scope.acssSettingsCm.on('blur', () => {
+ scope.setPreviewContent(true);
+ });
+
var options = '';
[
'3024-day',
diff --git a/src/style.css b/src/style.css
index 3dcd712..abf5b3e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,6 +31,7 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
.opacity--30 { opacity: 0.3; }
.pointer-none { pointer-events: none; }
.ml-1 { margin-left: 1rem; }
+.ml-2 { margin-left: 2rem; }
hr {
background: 0;
border: 0;
@@ -462,8 +463,8 @@ li.CodeMirror-hint-active {
/* Make settings modal smaller */
@media screen and (min-width: 600px) {
.modal--settings {
- width: 600px;
- margin-left: -300px;
+ /* width: 600px; */
+ /* margin-left: -300px; */
}
}
.saved-items-pane {
@@ -886,6 +887,25 @@ li.CodeMirror-hint-active {
cursor: ns-resize;
}
+.is-detached-mode .demo-side {
+ display: none;
+}
+
+.is-detached-mode .code-side {
+ width: 100% !important;
+}
+
+.layout-4 .code-side {
+ display: none;
+}
+.layout-4 .code-side + .gutter {
+ display: none;
+}
+.layout-4 .demo-side {
+ width: 100% !important;
+}
+
+
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
@@ -925,4 +945,4 @@ while the theme CSS file is loading */
color: #D1EDFF;
}
.cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
-.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
+.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
\ No newline at end of file