mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-05 18:15:58 +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;
bottom: 0;
width: 400px;
padding: 20px;
z-index: 3;
background-color: #111;
transition: 0.3s ease;
@ -287,6 +288,25 @@
.saved-items-pane.is-open {
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 {
position: relative;
}
@ -567,7 +587,7 @@
</div>
<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>
<div id="js-saved-items-wrap">

67
src/script.js
View File

@ -44,6 +44,7 @@
, cssMode = CssModes.CSS
, sass
, currentItem
, savedItems
// DOM nodes
, frame = $('#demo-frame')
@ -122,7 +123,7 @@
// Save current item to storage
function saveItem() {
var isNewItem = !currentItem.id;
currentItem.id = currentItem.id || ('item-' + generateRandomId());
currentItem.id = currentItem.id || ('item-' + utils.generateRandomId());
saveCode();
// Push into the items hash if its a new item being saved
@ -144,21 +145,24 @@
currentItem.css = editur.cm.css.getValue();
currentItem.js = editur.cm.js.getValue();
currentItem.updatedOn = Date.now();
log('saving key', key || currentItem.id, currentItem)
currentItem.hoid = currentItem.id;
utils.log('saving key', key || currentItem.id, currentItem)
saveSetting(key || currentItem.id, currentItem);
}
function populateItem(items) {
currentItem = savedItems[];
// currentItem = savedItems[];
refreshEditor();
}
function populateItemsInSavedPane(items) {
if (!items || !items.length) return;
var html = '';
// TODO: sort desc. by updation date
items.sort(function (a, b) {
return b.updatedOn - a.updatedOn;
});
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;
toggleSavedItemsPane();
@ -172,9 +176,11 @@
var itemIds = Object.getOwnPropertyNames(result.items),
items = [];
savedItems = savedItems || [];
for (var i = 0; i < itemIds.length; i++) {
(function (index) {
chrome.storage.local.get(itemIds[index], function (itemResult) {
savedItems[itemIds[index]] = itemResult[itemIds[index]];
items.push(itemResult[itemIds[index]]);
// Check if we have all items now.
if (itemIds.length === items.length) {
@ -187,15 +193,19 @@
}
function createNewItem() {
var d = new Date();
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('');
editur.cm.css.setValue('');
editur.cm.js.setValue('');
editur.cm.html.refresh();
editur.cm.css.refresh();
editur.cm.js.refresh();
refreshEditor();
}
function openItem(itemId) {
currentItem = savedItems[itemId];
refreshEditor();
}
function refreshEditor() {
@ -320,8 +330,7 @@
};
function createPreviewFile(html, css, js) {
var contents =
'<html>\n<head>\n' +
var contents = '<html>\n<head>\n' +
'<style>\n' + css + '\n</style>\n</head>\n' +
'<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" });
function errorHandler() { console.log(arguments); }
function errorHandler() { console.utils.log(arguments); }
window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024 * 5, function(fs){
fs.root.getFile('preview.html', { create: true }, function(fileEntry) {
@ -433,7 +442,7 @@
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); 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');
});
@ -471,11 +480,17 @@
e.preventDefault();
});
onButtonClick(saveHtmlBtn, saveFile);
onButtonClick(openBtn, openSavedItemsPane);
onButtonClick(saveBtn, saveItem);
onButtonClick(newBtn, createNewItem);
onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
utils.onButtonClick(saveHtmlBtn, saveFile);
utils.onButtonClick(openBtn, openSavedItemsPane);
utils.onButtonClick(saveBtn, saveItem);
utils.onButtonClick(newBtn, createNewItem);
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
var modeItems = [].slice.call($all('.js-modes-menu a'));
@ -510,7 +525,7 @@
}
});
onButtonClick(settingsBtn, function() {
utils.onButtonClick(settingsBtn, function() {
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
@ -545,12 +560,12 @@
if (result.preserveLastCode && lastCode) {
if (lastCode.id) {
chrome.storage.local.get(lastCode.id, function (result) {
log('Load item ', lastCode.id)
utils.log('Load item ', lastCode.id)
currentItem = result[lastCode.id];
refreshEditor();
})
} else {
log('Load last unsaved item');
utils.log('Load last unsaved item');
currentItem = lastCode;
refreshEditor();
}
@ -566,8 +581,8 @@
chrome.storage.sync.get({
lastSeenVersion: ''
}, function syncGetCallback(result) {
// console.log(result, hasSeenNotifications, version);
if (!result.lastSeenVersion || semverCompare(result.lastSeenVersion, version) === -1) {
// console.utils.log(result, hasSeenNotifications, version);
if (!result.lastSeenVersion || utils.semverCompare(result.lastSeenVersion, version) === -1) {
notificationsBtn.classList.add('has-new');
hasSeenNotifications = false;
}

71
src/utils.js
View File

@ -1,36 +1,45 @@
// 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; }
(function () {
// 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;
}
return 0;
}
function generateRandomId(length) {
length = length || 10;
var id = '';
for (var i = length; i--;) {
id += String.fromCharCode(~~(Math.random() * 52) + 65);
function generateRandomId(len) {
len = len || 10;
var id = '';
for (var i = len; i--;) {
id += String.fromCharCode(~~(Math.random() * 52) + 65);
}
return id;
}
return id;
}
function onButtonClick(btn, listener) {
btn.addEventListener('click', function buttonClickListener() {
listener();
return false;
});
}
function log() {
if (window.DEBUG) {
console.log.apply(console, [].splice.call(arguments, 0));
function onButtonClick(btn, listener) {
btn.addEventListener('click', function buttonClickListener(e) {
listener(e);
return false;
});
}
}
function log() {
if (window.DEBUG) {
console.log.apply(console, [].splice.call(arguments, 0));
}
}
window.utils = {
semverCompare: semverCompare,
generateRandomId: generateRandomId,
onButtonClick: onButtonClick,
log: log
};
})();