Light
- Dark
+
-
-
+
+
-
diff --git a/main.js b/main.js
index 86b780a..2ea0057 100644
--- a/main.js
+++ b/main.js
@@ -2,158 +2,170 @@
var mainContent = document.querySelector('#mainContent');
//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('template-bound', function(){
+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() {
- mainContent.code = mainContent.$.taCode.value;
- chrome.storage.sync.set({'theCode': mainContent.code}, function() {
- //Nothing to do
- });
- //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.language){
+ /*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){
- mainContent.language=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){
+ if (mainContent.$.ptbTheme.checked) {
mainContent.theme = 'dark';
- }else{
+ }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
-
- chrome.storage.sync.set({'fontPt': mainContent.fontPt}, function() {
+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 079ef93..48a0da6 100644 --- a/manifest.json +++ b/manifest.json @@ -4,7 +4,7 @@ "short_name": "PrettyCode", "description": "Code prettyfier following guidelines for GDE Videos", - "version": "0.0.2.1", + "version": "1.0.0", "icons": { "32": "assets/favicon_32.png", 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 e85b8ed..0000000 --- a/styles.css +++ /dev/null @@ -1,92 +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; - -webkit-user-select: text;/*User Text selectio for Chrome Apps*/ -} -.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; - -webkit-user-select: text;/*User Text selectio for Chrome Apps*/ -} -.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