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

add notification system.

Browse Source
This commit is contained in:
Kushagra Gour 2016-07-07 15:39:49 +05:30
parent 5b985c45a0
commit b128c218f7
3 changed files with 130 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/index.html
View File

@ -15,6 +15,9 @@
min-height: 100vh;
font-family: Helvetica, arial;
}
h1 {
margin-top: 0;
}
a { text-decoration: none; color: crimson; cursor: pointer; }
/*a:hover { text-decoration: underline; }*/
.flex {
@ -133,9 +136,9 @@
}
.footer__separator {
display: inline-block;
height: 24px;
margin: 0 10px 0 20px;
border-left: 1px solid rgba(255,255,255,0.2);
height: 24px;
margin: 0 10px 0 20px;
border-left: 1px solid rgba(255,255,255,0.2);
}
.mode-btn {
margin-left: 10px;
@ -218,6 +221,59 @@
opacity: 1;
visibility: visible;
}
.notifications-btn {
position: relative;
}
@keyframes shake {
2%, 22% {
transform: translate3d(-1px, 0, 0);
}
5%,20% {
transform: translate3d(2px, 0, 0);
}
7%, 12%, 17% {
transform: translate3d(-4px, 0, 0);
}
10%, 15% {
transform: translate3d(4px, 0, 0);
}
}
.notifications-btn.has-new {
animation: shake 10s linear infinite;
transform-origin: 50% 10px;
}
.notifications-btn__dot {
position: absolute;
right: 1;
top: -2px;
background: #2fbe3d;
border-radius: 50%;
width: 12px;
height: 12px;
display: none;
}
.has-new .notifications-btn__dot {
display: block;
}
.notification {
border: 1px solid #f1f1f1;
border-radius: 5px;
padding: 20px;
background: #f8f6f9;
position: relative;
}
.notification li:not(:last-child) {
margin-bottom: 10px;
}
.notification__version {
background: #ff8c00;
color: white;
padding: 3px;
border-radius: 5px;
position: absolute;
top: 2px;
left: 2px;
}
</style>
</head>
@ -237,7 +293,7 @@
<div class="footer__right fr">
<a id="js-save-html" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
<svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>
</a>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
@ -270,7 +326,13 @@
<div class="footer__separator"></div>
<a id="js-settings-btn" class="mode-btn hint--top-left hint--rounded" data-hint="Settings">
<a id="js-notifications-btn" class="notifications-btn mode-btn hint--top-left hint--rounded" aria-label="Notifications">
<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" />
</svg>
<span class="notifications-btn__dot"></span>
</a>
<a id="js-settings-btn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<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>
</svg>
@ -282,7 +344,7 @@
&copy; Web Maker &nbsp;&nbsp;
<a id="js-help-btn" 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="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>
</a>
<!-- #00ACED -->
@ -298,7 +360,7 @@
<div class="modal" id="js-help-modal">
<div class="modal__content">
<h1>Web Maker<small style="font-size:14px;"> v1.5.1</small></h1>
<h1>Web Maker<small style="font-size:14px;"> v1.6.0</small></h1>
<div>
<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>
@ -323,6 +385,20 @@
</div>
</div>
<div class="modal" id="js-notifications-modal">
<div class="modal__content">
<h1>Whats new?</h1>
<div class="notification">
<span class="notification__version">1.6.0</span>
<ul>
<li>You can now configure Web-Maker to not replace new tab page from the settings. It is always accessible from the icon in the top-right.</li>
<li>Download current code as HTML file with Ctrl/⌘ + S keyboard shortcut.</li>
<li>New notifications panel added so you are always aware of the new changes in Web-Maker.</li>
</ul>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<svg width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
@ -340,7 +416,7 @@
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
</form>
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
<script src="lib/codemirror/addon/edit/closebrackets.js"></script>

4
src/lib/hint.min.css vendored
View File

File diff suppressed because one or more lines are too long

45
src/script.js
View File

@ -3,6 +3,7 @@
/* eslint-enable no-extra-semi */
var editur = window.editur || {};
var version = '1.6.0';
var $ = document.querySelector.bind(document);
var $all = document.querySelectorAll.bind(document);
@ -10,6 +11,7 @@
var updateTimer
, updateDelay = 500
, currentLayoutMode
, hasSeenNotifications = true
, frame = $('#demo-frame')
, htmlCode = $('#js-html-code')
, cssCode = $('#js-css-code')
@ -23,11 +25,28 @@
, codepenForm = $('#js-codepen-form')
, saveHtmlBtn = $('#js-save-html')
, settingsBtn = $('#js-settings-btn')
, notificationsBtn = $('#js-notifications-btn')
, notificationsModal = $('#js-notifications-modal')
;
editur.cm = {};
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
// https://github.com/substack/semver-compare/blob/master/index.js
function semverCompare (a, b) {
var pa = a.split('.');
var pb = b.split('.');
for (var i = 0; i < 3; i++) {
var na = Number(pa[i]);
var nb = Number(pb[i]);
if (na > nb) { return 1; }
if (nb > na) { return -1; }
if (!isNaN(na) && isNaN(nb)) { return 1; }
if (isNaN(na) && !isNaN(nb)) { return -1; }
}
return 0;
}
function resetSplitting() {
var gutters = $all('.gutter');
for (var i = gutters.length; i--;) {
@ -184,6 +203,18 @@
return false;
});
notificationsBtn.addEventListener('click', function () {
notificationsModal.classList.toggle('is-modal-visible');
if (notificationsModal.classList.contains('is-modal-visible') && !hasSeenNotifications) {
hasSeenNotifications = true;
notificationsBtn.classList.remove('has-new');
chrome.storage.sync.set({
lastSeenVersion: version
}, function () {});
}
return false;
});
codepenBtn.addEventListener('click', function (e) {
var json = {
title: 'A Web Maker experiment',
@ -212,7 +243,8 @@
window.addEventListener('click', function(e) {
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
e.target.previousElementSibling.classList.toggle('is-modal-visible');
helpModal.classList.remove('is-modal-visible');
notificationsModal.classList.remove('is-modal-visible');
}
});
@ -256,6 +288,17 @@
editur.cm.js.refresh();
}
});
// Check for new version notifications
chrome.storage.sync.get({
lastSeenVersion: ''
}, function syncGetCallback(result) {
// console.log(result, hasSeenNotifications, version);
if (!result.lastSeenVersion || semverCompare(result.lastSeenVersion, version) === -1) {
notificationsBtn.classList.add('has-new');
hasSeenNotifications = false;
}
});
}
init();