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

Merge pull request #5 from chinchang/settings

Browse Source 
Options page
This commit is contained in:
Kushagra Gour 2016-05-17 02:05:35 +05:30
commit daa3ff052f
6 changed files with 143 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/index.html
View File

@ -251,6 +251,7 @@
</a> </a>
<div class="footer__separator"></div> <div class="footer__separator"></div>
<a id="js-layout-btn-1" class="mode-btn"> <a id="js-layout-btn-1" 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" />
@ -266,7 +267,17 @@
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<div class="footer__separator"></div>
<a id="js-settings-btn" class="mode-btn hint--top-left hint--rounded" data-hint="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>
</a>
</div> </div>
<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="js-help-btn" class="footer__link hint--rounded hint--top-right" data-hint="Help">

4
src/manifest.json
View File

@ -10,6 +10,10 @@
"chrome_url_overrides" : { "chrome_url_overrides" : {
"newtab": "index.html" "newtab": "index.html"
}, },
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"browser_action": { "browser_action": {
"default_title": "Web Maker", "default_title": "Web Maker",
"default_icon": "icon-16.png" "default_icon": "icon-16.png"

44
src/options.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head><title>Settings - Web Maker</title>
<style>
body {
font-size: 16px;
}
.btn {
background: #ff8c00;
color: white;
text-shadow: none;
border-radius: 3px;
border: 0;
outline: 0;
padding: 5px 8px;
cursor: pointer;
margin: 5px 0;
font-size: inherit;
}
.status {
color: green;
margin-bottom: 10px;
}
label {
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Settings</h3>
<form name="optionsForm">
<label>
<input type="checkbox" name="preserveLastCode">
Preserve last written code
</label>
<div id="js-status" class="status">&nbsp;</div>
<button id="js-save-btn" class="btn">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>

28
src/options.js Normal file
View File

@ -0,0 +1,28 @@
// Restores preferences from chrome.storage.
function restoreOptions() {
chrome.storage.sync.get({
preserveLastCode: true
}, function(items) {
document.forms.optionsForm.preserveLastCode.checked = items.preserveLastCode;
});
}
function saveOptions(e) {
var preserveLastCode = document.forms.optionsForm.preserveLastCode.checked;
chrome.storage.sync.set({
preserveLastCode: preserveLastCode
}, function() {
var status = document.getElementById('js-status');
status.textContent = 'Settings saved.';
setTimeout(function() {
status.innerHTML = '&nbsp;';
}, 750);
});
e.preventDefault();
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.forms.optionsForm.addEventListener('submit',
saveOptions);

74
src/script.js
View File

@ -20,6 +20,7 @@
, codepenBtn = $('#js-codepen-btn') , codepenBtn = $('#js-codepen-btn')
, codepenForm = $('#js-codepen-form') , codepenForm = $('#js-codepen-form')
, saveHtmlBtn = $('#js-save-html') , saveHtmlBtn = $('#js-save-html')
, settingsBtn = $('#js-settings-btn')
; ;
editur.cm = {}; editur.cm = {};
@ -61,20 +62,20 @@
var obj = {}; var obj = {};
obj[setting] = value; obj[setting] = value;
chrome.storage.local.set(obj, function() { chrome.storage.local.set(obj, function() {
// alert('Settings saved');
}); });
};
function saveCode() {
var code = {
html: editur.cm.html.getValue(),
css: editur.cm.css.getValue(),
js: editur.cm.js.getValue()
};
saveSetting('code', code);
} }
window.onunload = function () { window.onunload = function () {
// saveSettings(); saveCode();
};
editur.saveContent = function (content) {
window.localStorage.editur = content;
};
editur.getLastSavedContent = function () {
return window.localStorage.editur || "";
}; };
editur.setPreviewContent = function () { editur.setPreviewContent = function () {
@ -149,18 +150,12 @@
}); });
function init () { function init () {
var lastCode;
layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; }); layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });
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; });
chrome.storage.local.get('layoutMode', function localGetCallback(result) {
if (result.layoutMode) {
toggleLayout(result.layoutMode);
} else {
toggleLayout(1);
}
});
helpBtn.addEventListener('click', function () { helpBtn.addEventListener('click', function () {
helpModal.classList.toggle('is-modal-visible'); helpModal.classList.toggle('is-modal-visible');
return false; return false;
@ -208,7 +203,48 @@
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) { if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
e.target.previousElementSibling.classList.toggle('is-modal-visible'); e.target.previousElementSibling.classList.toggle('is-modal-visible');
} }
}) });
settingsBtn.addEventListener('click', function(e) {
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')
});
}
return false;
});
chrome.storage.local.get({
layoutMode: 1,
code: ''
}, function localGetCallback(result) {
toggleLayout(result.layoutMode);
if (result.code) {
lastCode = result.code;
}
});
// Get synced `preserveLastCode` setting to get back last code (or not).
chrome.storage.sync.get({
preserveLastCode: true
}, function syncGetCallback(result) {
if (result.preserveLastCode && lastCode) {
editur.cm.html.setValue(lastCode.html);
editur.cm.css.setValue(lastCode.css);
editur.cm.js.setValue(lastCode.js);
editur.cm.html.refresh();
editur.cm.css.refresh();
editur.cm.js.refresh();
}
});
} }
init(); init();