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

enable opening of saved items + some refactor.

Browse Source
This commit is contained in:
Kushagra Gour 2016-11-09 11:48:28 +05:30
parent 754a1eaa4b
commit c33eb3e445
3 changed files with 105 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/index.html
View File

@ -278,6 +278,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 400px; width: 400px;
padding: 20px;
z-index: 3; z-index: 3;
background-color: #111; background-color: #111;
transition: 0.3s ease; transition: 0.3s ease;
@ -287,6 +288,25 @@
.saved-items-pane.is-open { .saved-items-pane.is-open {
transform: translateX(0); transform: translateX(0);
} }
.saved-items-pane__close-btn {
position: absolute;
left: -32px;
opacity: 0;
transition: 0.25s ease;
}
.saved-items-pane.is-open .saved-items-pane__close-btn {
opacity: 1;
}
.saved-item-tile {
padding: 20px;
border: 1px solid rgba(255,255,255,0.1);
margin: 10px 0;
display: block;
border-radius: 2px;
}
.saved-item-tile:hover {
background: rgba(255,255,255,0.1);
}
.notifications-btn { .notifications-btn {
position: relative; position: relative;
} }
@ -567,7 +587,7 @@
</div> </div>
<div id="js-saved-items-pane" class="saved-items-pane"> <div id="js-saved-items-pane" class="saved-items-pane">
<button class="btn" id="js-saved-items-pane-close-btn">X</button> <button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
<h3>My Items</h3> <h3>My Items</h3>
<div id="js-saved-items-wrap"> <div id="js-saved-items-wrap">

67
src/script.js
View File

