mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 10:36:19 +02:00
Code Issues Releases Wiki Activity

Add onboard modal and code refactor.

Browse Source 
- remove editur variable and replace with scope
- add d-click directive to add click listeners from html
- remove js-* ids from btn/modals and use directly from window
- add some events to track
This commit is contained in:
Kushagra Gour
2016-12-28 16:36:42 +05:30
parent 669bfe14ae
commit 0a35cb7f4f
2 changed files with 145 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/index.html
View File

@ -47,6 +47,7 @@
.relative { .relative {
position: relative; position: relative;
} }
.tac { text-align: center; }
.full-width { width: 100%; } .full-width { width: 100%; }
.caret { .caret {
display: inline-block; display: inline-block;
@ -632,16 +633,16 @@
Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span> Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
</a> </a>
<a id="js-new-btn" class="flex flex-v-center"> <a id="newBtn" class="flex flex-v-center">
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24"> <svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>New </svg>New
</a> </a>
<a id="js-save-btn" class="flex flex-v-center"> <a id="saveBtn" class="flex flex-v-center">
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24"> <svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" /> <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>Save</a> </svg>Save</a>
<a id="js-open-btn" class="flex flex-v-center"> <a id="openBtn" class="flex flex-v-center">
<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24"> <svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" /> <path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>Open </svg>Open
@ -706,7 +707,7 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="footer__right fr"> <div class="footer__right fr">
<a id="js-save-html" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file"> <a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg> </svg>
@ -715,7 +716,7 @@
<symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol> <symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol>
</svg> </svg>
<a href="" id="js-codepen-btn" class="mode-btn hint--rounded hint--top-left" data-hint="Edit on CodePen"> <a href="" id="codepenBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Edit on CodePen">
<svg> <svg>
<use xlink:href="#codepen-logo"></use> <use xlink:href="#codepen-logo"></use>
</svg> </svg>
@ -723,17 +724,17 @@
<div class="footer__separator"></div> <div class="footer__separator"></div>
<a id="js-layout-btn-1" class="mode-btn"> <a id="layoutBtn1" class="mode-btn">
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="js-layout-btn-2" class="mode-btn"> <a id="layoutBtn2" class="mode-btn">
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="js-layout-btn-3" class="mode-btn"> <a id="layoutBtn3" class="mode-btn">
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
@ -741,13 +742,13 @@
<div class="footer__separator"></div> <div class="footer__separator"></div>
<a id="js-notifications-btn" class="notifications-btn mode-btn hint--top-left hint--rounded" aria-label="Notifications"> <a id="notificationsBtn" class="notifications-btn mode-btn hint--top-left hint--rounded" aria-label="Notifications">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" /> <path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
</svg> </svg>
<span class="notifications-btn__dot"></span> <span class="notifications-btn__dot"></span>
</a> </a>
<a id="js-settings-btn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings"> <a id="settingsBtn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<svg> <svg>
<path id="settings-icon" fill="" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path> <path id="settings-icon" fill="" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
</svg> </svg>
@ -757,7 +758,7 @@
<a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a> <a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a>
&copy; Web Maker &nbsp;&nbsp; &copy; Web Maker &nbsp;&nbsp;
<a id="js-help-btn" class="footer__link hint--rounded hint--top-right" data-hint="Help"> <a id="helpBtn" 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"> <svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" /> <path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
</svg> </svg>
@ -773,7 +774,7 @@
</div> </div>
</div> </div>
<div class="modal" id="js-add-library-modal"> <div class="modal" id="addLibraryModal">
<div class="modal__content" id="app"> <div class="modal__content" id="app">
<h1>Add Library</h1> <h1>Add Library</h1>
<h3>JavaScript</h3> <h3>JavaScript</h3>
@ -797,9 +798,9 @@
</div> </div>
</div> </div>
<div class="modal" id="js-help-modal"> <div class="modal" id="helpModal">
<div class="modal__content"> <div class="modal__content">
<h1>Web Maker<small style="font-size:14px;"> v1.7.1</small></h1> <h1>Web Maker<small style="font-size:14px;"> v2.0.0</small></h1>
<div> <div>
<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p> <p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
<p>Tweet out your feature requests, comments & suggestions to <a href="https://twitter.com/chinchang457">@chinchang457</a>.</p> <p>Tweet out your feature requests, comments & suggestions to <a href="https://twitter.com/chinchang457">@chinchang457</a>.</p>
@ -827,13 +828,46 @@
</div> </div>
</div> </div>
<div class="modal" id="js-notifications-modal"> <div class="modal" id="onboardModal">
<div class="modal__content">
<div class="tac">
<svg width="186px" height="87.5px" viewBox="-145 -2 372 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="logo-w/o-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)">
<polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon>
<polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon>
<polygon id="Path-1" fill="#FF6C00" transform="translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) " points="171 0 372 0 272 173.310547"></polygon>
<polygon id="Path-1" fill="#FF4600" transform="translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) " points="141 0 342 0 242 173.310547"></polygon>
</g>
</svg>
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
</div>
<div class="tac">
<p>Web Maker lets you do web experiments quickly and even when you are offline.</p>
<p>
By default, Web Maker shows up in every new tab you open. But you can always change that setting.
<a d-click="onModalSettingsLinkClick">Click here to change setting</a>.
</p>
<p>
You can always open this app by clicking the Web Maker icon in the top-right side of your browser.
</p>
<p class="tac">
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
</p>
</div>
</div>
</div>
<div class="modal" id="notificationsModal">
<div class="modal__content"> <div class="modal__content">
<h1>Whats new?</h1> <h1>Whats new?</h1>
<div class="notification"> <div class="notification">
<span class="notification__version">2.0.0</span> <span class="notification__version">2.0.0</span>
<ul> <ul>
<li><strong>Save and Load</strong> - Long pending and super-useful, now you can save your creations and resume it anytime later.</li> <li><strong>Save and Load</strong> - Long pending and super-useful, now you can save your creations and resume them anytime later.</li>
<li><strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS libraries in your work without writing any code.</li> <li><strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS libraries in your work without writing any code.</li>
<li><strong>Collapsed Panes</strong> - Collapse/uncollapse code panes with a single click. Your pane configuration is even saved with every creation!</li> <li><strong>Collapsed Panes</strong> - Collapse/uncollapse code panes with a single click. Your pane configuration is even saved with every creation!</li>
<li><strong>Quick color & number change</strong> - Click on any color or number and experiment with quick values using a slider.</li> <li><strong>Quick color & number change</strong> - Click on any color or number and experiment with quick values using a slider.</li>

172
src/script.js
View File

@ -3,9 +3,13 @@
;(function (alertsService) { ;(function (alertsService) {
/* eslint-enable no-extra-semi */ /* eslint-enable no-extra-semi */
var editur = window.editur || {}; var scope = scope || {};
var version = '1.7.1'; var version = '1.7.1';
if (DEBUG) {
window.scope = scope;
}
var HtmlModes = { var HtmlModes = {
HTML: 'html', HTML: 'html',
MARKDOWN: 'markdown', MARKDOWN: 'markdown',
@ -53,35 +57,21 @@
, htmlCode = $('#js-html-code') , htmlCode = $('#js-html-code')
, cssCode = $('#js-css-code') , cssCode = $('#js-css-code')
, jsCode = $('#js-js-code') , jsCode = $('#js-js-code')
, layoutBtn1 = $('#js-layout-btn-1')
, layoutBtn2 = $('#js-layout-btn-2')
, layoutBtn3 = $('#js-layout-btn-3')
, helpBtn = $('#js-help-btn')
, helpModal = $('#js-help-modal')
, codepenBtn = $('#js-codepen-btn')
, codepenForm = $('#js-codepen-form') , codepenForm = $('#js-codepen-form')
, saveHtmlBtn = $('#js-save-html')
, settingsBtn = $('#js-settings-btn')
, notificationsBtn = $('#js-notifications-btn')
, openBtn = $('#js-open-btn')
, saveBtn = $('#js-save-btn')
, newBtn = $('#js-new-btn')
, savedItemsPane = $('#js-saved-items-pane') , savedItemsPane = $('#js-saved-items-pane')
, savedItemsPaneCloseBtn = $('#js-saved-items-pane-close-btn') , savedItemsPaneCloseBtn = $('#js-saved-items-pane-close-btn')
, notificationsModal = $('#js-notifications-modal')
, htmlModelLabel = $('#js-html-mode-label') , htmlModelLabel = $('#js-html-mode-label')
, cssModelLabel = $('#js-css-mode-label') , cssModelLabel = $('#js-css-mode-label')
, jsModelLabel = $('#js-js-mode-label') , jsModelLabel = $('#js-js-mode-label')
, titleInput = $('#js-title-input') , titleInput = $('#js-title-input')
, addLibrarySelect = $('#js-add-library-select') , addLibrarySelect = $('#js-add-library-select')
, addLibraryBtn = $('#js-add-library-btn') , addLibraryBtn = $('#js-add-library-btn')
, addLibraryModal = $('#js-add-library-modal')
, externalJsTextarea = $('#js-external-js') , externalJsTextarea = $('#js-external-js')
, externalCssTextarea = $('#js-external-css') , externalCssTextarea = $('#js-external-css')
; ;
editur.cm = {}; scope.cm = {};
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; scope.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
// Check all the code wrap if they are minimized or not // Check all the code wrap if they are minimized or not
function updateCodeWrapCollapseStates() { function updateCodeWrapCollapseStates() {
@ -149,10 +139,10 @@
return; return;
} }
currentLayoutMode = mode; currentLayoutMode = mode;
$('#js-layout-btn-1').classList.remove('selected'); layoutBtn1.classList.remove('selected');
$('#js-layout-btn-2').classList.remove('selected'); layoutBtn2.classList.remove('selected');
$('#js-layout-btn-3').classList.remove('selected'); layoutBtn3.classList.remove('selected');
$('#js-layout-btn-' + mode).classList.add('selected'); $('#layoutBtn' + mode).classList.add('selected');
document.body.classList.remove('layout-1'); document.body.classList.remove('layout-1');
document.body.classList.remove('layout-2'); document.body.classList.remove('layout-2');
document.body.classList.remove('layout-3'); document.body.classList.remove('layout-3');
@ -165,7 +155,7 @@
function onExternalLibChange() { function onExternalLibChange() {
utils.log('onExternalLibChange'); utils.log('onExternalLibChange');
updateExternalLibUi(); updateExternalLibUi();
editur.setPreviewContent(); scope.setPreviewContent();
} }
function updateExternalLibUi() { function updateExternalLibUi() {
@ -208,9 +198,9 @@
function saveCode(key) { function saveCode(key) {
currentItem.title = titleInput.value; currentItem.title = titleInput.value;
currentItem.html = editur.cm.html.getValue(); currentItem.html = scope.cm.html.getValue();
currentItem.css = editur.cm.css.getValue(); currentItem.css = scope.cm.css.getValue();
currentItem.js = editur.cm.js.getValue(); currentItem.js = scope.cm.js.getValue();
currentItem.htmlMode = htmlMode; currentItem.htmlMode = htmlMode;
currentItem.cssMode = cssMode; currentItem.cssMode = cssMode;
currentItem.jsMode = jsMode; currentItem.jsMode = jsMode;
@ -348,12 +338,12 @@
externalCssTextarea.value = (currentItem.externalLibs && currentItem.externalLibs.css) || ''; externalCssTextarea.value = (currentItem.externalLibs && currentItem.externalLibs.css) || '';
externalJsTextarea.dispatchEvent(new Event('change')); externalJsTextarea.dispatchEvent(new Event('change'));
editur.cm.html.setValue(currentItem.html); scope.cm.html.setValue(currentItem.html);
editur.cm.css.setValue(currentItem.css); scope.cm.css.setValue(currentItem.css);
editur.cm.js.setValue(currentItem.js); scope.cm.js.setValue(currentItem.js);
editur.cm.html.refresh(); scope.cm.html.refresh();
editur.cm.css.refresh(); scope.cm.css.refresh();
editur.cm.js.refresh(); scope.cm.js.refresh();
updateHtmlMode(currentItem.htmlMode || prefs.htmlMode || HtmlModes.HTML); updateHtmlMode(currentItem.htmlMode || prefs.htmlMode || HtmlModes.HTML);
updateJsMode(currentItem.jsMode || prefs.jsMode || JsModes.JS); updateJsMode(currentItem.jsMode || prefs.jsMode || JsModes.JS);
@ -362,6 +352,14 @@
toggleLayout(currentItem.layoutMode || prefs.layoutMode); toggleLayout(currentItem.layoutMode || prefs.layoutMode);
} }
function closeAllOverlays() {
helpModal.classList.remove('is-modal-visible');
notificationsModal.classList.remove('is-modal-visible');
addLibraryModal.classList.remove('is-modal-visible');
onboardModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false);
}
/** /**
* Loaded the code comiler based on the mode selected * Loaded the code comiler based on the mode selected
*/ */
@ -395,26 +393,26 @@
htmlMode = value; htmlMode = value;
htmlModelLabel.textContent = modes[value].label; htmlModelLabel.textContent = modes[value].label;
handleModeRequirements(value); handleModeRequirements(value);
editur.cm.html.setOption('mode', modes[value].cmMode); scope.cm.html.setOption('mode', modes[value].cmMode);
CodeMirror.autoLoadMode(editur.cm.html, modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.html, modes[value].cmMode);
trackEvent('ui', 'updateCodeMode', 'html', value); trackEvent('ui', 'updateCodeMode', 'html', value);
} }
function updateCssMode(value) { function updateCssMode(value) {
cssMode = value; cssMode = value;
cssModelLabel.textContent = modes[value].label; cssModelLabel.textContent = modes[value].label;
handleModeRequirements(value); handleModeRequirements(value);
editur.cm.css.setOption('mode', modes[value].cmMode); scope.cm.css.setOption('mode', modes[value].cmMode);
CodeMirror.autoLoadMode(editur.cm.css, modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmMode);
trackEvent('ui', 'updateCodeMode', 'css', value); trackEvent('ui', 'updateCodeMode', 'css', value);
} }
function updateJsMode(value) { function updateJsMode(value) {
jsMode = value; jsMode = value;
jsModelLabel.textContent = modes[value].label; jsModelLabel.textContent = modes[value].label;
handleModeRequirements(value); handleModeRequirements(value);
editur.cm.js.setOption('mode', modes[value].cmMode); scope.cm.js.setOption('mode', modes[value].cmMode);
CodeMirror.autoLoadMode(editur.cm.js, modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.js, modes[value].cmMode);
trackEvent('ui', 'updateCodeMode', 'js', value); trackEvent('ui', 'updateCodeMode', 'js', value);
// FIXME: Will be saved as part of global settings // FIXME: Will be saved as part of scope settings
/* /*
chrome.storage.sync.set({ chrome.storage.sync.set({
jsMode: value jsMode: value
@ -426,7 +424,7 @@
// to whatever mode is selected and resolve the returned promise with the code. // to whatever mode is selected and resolve the returned promise with the code.
function computeHtml() { function computeHtml() {
var d = deferred(); var d = deferred();
var code = editur.cm.html.getValue(); var code = scope.cm.html.getValue();
if (htmlMode === HtmlModes.HTML) { if (htmlMode === HtmlModes.HTML) {
d.resolve(code); d.resolve(code);
} else if (htmlMode === HtmlModes.MARKDOWN) { } else if (htmlMode === HtmlModes.MARKDOWN) {
@ -439,7 +437,7 @@
} }
function computeCss() { function computeCss() {
var d = deferred(); var d = deferred();
var code = editur.cm.css.getValue(); var code = scope.cm.css.getValue();
cleanupErrors('css'); cleanupErrors('css');
if (cssMode === CssModes.CSS) { if (cssMode === CssModes.CSS) {
@ -464,7 +462,7 @@
} }
function computeJs() { function computeJs() {
var d = deferred(); var d = deferred();
var code = editur.cm.js.getValue(); var code = scope.cm.js.getValue();
cleanupErrors('js'); cleanupErrors('js');
var ast; var ast;
@ -517,10 +515,10 @@
}; };
function cleanupErrors(lang) { function cleanupErrors(lang) {
editur.cm[lang].clearGutter('error-gutter'); scope.cm[lang].clearGutter('error-gutter');
} }
function showErrors(lang, errors) { function showErrors(lang, errors) {
var editor = editur.cm[lang]; var editor = scope.cm[lang];
errors.forEach(function (e) { errors.forEach(function (e) {
editor.operation(function () { editor.operation(function () {
var n = document.createElement('div'); var n = document.createElement('div');
@ -578,7 +576,7 @@
}, errorHandler); }, errorHandler);
} }
editur.setPreviewContent = function () { scope.setPreviewContent = function () {
var htmlPromise = computeHtml(); var htmlPromise = computeHtml();
var cssPromise = computeCss(); var cssPromise = computeCss();
var jsPromise = computeJs(); var jsPromise = computeJs();
@ -633,27 +631,56 @@
cm.on('change', function onChange() { cm.on('change', function onChange() {
clearTimeout(updateTimer); clearTimeout(updateTimer);
updateTimer = setTimeout(function () { updateTimer = setTimeout(function () {
editur.setPreviewContent(); scope.setPreviewContent();
}, updateDelay); }, updateDelay);
}); });
return cm; return cm;
} }
editur.cm.html = initEditor(htmlCode, { scope.cm.html = initEditor(htmlCode, {
mode: 'htmlmixed', mode: 'htmlmixed',
profile: 'xhtml' profile: 'xhtml'
}); });
emmetCodeMirror(editur.cm.html); emmetCodeMirror(scope.cm.html);
editur.cm.css = initEditor(cssCode, { scope.cm.css = initEditor(cssCode, {
mode: 'css', mode: 'css',
gutters: [ 'error-gutter' ] gutters: [ 'error-gutter' ]
}); });
Inlet(editur.cm.css); Inlet(scope.cm.css);
editur.cm.js = initEditor(jsCode, { scope.cm.js = initEditor(jsCode, {
mode: 'javascript', mode: 'javascript',
gutters: [ 'error-gutter' ] gutters: [ 'error-gutter' ]
}); });
Inlet(editur.cm.js); Inlet(scope.cm.js);
function openSettings() {
if (chrome.runtime.openOptionsPage) {
// New way to open options pages, if supported (Chrome 42+).
// Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
// Until this bug fixes, use the
// fallback.
chrome.runtime.openOptionsPage();
} else {
// Fallback.
chrome.tabs.create({
url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
});
}
}
scope.onModalSettingsLinkClick = function () {
openSettings();
trackEvent('ui', 'onboardSettingsBtnClick');
}
function compileNodes() {
var nodes = [].slice.call($all('[d-click]'));
nodes.forEach(function (el) {
el.addEventListener('click', function (e) {
scope[el.getAttribute('d-click')].call(window, e)
});
})
}
function init () { function init () {
var lastCode; var lastCode;
@ -665,8 +692,8 @@
layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; }); layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; });
utils.onButtonClick(helpBtn, function () { utils.onButtonClick(helpBtn, function () {
helpModal.classList.toggle('is-modal-visible'); onboardModal.classList.toggle('is-modal-visible');
document.body.classList[helpModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); document.body.classList[onboardModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible');
trackEvent('ui', 'helpButtonClick'); trackEvent('ui', 'helpButtonClick');
}); });
utils.onButtonClick(addLibraryBtn, function () { utils.onButtonClick(addLibraryBtn, function () {
@ -692,9 +719,9 @@
codepenBtn.addEventListener('click', function (e) { codepenBtn.addEventListener('click', function (e) {
var json = { var json = {
title: 'A Web Maker experiment', title: 'A Web Maker experiment',
html: editur.cm.html.getValue(), html: scope.cm.html.getValue(),
css: editur.cm.css.getValue(), css: scope.cm.css.getValue(),
js: editur.cm.js.getValue(), js: scope.cm.js.getValue(),
/* eslint-disable camelcase */ /* eslint-disable camelcase */
html_pre_processor: modes[htmlMode].codepenVal, html_pre_processor: modes[htmlMode].codepenVal,
@ -737,7 +764,7 @@
if (currentItem.id) { if (currentItem.id) {
saveItem(); saveItem();
} }
}) });
// Attach listeners on mode change menu items // Attach listeners on mode change menu items
var modeItems = [].slice.call($all('.js-modes-menu a')); var modeItems = [].slice.call($all('.js-modes-menu a'));
@ -776,14 +803,6 @@
}); });
}); });
function closeAllOverlays() {
helpModal.classList.remove('is-modal-visible');
notificationsModal.classList.remove('is-modal-visible');
addLibraryModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false);
}
window.addEventListener('keydown', function (event) { window.addEventListener('keydown', function (event) {
// Implement Ctrl + S // Implement Ctrl + S
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) { if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) {
@ -816,18 +835,7 @@
}); });
utils.onButtonClick(settingsBtn, function() { utils.onButtonClick(settingsBtn, function() {
if (chrome.runtime.openOptionsPage) { openSettings();
// New way to open options pages, if supported (Chrome 42+).
// Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
// Until this bug fixes, use the
// fallback.
chrome.runtime.openOptionsPage();
} else {
// Fallback.
chrome.tabs.create({
url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
});
}
trackEvent('ui', 'settingsBtnClick'); trackEvent('ui', 'settingsBtnClick');
}); });
@ -890,14 +898,24 @@
chrome.storage.sync.get({ chrome.storage.sync.get({
lastSeenVersion: '' lastSeenVersion: ''
}, function syncGetCallback(result) { }, function syncGetCallback(result) {
// Check if new user
if (!result.lastSeenVersion) {
onboardModal.classList.add('is-modal-visible');
trackEvent('ui', 'onboardModalSeen');
}
// console.utils.log(result, hasSeenNotifications, version); // console.utils.log(result, hasSeenNotifications, version);
if (!result.lastSeenVersion || utils.semverCompare(result.lastSeenVersion, version) === -1) { if (!result.lastSeenVersion || utils.semverCompare(result.lastSeenVersion, version) === -1) {
notificationsBtn.classList.add('has-new'); notificationsBtn.classList.add('has-new');
hasSeenNotifications = false; hasSeenNotifications = false;
} }
}); });
requestAnimationFrame(compileNodes);
} }
// Set few stuff on a 'scope' object so that they can be referenced dynamically.
scope.closeAllOverlays = closeAllOverlays;
init(); init();
})(window.alertsService); })(window.alertsService);