1
0
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:
Kushagra Gour
2017-09-13 00:12:25 +05:30
parent 813b30db59
commit 1693afa747
2 changed files with 51 additions and 4 deletions

View File

@@ -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>

View File

@@ -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',