From c2be7637baf6cd9cc6d0b02cb7ad878a057c8447 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 16 May 2016 04:24:23 +0530
Subject: [PATCH] add options page and preserve code setting.
---
src/eventPage.js | 12 +++++++--
src/index.html | 11 ++++++++
src/manifest.json | 4 +++
src/options.html | 40 +++++++++++++++++++++++++++++
src/options.js | 28 ++++++++++++++++++++
src/script.js | 65 +++++++++++++++++++++++++++++++++--------------
6 files changed, 139 insertions(+), 21 deletions(-)
create mode 100644 src/options.html
create mode 100644 src/options.js
diff --git a/src/eventPage.js b/src/eventPage.js
index 036d97b..ffea30f 100644
--- a/src/eventPage.js
+++ b/src/eventPage.js
@@ -1,3 +1,11 @@
chrome.browserAction.onClicked.addListener(function(activeTab) {
- chrome.tabs.create({ url: chrome.extension.getURL('index.html'), selected: true });
-});
\ No newline at end of file
+ chrome.tabs.create({ url: chrome.extension.getURL('index.html'), selected: true });
+});
+
+// TODO: remove me
+// Listen for messsage from tab script
+/*chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+ chrome.storage.local.set(request, function() {
+ console.log('saved', request);
+ });
+});*/
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index e25f9d2..5c678d5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -251,6 +251,7 @@
</a>
<div class="footer__separator"></div>
+
<a id="js-layout-btn-1" class="mode-btn">
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlink:href="#mode-icon" />
@@ -266,7 +267,17 @@
<use xlink:href="#mode-icon" />
</svg>
</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>
+
<a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a>
© Web Maker
<a id="js-help-btn" class="footer__link hint--rounded hint--top-right" data-hint="Help">
diff --git a/src/manifest.json b/src/manifest.json
index 5f2a829..cd2ae13 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -10,6 +10,10 @@
"chrome_url_overrides" : {
"newtab": "index.html"
},
+ "options_ui": {
+ "page": "options.html",
+ "chrome_style": true
+ },
"browser_action": {
"default_title": "Web Maker",
"default_icon": "icon-16.png"
diff --git a/src/options.html b/src/options.html
new file mode 100644
index 0000000..8fdee9e
--- /dev/null
+++ b/src/options.html
@@ -0,0 +1,40 @@
+<!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;
+ }
+ 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"></div>
+ <button id="js-save-btn" class="btn">Save</button>
+ </form>
+
+ <script src="options.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/options.js b/src/options.js
new file mode 100644
index 0000000..77c8f65
--- /dev/null
+++ b/src/options.js
@@ -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.textContent = '';
+ }, 750);
+ });
+
+ e.preventDefault();
+}
+
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.forms.optionsForm.addEventListener('submit',
+ saveOptions);
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index aa12670..11715de 100644
--- a/src/script.js
+++ b/src/script.js
@@ -20,6 +20,7 @@
, codepenBtn = $('#js-codepen-btn')
, codepenForm = $('#js-codepen-form')
, saveHtmlBtn = $('#js-save-html')
+ , settingsBtn = $('#js-settings-btn')
;
editur.cm = {};
@@ -60,21 +61,28 @@
window.saveSetting = function saveSetting(setting, value) {
var obj = {};
obj[setting] = value;
+ // TODO: remove me
+ // We delegate the saving to background script because, this tab cannot do
+ // async saving once the tab starts unloading.
+ // chrome.runtime.sendMessage(obj, function(response) {
+ // console.log(response);
+ // });
chrome.storage.local.set(obj, function() {
- // alert('Settings saved');
+ console.log('saved', request);
});
+ };
+
+ 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 () {
- // saveSettings();
- };
-
- editur.saveContent = function (content) {
- window.localStorage.editur = content;
- };
-
- editur.getLastSavedContent = function () {
- return window.localStorage.editur || "";
+ saveCode();
};
editur.setPreviewContent = function () {
@@ -153,14 +161,6 @@
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); 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 () {
helpModal.classList.toggle('is-modal-visible');
return false;
@@ -208,7 +208,34 @@
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
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+).
+ chrome.runtime.openOptionsPage();
+ } else {
+ // Fallback.
+ window.open(chrome.runtime.getURL('options.html'));
+ }
+ return false;
+ });
+
+
+ chrome.storage.local.get({
+ layoutMode: 1,
+ code: ''
+ }, function localGetCallback(result) {
+ toggleLayout(result.layoutMode);
+ if (result.code) {
+ editur.cm.html.setValue(result.code.html);
+ editur.cm.css.setValue(result.code.css);
+ editur.cm.js.setValue(result.code.js);
+ editur.cm.html.refresh();
+ editur.cm.css.refresh();
+ editur.cm.js.refresh();
+ }
+ });
}
init();