-
Light
-
-
Dark
+
+
+
-
-
-
-
-
-
-
diff --git a/main.js b/main.js
index b1988ca..2ea0057 100644
--- a/main.js
+++ b/main.js
@@ -1,144 +1,171 @@
//Use Polymer Bindings
var mainContent = document.querySelector('#mainContent');
-//Get data from the localStorage
-mainContent.lang = localStorage.lang || '--';
-mainContent.code = localStorage.theCode || '';
-mainContent.theme = localStorage.theme || 'light';
-mainContent.fontPt = localStorage.fontPt || 14;
-
-mainContent.addEventListener('template-bound', function(){
+//Get data from the syncStorage
+chrome.storage.sync.get(
+ ['language', 'theCode', 'theme', 'fontPt'],
+ function(localStorage) {
+ mainContent.language = localStorage.language || '--';
+ mainContent.code = localStorage.theCode || '';
+ mainContent.theme = localStorage.theme || 'light';
+ mainContent.fontPt = localStorage.fontPt || 14;
+ });
+mainContent.addEventListener('dom-change', function() {
//Set the font-size
- mainContent.ptChange();
+ mainContent.ptChange({detail: mainContent.fontPt});
//Now that the template is bound update the code in the textArea
- mainContent.$.taCode.value = mainContent.code;
- mainContent.$.agTa.update(mainContent.$.taCode); //Update the autoGrowArea;
-
- //Add a change listener to the textArea
- mainContent.$.taCode.addEventListener('input', function() {
- localStorage.theCode = mainContent.code = mainContent.$.taCode.value;
- //Code Changed, run the validation for slides
- mainContent.validateForSlides();
- });
+ //mainContent.$.codeValue = mainContent.code;
+ //mainContent.$.agTa.update(mainContent.$.taCode); //Update the autoGrowArea;
//Find the label of the selected language to set it on the paper-dropdown-menu
- var mnItems =document.querySelectorAll('paper-item');
- [].some.call(mnItems, function(mnItem){
- if (mnItem.dataset.value==mainContent.lang){
+ /*var mnItems = document.querySelectorAll('paper-item');
+ [].some.call(mnItems, function(mnItem) {
+ if (mnItem.dataset.value == mainContent.language) {
//Item found, update the selectedItem to change the label
- mainContent.$.pdmLanguage.selectedItemLabel=mnItem.innerText;
+ mainContent.$.pdmLanguage.selectedItemLabel = mnItem.innerText;
return true;
}
return false;
- });
+ });*/
//Select the theme on the slider
- mainContent.$.ptbTheme.checked=(mainContent.theme=='dark');
+ //mainContent.$.ptbTheme.checked = (mainContent.theme == 'dark');
- //Set the theme and lang on all the components
- setThemeAndLang();
+ //Update Computed Styles
+ Polymer.updateStyles();
//Run validation
mainContent.validateForSlides();
});
-var setThemeAndLang = function(){
- //Change the classes on the prettyprint element accordingly
- document.body.className = 'theme-' + mainContent.theme;
-
- mainContent.$.taCode.className = 'theme-' + mainContent.theme;
-
- mainContent.$.destination.className = 'theme-' + mainContent.theme;
-
- //Change the language class if needed
- /*if (mainContent.lang != '--') {
- mainContent.$.destination.className += ' lang-' + mainContent.lang;
- }*/
-}
+//Computed Styles
+mainContent._computedBodyClass = function(theme) {
+ return 'fit layout vertical theme-' + (theme || 'light');
+};
+
+mainContent._computedThemeClass = function(theme){
+ return 'theme-' + (theme || 'light');
+};
+
+mainContent._computedDestinationClass = function(theme) {
+ return 'flex theme-' + (theme || 'light');
+};
+
+mainContent._selTheme = function(theme) {
+ var tmpTheme = theme || 'light';
+
+ return (tmpTheme == 'dark');
+
+};
+
+mainContent.codeChanged = function(newVal) {
+
+ chrome.storage.sync.set({'theCode': mainContent.code}, function() {
+ //Nothing to do
+ });
+ //Code Changed, run the validation for slides
+ mainContent.validateForSlides();
+
+};
-mainContent.languageSelected = function(selMenu){
+mainContent.languageSelected = function(selMenu) {
//Changed selected language, update the value and store
- if(selMenu.detail.isSelected){
- localStorage.lang = mainContent.lang=selMenu.detail.item.dataset.value;
+ if (selMenu.detail.isSelected) {
+ mainContent.language = selMenu.detail.item.dataset.value;
+ chrome.storage.sync.set({'language': mainContent.language}, function() {
+ //Nothing to do
+ });
//Set the theme and lang
- setThemeAndLang();
+ Polymer.updateStyles();
}
-}
+};
-mainContent.chTheme = function(){
+mainContent.chTheme = function() {
//if checked theme is dark, otherwise light
- if(mainContent.$.ptbTheme.checked){
- localStorage.theme = mainContent.theme = 'dark';
- }else{
- localStorage.theme = mainContent.theme = 'light';
+ if (mainContent.$.ptbTheme.checked) {
+ mainContent.theme = 'dark';
+ }else {
+ mainContent.theme = 'light';
}
+ chrome.storage.sync.set({'theme': mainContent.theme}, function() {
+ //Nothing to do
+ });
- //Set the theme and lang
- setThemeAndLang();
+ //Update styles
+ Polymer.updateStyles();
-}
+};
-var ptToPx = function(valPt){
- return (16/12)*valPt;//return the font-size in px from the ptValue
-}
+var ptToPx = function(valPt) {
+ return (16 / 12) * valPt;//return the font-size in px from the ptValue
+};
-mainContent.ptChange = function(){
- //TODO:Validate the value before saving it and using it to calculate the px value
- localStorage.fontPt = mainContent.fontPt;
+mainContent.ptChange = function(newVal) {
+
+ chrome.storage.sync.set({'fontPt': newVal.detail.value}, function() {
+ //Nothing to do
+ });
//Get the px approximate size
- var fontPx = ptToPx(mainContent.fontPt) + 'px';
+ mainContent.fontPx = ptToPx(newVal.detail.value) + 'px';
//AutoGrow Text Area
- mainContent.$.agTa.style.fontSize = fontPx;
- //Text Area
- mainContent.$.taCode.style.fontSize = fontPx;
+ mainContent.$.agTa.style.fontSize = mainContent.fontPx;//Done to avoid errors in Polymer library... TODO:open Issue?
+ //--paper-input-container-input
+ mainContent.$.agTa.customStyle['--paper-input-container-input'] = {'font-size': mainContent.fontPx};
+
//Pre Element
- var preElement = mainContent.$.destination.shadowRoot.querySelector('pre');
- preElement.style.fontSize = fontPx;
-
-}
-
-mainContent.selPrettyCode = function(sender){
- //Get the pre element inside the prettyfy-element
- var preElement = sender.currentTarget.shadowRoot.querySelector('pre');
-
- //Select the text range
- var doc = document;
- var selection = window.getSelection();
- var range = doc.createRange();
- range.selectNodeContents(preElement);
- selection.removeAllRanges();
- selection.addRange(range);
-
-}
-
-mainContent.validateForSlides = function(){
- var divW = document.querySelector("#slidesWarnings");
- var warn = [];
-
- var MAX_LINES = 20;
- if ((mainContent.code.match(/\n/g) || []).length >= MAX_LINES) {
- warn.push('More than ' + MAX_LINES + ' lines of code will be hard to read on a slide.');
+ if (mainContent.$.destination.shadowRoot) {
+ var preElement = mainContent.$.destination.shadowRoot.querySelector('pre');
+ preElement.style.fontSize = mainContent.fontPx;
}
-
- var lines = mainContent.code.split('\n') || [];
- var MAX_LINE_LENGTH = 80;
- for (var i = 0; i < lines.length; i++) {
- if (lines[i].length > MAX_LINE_LENGTH) {
- warn.push('Line ' + (i + 1) + ' has more than ' + MAX_LINE_LENGTH + ' characters!');
- }
+ Polymer.updateStyles();
+
+};
+
+mainContent.selPrettyCode = function(sender) {
+ //Get the pre element inside the prettify-element
+ if (mainContent.$.destination.shadowRoot) {
+ var preElement = mainContent.$.destination.shadowRoot.querySelector('pre');
+ //Select the text range
+ var doc = document;
+ var selection = window.getSelection();
+ var range = doc.createRange();
+ range.selectNodeContents(preElement);
+ selection.removeAllRanges();
+ selection.addRange(range);
}
- if (warn.length>0){
- divW.innerHTML = warn.join('
');
- }else{
- divW.innerHTML='Perfect code for slides';
+};
+
+mainContent.validateForSlides = function() {
+ var divW = document.querySelector('#slidesWarnings');
+
+ if (divW){
+ var warn = [];
+
+ var MAX_LINES = 20;
+ if ((mainContent.code.match(/\n/g) || []).length >= MAX_LINES) {
+ warn.push('More than ' + MAX_LINES +
+ ' lines of code will be hard to read on a slide.');
+ }
+
+ var lines = mainContent.code.split('\n') || [];
+ var MAX_LINE_LENGTH = 80;
+ for (var i = 0; i < lines.length; i++) {
+ if (lines[i].length > MAX_LINE_LENGTH) {
+ warn.push('Line ' + (i + 1) + ' has more than ' +
+ MAX_LINE_LENGTH + ' characters!');
+ }
+ }
+ if (warn.length > 0) {
+ divW.innerHTML = warn.join('
');
+ }else {
+ divW.innerHTML = 'Perfect code for slides';
+ }
}
-}
-
-
+};
diff --git a/manifest.json b/manifest.json
index 7f30ed7..48a0da6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,15 +2,17 @@
"manifest_version": 2,
"name": "PrettyCode",
"short_name": "PrettyCode",
- "description": "Description for PrettyCode",
+ "description": "Code prettyfier following guidelines for GDE Videos",
- "version": "0.0.1.0",
+ "version": "1.0.0",
"icons": {
- "16": "assets/icon_16.png",
- "128": "assets/icon_128.png"
+ "32": "assets/favicon_32.png",
+ "128": "assets/favicon_128.png"
},
-
+ "permissions": [
+ "storage"
+ ],
"app": {
"background": {
"scripts": ["background.js"]
diff --git a/setShadow.js b/setShadow.js
new file mode 100644
index 0000000..4d351f5
--- /dev/null
+++ b/setShadow.js
@@ -0,0 +1,2 @@
+window.Polymer = window.Polymer || {};
+window.Polymer.dom = 'shadow';
\ No newline at end of file
diff --git a/styles.css b/styles.css
deleted file mode 100644
index de7ffb5..0000000
--- a/styles.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/* CSS Styles adapted from http://www.nurik.net/exp/iohighlighter/ */
-body {
- background-color: #e8e8e8;
- -webkit-font-smoothing: antialiased;
-}
-
-body.theme-light {
- background-color: #e8e8e8;
- color: #000;
-}
-
-body.theme-dark {
- background-color: #222;
- color: #fff;
-}
-
-paper-autogrow-textarea{
- width: 100%;
- min-height: 90px;
- font-family: Inconsolata;
- font-size: 20px;/*= 15pt, more info http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/*/
-}
-#taCode {
- font-family: Inconsolata;
- font-size: 20px;/*= 15pt, more info http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/*/
-}
-
-.theme-light #taCode {
- background-color: #ffcccc;
-}
-
-#slidesWarnings {
- background-color: #f00;
- color: #fff;
- padding: 20px;
- font-family: Inconsolata;
- font-weight: bold;
- border-radius: 6px;
- }
-
-/*Themes*/
-.theme-dark #taCode {
- background-color: #300;
- color: #fff;
-}
-
-.theme-dark prettify-element::shadow pre { font-family: Inconsolata; font-size: 20px; background-color:transparent;}
-.theme-dark prettify-element::shadow .pln { color: #fff } /* plain text */
-.theme-dark prettify-element::shadow .str,
-.theme-dark prettify-element::shadow .atv { color: #57bb8a } /* string content and attribute value */
-.theme-dark prettify-element::shadow .kwd,
-.theme-dark prettify-element::shadow .tag { color: #7baaf7; } /* a keyword or tag */
-.theme-dark prettify-element::shadow .com { color: #aaa } /* a comment */
-.theme-dark prettify-element::shadow .typ,
-.theme-dark prettify-element::shadow .var { color: #ff8a65 } /* a type name or xq variable */
-.theme-dark prettify-element::shadow .lit { color: #f4b400 } /* a literal value */
-.theme-dark prettify-element::shadow .pun,
-.theme-dark prettify-element::shadow .opn,
-.theme-dark prettify-element::shadow .clo { color: #a3a3a3 } /* punctuation, lisp open bracket, lisp close bracket */
-.theme-dark prettify-element::shadow .atn { color: #f06292 } /* a markup attribute name */
-.theme-dark prettify-element::shadow .dec,
-.theme-dark prettify-element::shadow .var { color: #e67c73 } /* a declaration like doctype */
-.theme-dark prettify-element::shadow .fun { color: #fff } /* a function name */
-
-
-.theme-light prettify-element::shadow pre { font-family: Inconsolata; font-size: 20px; background-color:transparent;}
-.theme-light prettify-element::shadow .pln { color: #000 } /* plain text */
-.theme-light prettify-element::shadow .str,
-.theme-light prettify-element::shadow .atv { color: #0f9d58 } /* string content and attribute value */
-.theme-light prettify-element::shadow .kwd,
-.theme-light prettify-element::shadow .tag { color: #4285f4; } /* a keyword or tag */
-.theme-light prettify-element::shadow .com { color: #999 } /* a comment */
-.theme-light prettify-element::shadow .typ,
-.theme-light prettify-element::shadow .var { color: #673ab7 } /* a type name or xq variable */
-.theme-light prettify-element::shadow .lit { color: #db4437 } /* a literal value */
-.theme-light prettify-element::shadow .pun,
-.theme-light prettify-element::shadow .opn,
-.theme-light prettify-element::shadow .clo { color: #a3a3a3 } /* punctuation, lisp open bracket, lisp close bracket */
-.theme-light prettify-element::shadow .atn { color: #e91e63 } /* a markup attribute name */
-.theme-light prettify-element::shadow .dec,
-.theme-light prettify-element::shadow .var { color: #e67c73 } /* a declaration like doctype */
-.theme-light prettify-element::shadow .fun { color: #fff } /* a function name */
diff --git a/styles.html b/styles.html
new file mode 100644
index 0000000..3e30865
--- /dev/null
+++ b/styles.html
@@ -0,0 +1,151 @@
+
+
\ No newline at end of file