From 76abde22e4a3c48b8b81a75900c21e0ced6f4bde Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 4 Mar 2017 20:35:10 +0530 Subject: [PATCH] save and load prefs. fixes #65 #28 --- src/index.html | 45 +++++++++++++++++++++++++++++++++++---------- src/script.js | 49 ++++++++++++++++++++++++++++++++++++++----------- src/style.css | 9 ++++++++- 3 files changed, 81 insertions(+), 22 deletions(-) diff --git a/src/index.html b/src/index.html index 5454f72..acefc0c 100644 --- a/src/index.html +++ b/src/index.html @@ -303,30 +303,55 @@

Indentation

-

+

Editing

-

+ + + +
+ +

+

Fun

-

diff --git a/src/script.js b/src/script.js index be42f8c..3abc5b0 100644 --- a/src/script.js +++ b/src/script.js @@ -63,7 +63,6 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */ , minCodeWrapSize = 33 , mainSplitInstance , codeSplitInstance - // TODO: for legacy reasons when. Will be refactored as global preferences. , prefs = {} , codeInPreview = { html: null, css: null, js: null } , isSavedItemsPaneOpen = false @@ -1134,18 +1133,33 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */ e.preventDefault(); } + function updateSettingsInUi() { + $('[data-setting=preserveLastCode]').checked = prefs.preserveLastCode; + $('[data-setting=replaceNewTab]').checked = prefs.replaceNewTab; + $('[data-setting=htmlMode]').value = prefs.htmlMode; + $('[data-setting=cssMode]').value = prefs.cssMode; + $('[data-setting=jsMode]').value = prefs.jsMode; + $('[data-setting=indentSize]').value = prefs.indentSize; + $('[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']').checked = true; + $('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn; + } + scope.updateSetting = function updateSetting(e) { - var settingName = e.target.dataset.setting; - console.log(e, settingName); - var obj = {}; - obj[settingName] = e.target.checked; - chrome.storage.sync.set(obj, function() { - alertsService.add('setting saved'); - }); + // If this was triggered from user interaction, save the setting + if (e) { + var settingName = e.target.dataset.setting; + var obj = {}; + var el = e.target; + console.log(e, settingName, (el.type === 'checkbox') ? el.checked : el.value); + obj[settingName] = el.type === 'checkbox' ? el.checked : el.value; + chrome.storage.sync.set(obj, function() { + alertsService.add('setting saved'); + }); + } scope.cm.js.setOption( 'indentWithTabs', - $('[data-setting=indentWith]:checked').value === 'tab' + $('[data-setting=indentWith]:checked').value !== 'spaces' ); scope.cm.js.setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false); @@ -1410,9 +1424,13 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */ // Get synced `preserveLastCode` setting to get back last code (or not). chrome.storage.sync.get({ preserveLastCode: true, + replaceNewTab: false, htmlMode: 'html', jsMode: 'js', - cssMode: 'css' + cssMode: 'css', + isCodeBlastOn: false, + indentWith: 'spaces', + indentSize: 2 }, function syncGetCallback(result) { if (result.preserveLastCode && lastCode) { unsavedEditCount = 0; @@ -1430,9 +1448,17 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */ } else { createNewItem(); } - prefs.htmlMode = result.htmlmode; + prefs.preserveLastCode = result.preserveLastCode; + prefs.replaceNewTab = result.replaceNewTab; + prefs.htmlMode = result.htmlMode; prefs.cssMode = result.cssMode; prefs.jsMode = result.jsMode; + prefs.isCodeBlastOn = result.isCodeBlastOn; + prefs.indentSize = result.indentSize; + prefs.indentWith = result.indentWith; + + updateSettingsInUi(); + scope.updateSetting(); }); // Check for new version notifications @@ -1462,6 +1488,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */ } }); + requestAnimationFrame(compileNodes); } diff --git a/src/style.css b/src/style.css index ebee10a..7e0b103 100644 --- a/src/style.css +++ b/src/style.css @@ -34,10 +34,17 @@ a { text-decoration: none; color: crimson; cursor: pointer; } .full-width { width: 100%; } .opacity--30 { opacity: 0.3; } .pointer-none { pointer-events: none; } - +hr { + background: 0; + border: 0; + border-bottom: 1px solid #dedede; +} [class*="hint--"]:after { text-transform: none; } +.line { + margin-bottom: 1em; +} .caret { display: inline-block; width: 0;