@ -44,6 +44,7 @@
, cssMode = CssModes.CSS , cssMode = CssModes.CSS
, sass , sass
, currentItem , currentItem
, savedItems
// DOM nodes // DOM nodes
, frame = $('#demo-frame') , frame = $('#demo-frame')
@ -122,7 +123,7 @@
// Save current item to storage // Save current item to storage
function saveItem() { function saveItem() {
var isNewItem = !currentItem.id; var isNewItem = !currentItem.id;
currentItem.id = currentItem.id || ('item-' + generateRandomId()); currentItem.id = currentItem.id || ('item-' + utils.generateRandomId());
saveCode(); saveCode();
// Push into the items hash if its a new item being saved // Push into the items hash if its a new item being saved
@ -144,21 +145,24 @@
currentItem.css = editur.cm.css.getValue(); currentItem.css = editur.cm.css.getValue();
currentItem.js = editur.cm.js.getValue(); currentItem.js = editur.cm.js.getValue();
currentItem.updatedOn = Date.now(); currentItem.updatedOn = Date.now();
log('saving key', key || currentItem.id, currentItem) utils.log('saving key', key || currentItem.id, currentItem)
currentItem.hoid = currentItem.id;
saveSetting(key || currentItem.id, currentItem); saveSetting(key || currentItem.id, currentItem);
} }
function populateItem(items) { function populateItem(items) {
currentItem = savedItems[]; // currentItem = savedItems[];
refreshEditor(); refreshEditor();
} }
function populateItemsInSavedPane(items) { function populateItemsInSavedPane(items) {
if (!items || !items.length) return; if (!items || !items.length) return;
var html = ''; var html = '';
// TODO: sort desc. by updation date // TODO: sort desc. by updation date
items.sort(function (a, b) {
return b.updatedOn - a.updatedOn;
});
items.forEach(function (item) { items.forEach(function (item) {
html += '<div class="saved-item-tile">' + item.title + '</div>'; html += '<a class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">' +
'<h3>' + item.title + '</h3><span>Last updated: ' + item.updatedOn + '</span></a>';
}) })
savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html; savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
toggleSavedItemsPane(); toggleSavedItemsPane();
@ -172,9 +176,11 @@
var itemIds = Object.getOwnPropertyNames(result.items), var itemIds = Object.getOwnPropertyNames(result.items),
items = []; items = [];
savedItems = savedItems || [];
for (var i = 0; i < itemIds.length; i++) { for (var i = 0; i < itemIds.length; i++) {
(function (index) { (function (index) {
chrome.storage.local.get(itemIds[index], function (itemResult) { chrome.storage.local.get(itemIds[index], function (itemResult) {
savedItems[itemIds[index]] = itemResult[itemIds[index]];
items.push(itemResult[itemIds[index]]); items.push(itemResult[itemIds[index]]);
// Check if we have all items now. // Check if we have all items now.
if (itemIds.length === items.length) { if (itemIds.length === items.length) {
@ -187,15 +193,19 @@
} }
function createNewItem() { function createNewItem() {
var d = new Date();
currentItem = { currentItem = {
title: 'Untitled ' + (new Date).getDate() title: 'Untitled ' + d.getDate() + '-' + d.getMonth() + '-' + d.getHours() + ':' + d.getMinutes(),
html: '',
css: '',
js: '',
layoutMode: currentLayoutMode
}; };
editur.cm.html.setValue(''); refreshEditor();
editur.cm.css.setValue(''); }
editur.cm.js.setValue(''); function openItem(itemId) {
editur.cm.html.refresh(); currentItem = savedItems[itemId];
editur.cm.css.refresh(); refreshEditor();
editur.cm.js.refresh();
} }
function refreshEditor() { function refreshEditor() {
@ -320,8 +330,7 @@
}; };
function createPreviewFile(html, css, js) { function createPreviewFile(html, css, js) {
var contents = var contents = '<html>\n<head>\n' +
'<html>\n<head>\n' +
'<style>\n' + css + '\n</style>\n</head>\n' + '<style>\n' + css + '\n</style>\n</head>\n' +
'<body>\n' + html + '\n<script>\n' + js + '\n</script></body>\n</html>'; '<body>\n' + html + '\n<script>\n' + js + '\n</script></body>\n</html>';
@ -329,7 +338,7 @@
var blob = new Blob([ contents ], { type: "text/plain;charset=UTF-8" }); var blob = new Blob([ contents ], { type: "text/plain;charset=UTF-8" });
function errorHandler() { console.log(arguments); } function errorHandler() { console.utils.log(arguments); }
window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024 * 5, function(fs){ window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024 * 5, function(fs){
fs.root.getFile('preview.html', { create: true }, function(fileEntry) { fs.root.getFile('preview.html', { create: true }, function(fileEntry) {
@ -433,7 +442,7 @@
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; }); layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; });
layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; }); layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; });
onButtonClick(helpBtn, function () { utils.onButtonClick(helpBtn, function () {
helpModal.classList.toggle('is-modal-visible'); helpModal.classList.toggle('is-modal-visible');
}); });
@ -471,11 +480,17 @@
e.preventDefault(); e.preventDefault();
}); });
onButtonClick(saveHtmlBtn, saveFile); utils.onButtonClick(saveHtmlBtn, saveFile);
onButtonClick(openBtn, openSavedItemsPane); utils.onButtonClick(openBtn, openSavedItemsPane);
onButtonClick(saveBtn, saveItem); utils.onButtonClick(saveBtn, saveItem);
onButtonClick(newBtn, createNewItem); utils.onButtonClick(newBtn, createNewItem);
onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane); utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
utils.onButtonClick(savedItemsPane, function (e) {
if (e.target.classList.contains('js-saved-item-tile')) {
openItem(e.target.dataset.itemId);
toggleSavedItemsPane();
}
});
// 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'));
@ -510,7 +525,7 @@
} }
}); });
onButtonClick(settingsBtn, function() { utils.onButtonClick(settingsBtn, function() {
if (!chrome.runtime.openOptionsPage) { if (!chrome.runtime.openOptionsPage) {
// New way to open options pages, if supported (Chrome 42+). // New way to open options pages, if supported (Chrome 42+).
// Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997 // Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
@ -545,12 +560,12 @@
if (result.preserveLastCode && lastCode) { if (result.preserveLastCode && lastCode) {
if (lastCode.id) { if (lastCode.id) {
chrome.storage.local.get(lastCode.id, function (result) { chrome.storage.local.get(lastCode.id, function (result) {
log('Load item ', lastCode.id) utils.log('Load item ', lastCode.id)
currentItem = result[lastCode.id]; currentItem = result[lastCode.id];
refreshEditor(); refreshEditor();
}) })
} else { } else {
log('Load last unsaved item'); utils.log('Load last unsaved item');
currentItem = lastCode; currentItem = lastCode;
refreshEditor(); refreshEditor();
} }
@ -566,8 +581,8 @@
chrome.storage.sync.get({ chrome.storage.sync.get({
lastSeenVersion: '' lastSeenVersion: ''
}, function syncGetCallback(result) { }, function syncGetCallback(result) {
// console.log(result, hasSeenNotifications, version); // console.utils.log(result, hasSeenNotifications, version);
if (!result.lastSeenVersion || 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;
} }

71
src/utils.js
View File

@ -1,36 +1,45 @@
// https://github.com/substack/semver-compare/blob/master/index.js (function () {
function semverCompare(a, b) { // https://github.com/substack/semver-compare/blob/master/index.js
var pa = a.split('.'); function semverCompare(a, b) {
var pb = b.split('.'); var pa = a.split('.');
for (var i = 0; i < 3; i++) { var pb = b.split('.');
var na = Number(pa[i]); for (var i = 0; i < 3; i++) {
var nb = Number(pb[i]); var na = Number(pa[i]);
if (na > nb) { return 1; } var nb = Number(pb[i]);
if (nb > na) { return -1; } if (na > nb) { return 1; }
if (!isNaN(na) && isNaN(nb)) { return 1; } if (nb > na) { return -1; }
if (isNaN(na) && !isNaN(nb)) { return -1; } if (!isNaN(na) && isNaN(nb)) { return 1; }
if (isNaN(na) && !isNaN(nb)) { return -1; }
}
return 0;
} }
return 0;
}
function generateRandomId(length) { function generateRandomId(len) {
length = length || 10; len = len || 10;
var id = ''; var id = '';
for (var i = length; i--;) { for (var i = len; i--;) {
id += String.fromCharCode(~~(Math.random() * 52) + 65); id += String.fromCharCode(~~(Math.random() * 52) + 65);
}
return id;
} }
return id;
}
function onButtonClick(btn, listener) { function onButtonClick(btn, listener) {
btn.addEventListener('click', function buttonClickListener() { btn.addEventListener('click', function buttonClickListener(e) {
listener(); listener(e);
return false; return false;
}); });
}
function log() {
if (window.DEBUG) {
console.log.apply(console, [].splice.call(arguments, 0));
} }
}
function log() {
if (window.DEBUG) {
console.log.apply(console, [].splice.call(arguments, 0));
}
}
window.utils = {
semverCompare: semverCompare,
generateRandomId: generateRandomId,
onButtonClick: onButtonClick,
log: log
};
})();