mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 01:56:24 +02:00
Code Issues Releases Wiki Activity

create declarative directive for modal triggers.

Browse Source
This commit is contained in:
Kushagra Gour
2017-10-02 13:43:03 +05:30
parent 2a92079bf1
commit 508ce715b4
2 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -49,7 +49,7 @@
</svg>Run
</a>
<a id="js-add-library-btn" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
<a d-open-modal="addLibraryModal" data-event-category="ui" data-event-action="addLibraryButtonClick" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
</a>
@ -216,7 +216,7 @@
</svg>
<span class="notifications-btn__dot"></span>
</a>
<a id="settingsBtn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<a d-open-modal="settingsModal" data-event-category="ui" data-event-action="settingsBtnClick" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<svg>
<use xlink:href="#settings-icon"></use>
</svg>
@ -226,7 +226,7 @@
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
&copy; Web Maker &nbsp;&nbsp;
<a id="helpBtn" class="footer__link hint--rounded hint--top-right" data-hint="Help">
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" data-hint="Help">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>

32
src/script.js
View File

@ -1,8 +1,8 @@
/* global trackEvent */
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardModal, onboardModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
@ -137,7 +137,6 @@ globalConsoleContainerEl
jsModelLabel = $('#js-js-mode-label'),
titleInput = $('#js-title-input'),
addLibrarySelect = $('#js-add-library-select'),
addLibraryBtn = $('#js-add-library-btn'),
externalJsTextarea = $('#js-external-js'),
externalCssTextarea = $('#js-external-css');
@ -1295,6 +1294,7 @@ globalConsoleContainerEl
gutters: ['CodeMirror-foldgutter']
});
// DEPRECATED
function openSettings() {
scope.toggleModal(settingsModal);
@ -1844,6 +1844,18 @@ globalConsoleContainerEl
attachListenerForEvent('input');
attachListenerForEvent('keyup');
// Compile d-open-modal directive
const modalTriggers = $all(`[d-open-modal]`);
modalTriggers.forEach(function(el) {
utils.onButtonClick(el, function() {
scope.toggleModal(window[el.getAttribute('d-open-modal')]);
trackEvent(
el.getAttribute('data-event-category'),
el.getAttribute('data-event-action')
);
});
});
// Compile d-html directive
const dHtmlNodes = $all(`[d-html]`);
dHtmlNodes.forEach(function(el) {
@ -1919,15 +1931,6 @@ globalConsoleContainerEl
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
utils.onButtonClick(helpBtn, function() {
scope.toggleModal(helpModal);
trackEvent('ui', 'helpButtonClick');
});
utils.onButtonClick(addLibraryBtn, function() {
scope.toggleModal(addLibraryModal);
trackEvent('ui', 'addLibraryButtonClick');
});
notificationsBtn.addEventListener('click', function() {
scope.toggleModal(notificationsModal);
@ -2157,11 +2160,6 @@ globalConsoleContainerEl
}
});
utils.onButtonClick(settingsBtn, function() {
openSettings();
trackEvent('ui', 'settingsBtnClick');
});
// Initialize add library select box
var libOptions = window.jsLibs.reduce(
(html, lib) =>