mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-26 00:11:13 +02:00
add configurations support for ACSS. fixes #109
This commit is contained in:
@@ -101,6 +101,11 @@
|
|||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<div class="code-wrap__header-right-options">
|
<div class="code-wrap__header-right-options">
|
||||||
|
<a href="#" id="cssSettingsBtn" title="Atomic CSS configuration" d-click="openCssSettingsModal" class="code-wrap__header-btn hide">
|
||||||
|
<svg>
|
||||||
|
<use xlink:href="#settings-icon"></use>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -261,6 +266,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="cssSettingsModal">
|
||||||
|
<div class="modal__content">
|
||||||
|
<h1>Atomic CSS Settings</h1>
|
||||||
|
<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
|
||||||
|
<div style="height: calc(100vh - 350px);">
|
||||||
|
<textarea id="acssSettingsTextarea" cols="30" rows="10"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal" id="helpModal">
|
<div class="modal" id="helpModal">
|
||||||
<div class="modal__content">
|
<div class="modal__content">
|
||||||
<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>
|
<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>
|
||||||
|
@@ -6,7 +6,7 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
|
|||||||
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
||||||
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
||||||
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
|
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
|
||||||
customEditorFontInput
|
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
|
||||||
*/
|
*/
|
||||||
/* eslint-disable no-extra-semi */
|
/* eslint-disable no-extra-semi */
|
||||||
(function(alertsService) {
|
(function(alertsService) {
|
||||||
@@ -95,7 +95,8 @@ customEditorFontInput
|
|||||||
cmPath: 'css',
|
cmPath: 'css',
|
||||||
cmMode: 'css',
|
cmMode: 'css',
|
||||||
codepenVal: 'notsupported',
|
codepenVal: 'notsupported',
|
||||||
cmDisable: true
|
cmDisable: true,
|
||||||
|
hasSettings: true
|
||||||
};
|
};
|
||||||
|
|
||||||
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
|
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
|
||||||
@@ -369,6 +370,9 @@ customEditorFontInput
|
|||||||
currentItem.htmlMode = htmlMode;
|
currentItem.htmlMode = htmlMode;
|
||||||
currentItem.cssMode = cssMode;
|
currentItem.cssMode = cssMode;
|
||||||
currentItem.jsMode = jsMode;
|
currentItem.jsMode = jsMode;
|
||||||
|
currentItem.cssSettings = {
|
||||||
|
acssConfig: scope.acssSettingsCm.getValue()
|
||||||
|
};
|
||||||
currentItem.updatedOn = Date.now();
|
currentItem.updatedOn = Date.now();
|
||||||
currentItem.layoutMode = currentLayoutMode;
|
currentItem.layoutMode = currentLayoutMode;
|
||||||
currentItem.externalLibs = {
|
currentItem.externalLibs = {
|
||||||
@@ -592,6 +596,11 @@ customEditorFontInput
|
|||||||
scope.cm.css.refresh();
|
scope.cm.css.refresh();
|
||||||
scope.cm.js.refresh();
|
scope.cm.js.refresh();
|
||||||
|
|
||||||
|
scope.acssSettingsCm.setValue(
|
||||||
|
currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
|
||||||
|
);
|
||||||
|
scope.acssSettingsCm.refresh();
|
||||||
|
|
||||||
scope.clearConsole();
|
scope.clearConsole();
|
||||||
|
|
||||||
// To have the library count updated
|
// To have the library count updated
|
||||||
@@ -614,6 +623,7 @@ customEditorFontInput
|
|||||||
addLibraryModal.classList.remove('is-modal-visible');
|
addLibraryModal.classList.remove('is-modal-visible');
|
||||||
onboardModal.classList.remove('is-modal-visible');
|
onboardModal.classList.remove('is-modal-visible');
|
||||||
settingsModal.classList.remove('is-modal-visible');
|
settingsModal.classList.remove('is-modal-visible');
|
||||||
|
cssSettingsModal.classList.remove('is-modal-visible');
|
||||||
toggleSavedItemsPane(false);
|
toggleSavedItemsPane(false);
|
||||||
document.dispatchEvent(new Event('overlaysClosed'));
|
document.dispatchEvent(new Event('overlaysClosed'));
|
||||||
}
|
}
|
||||||
@@ -681,6 +691,9 @@ customEditorFontInput
|
|||||||
cssModelLabel.parentElement.querySelector('select').value = value;
|
cssModelLabel.parentElement.querySelector('select').value = value;
|
||||||
scope.cm.css.setOption('mode', modes[value].cmMode);
|
scope.cm.css.setOption('mode', modes[value].cmMode);
|
||||||
scope.cm.css.setOption('readOnly', modes[value].cmDisable);
|
scope.cm.css.setOption('readOnly', modes[value].cmDisable);
|
||||||
|
cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
|
||||||
|
'hide'
|
||||||
|
);
|
||||||
CodeMirror.autoLoadMode(
|
CodeMirror.autoLoadMode(
|
||||||
scope.cm.css,
|
scope.cm.css,
|
||||||
modes[value].cmPath || modes[value].cmMode
|
modes[value].cmPath || modes[value].cmMode
|
||||||
@@ -770,7 +783,15 @@ customEditorFontInput
|
|||||||
} else if (cssMode === CssModes.ACSS) {
|
} else if (cssMode === CssModes.ACSS) {
|
||||||
const html = scope.cm.html.getValue();
|
const html = scope.cm.html.getValue();
|
||||||
const foundClasses = atomizer.findClassNames(html);
|
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);
|
const acss = atomizer.getCss(finalConfig);
|
||||||
scope.cm.css.setValue(acss);
|
scope.cm.css.setValue(acss);
|
||||||
d.resolve(acss);
|
d.resolve(acss);
|
||||||
@@ -1046,7 +1067,7 @@ customEditorFontInput
|
|||||||
}
|
}
|
||||||
|
|
||||||
scope.setPreviewContent = function(isForced) {
|
scope.setPreviewContent = function(isForced) {
|
||||||
if( !prefs.preserveConsoleLogs ) {
|
if (!prefs.preserveConsoleLogs) {
|
||||||
scope.clearConsole();
|
scope.clearConsole();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1832,6 +1853,10 @@ customEditorFontInput
|
|||||||
var intervalID = window.setInterval(checkWindow, 500);
|
var intervalID = window.setInterval(checkWindow, 500);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
scope.openCssSettingsModal = function() {
|
||||||
|
scope.toggleModal(cssSettingsModal);
|
||||||
|
};
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var lastCode;
|
var lastCode;
|
||||||
|
|
||||||
@@ -2270,6 +2295,13 @@ customEditorFontInput
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
|
||||||
|
mode: 'json'
|
||||||
|
});
|
||||||
|
scope.acssSettingsCm.on('blur', () => {
|
||||||
|
scope.setPreviewContent(true);
|
||||||
|
});
|
||||||
|
|
||||||
var options = '';
|
var options = '';
|
||||||
[
|
[
|
||||||
'3024-day',
|
'3024-day',
|
||||||
|
Reference in New Issue
Block a user