mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-23 14:44:53 +01:00
Code Issues Releases Wiki Activity

add configurations support for ACSS. fixes #109

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/index.html
View File

@ -101,6 +101,11 @@
</select>
</label>
<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>
</div>
@ -261,6 +266,16 @@
</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__content">
<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>

40
src/script.js
View File

@ -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);
@ -1046,7 +1067,7 @@ customEditorFontInput
}
scope.setPreviewContent = function(isForced) {
if( !prefs.preserveConsoleLogs ) {
if (!prefs.preserveConsoleLogs) {
scope.clearConsole();
}
@ -1832,6 +1853,10 @@ customEditorFontInput
var intervalID = window.setInterval(checkWindow, 500);
};
scope.openCssSettingsModal = function() {
scope.toggleModal(cssSettingsModal);
};
function init() {
var lastCode;
@ -2270,6 +2295,13 @@ customEditorFontInput
}
);
scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
mode: 'json'
});
scope.acssSettingsCm.on('blur', () => {
scope.setPreviewContent(true);
});
var options = '';
[
'3024-day',