From 84a46ef77edc75f2959bb268b829169d89d6652c Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 24 Dec 2014 17:42:18 +0100 Subject: [PATCH 01/10] evaluate all the lines for maxLenght --- main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/main.js b/main.js index 83b58de..b1988ca 100644 --- a/main.js +++ b/main.js @@ -131,7 +131,6 @@ mainContent.validateForSlides = function(){ 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!'); - break; } } if (warn.length>0){ From 25034545b573255a170dfcbc44ac3302ae06a722 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Thu, 25 Dec 2014 18:47:14 +0100 Subject: [PATCH 02/10] Branch clarifications --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 500d379..2538725 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,5 @@ PrettyCode ========== Chrome App to prettify code and have it ready to copy and paste in presentation/documents keeping the formatting +`master` branch is the website version +`chromeApp` is the code with the changes needed to make everything works in a Chrome App From 1c7f89ffc69657489f556f830f68d4cd64be7217 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Sun, 28 Jun 2015 21:59:30 +0200 Subject: [PATCH 03/10] initial port to 1.0 UI --- .gitignore | 4 +- background.js | 2 +- bower.json | 15 +++--- index.html | 46 ++++++++++-------- main.js | 87 +++++++++++++++++----------------- manifest.json | 2 +- styles.css | 92 ------------------------------------ styles.html | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 210 insertions(+), 166 deletions(-) delete mode 100644 styles.css create mode 100644 styles.html diff --git a/.gitignore b/.gitignore index e9b4327..c5f05f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ bower_components vulcanized.js -vulcanized.html \ No newline at end of file +vulcanized.html +index.build.html +index.build.js \ No newline at end of file diff --git a/background.js b/background.js index f460b13..abc0c16 100644 --- a/background.js +++ b/background.js @@ -6,7 +6,7 @@ */ chrome.app.runtime.onLaunched.addListener(function(launchData) { chrome.app.window.create( - 'index.html', + 'index.html',//Open the minified and CSP enabled code { id: 'mainWindow', bounds: {width: 800, height: 600} diff --git a/bower.json b/bower.json index 9ecc7f5..34d38b8 100644 --- a/bower.json +++ b/bower.json @@ -6,13 +6,12 @@ "author": "", "private": true, "dependencies": { - "polymer": "Polymer/polymer#^0.5.2", - "core-elements": "Polymer/core-elements#^0.5.2", - "prettify-element": "SmokyBob/prettify-element#master", - "paper-button": "Polymer/paper-button#~0.5.2", - "paper-dropdown-menu": "Polymer/paper-dropdown-menu#~0.5.2", - "paper-dropdown": "Polymer/paper-dropdown#~0.5.2", - "paper-input": "Polymer/paper-input#~0.5.2", - "paper-toggle-button": "Polymer/paper-toggle-button#~0.5.2" + "polymer": "Polymer/polymer#^1.0.5", + "prettify-element": "smokybob/prettify-element#1.0", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.1", + "iron-icons": "PolymerElements/iron-icons#^1.0.1", + "paper-input": "PolymerElements/paper-input#^1.0.0", + "paper-button": "PolymerElements/paper-button#^1.0.1", + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.1" } } diff --git a/index.html b/index.html index 468f0b8..c215c5e 100644 --- a/index.html +++ b/index.html @@ -2,31 +2,33 @@ PrettyCode - + + - - - + - + - - + + - - diff --git a/main.js b/main.js index db586fe..bf072cc 100644 --- a/main.js +++ b/main.js @@ -10,26 +10,16 @@ chrome.storage.sync.get( mainContent.theme = localStorage.theme || 'light'; mainContent.fontPt = localStorage.fontPt || 14; }); -mainContent.addEventListener('template-bound', function() { +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.$.codeValue = 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(); - }); - //Find the label of the selected language to set it on the paper-dropdown-menu - var mnItems = document.querySelectorAll('paper-item'); + /*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 @@ -37,10 +27,10 @@ mainContent.addEventListener('template-bound', function() { 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(); @@ -49,13 +39,33 @@ mainContent.addEventListener('template-bound', function() { mainContent.validateForSlides(); }); +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(); + +}; + var setThemeAndLang = function() { //Change the classes on the prettyprint element accordingly - document.body.className = 'theme-' + mainContent.theme; + var tmpTheme = mainContent.theme || 'light'; + + document.body.className = 'theme-' + tmpTheme; - mainContent.$.taCode.className = 'theme-' + mainContent.theme; + //mainContent.$.taCode.className = 'theme-' + mainContent.theme; - mainContent.$.destination.className = 'theme-' + mainContent.theme; + mainContent.$.destination.className = 'flex theme-' + tmpTheme; + Polymer.updateStyles(); //Change the language class if needed /*if (mainContent.lang != '--') { @@ -97,62 +107,68 @@ 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; + mainContent.$.agTa.style.fontSize = mainContent.fontPx; //Text Area - mainContent.$.taCode.style.fontSize = fontPx; + //mainContent.$.taCode.style.fontSize = fontPx; + //Pre Element - var preElement = mainContent.$.destination.shadowRoot.querySelector('pre'); - preElement.style.fontSize = fontPx; + if (mainContent.$.destination.shadowRoot) { + var preElement = mainContent.$.destination.shadowRoot.querySelector('pre'); + preElement.style.fontSize = mainContent.fontPx; + Polymer.updateStyles(); + } }; 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); - + //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); + } }; 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.'); - } - - 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 (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'; } - } - if (warn.length > 0) { - divW.innerHTML = warn.join('
'); - }else { - divW.innerHTML = 'Perfect code for slides'; } }; 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 From dc748ed6058e591c24d4e8f7d2acd421edabd4cb Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 00:46:59 +0200 Subject: [PATCH 05/10] added fixed color style --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 34d38b8..3d320da 100644 --- a/bower.json +++ b/bower.json @@ -12,6 +12,7 @@ "iron-icons": "PolymerElements/iron-icons#^1.0.1", "paper-input": "PolymerElements/paper-input#^1.0.0", "paper-button": "PolymerElements/paper-button#^1.0.1", - "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.1" + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.1", + "iron-autogrow-textarea": "SmokyBob/iron-autogrow-textarea#inherit-color" } } From e754f0c380477c66fc7e5f8c96555cb75bee7f50 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 00:49:26 +0200 Subject: [PATCH 06/10] added missing styles and small style fixes --- styles.html | 49 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/styles.html b/styles.html index ef4095f..b5c73aa 100644 --- a/styles.html +++ b/styles.html @@ -5,31 +5,52 @@ -webkit-font-smoothing: antialiased; } - body.theme-light { - background-color: #e8e8e8; - color: #000; - } - - body.theme-dark { + #mainDiv.theme-dark { background-color: #222; color: #fff; } - paper-autogrow-textarea{ + #mainDiv.theme-light { + background-color: #e8e8e8; + color: #000; + } + + paper-textarea { width: 100%; min-height: 90px; + max-height: 50%; + font-family: Inconsolata; font-size: 20px;/*= 15pt, more info http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/*/ } + paper-input.theme-dark { + --paper-input-container-input-color: #fff; + } + + paper-input.theme-light { + --paper-input-container-input-color: #000; + } + + paper-textarea.theme-dark { + background-color: #300; + --paper-input-container-input-color: #fff; + } + + paper-textarea.theme-light { + background-color: #ffcccc; + --paper-input-container-input-color: #000; + } + #slidesWarnings { - background-color: #f00; - color: #fff; - padding: 20px; - font-family: Inconsolata; - font-weight: bold; - border-radius: 6px; - } + background-color: #f00; + color: #fff; + padding: 20px; + font-family: Inconsolata; + font-weight: bold; + border-radius: 6px; + } + prettify-element { --prettify-pre: { font-family: Inconsolata; From b2bd646c81064de57ba05f3e176119acd1c1f797 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 00:50:12 +0200 Subject: [PATCH 07/10] use computedProperties to calculate classes and partially cleaned up the JS code --- index.html | 10 ++++++---- main.js | 47 +++++++++++++++++++++-------------------------- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 4b99093..48feeca 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ diff --git a/main.js b/main.js index bf072cc..5bf5977 100644 --- a/main.js +++ b/main.js @@ -10,6 +10,7 @@ chrome.storage.sync.get( mainContent.theme = localStorage.theme || 'light'; mainContent.fontPt = localStorage.fontPt || 14; }); + mainContent.addEventListener('dom-change', function() { //Set the font-size mainContent.ptChange({detail: mainContent.fontPt}); @@ -32,14 +33,27 @@ mainContent.addEventListener('dom-change', function() { //Select the theme on the slider //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(); }); -mainContent._selTheme = function(theme){ +//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'); @@ -56,23 +70,6 @@ mainContent.codeChanged = function(newVal) { }; -var setThemeAndLang = function() { - //Change the classes on the prettyprint element accordingly - var tmpTheme = mainContent.theme || 'light'; - - document.body.className = 'theme-' + tmpTheme; - - //mainContent.$.taCode.className = 'theme-' + mainContent.theme; - - mainContent.$.destination.className = 'flex theme-' + tmpTheme; - Polymer.updateStyles(); - - //Change the language class if needed - /*if (mainContent.lang != '--') { - mainContent.$.destination.className += ' lang-' + mainContent.lang; - }*/ -}; - mainContent.languageSelected = function(selMenu) { //Changed selected language, update the value and store if (selMenu.detail.isSelected) { @@ -82,7 +79,7 @@ mainContent.languageSelected = function(selMenu) { }); //Set the theme and lang - setThemeAndLang(); + Polymer.updateStyles(); } }; @@ -98,8 +95,8 @@ mainContent.chTheme = function() { //Nothing to do }); - //Set the theme and lang - setThemeAndLang(); + //Update styles + Polymer.updateStyles(); }; @@ -118,15 +115,13 @@ mainContent.ptChange = function(newVal) { //AutoGrow Text Area mainContent.$.agTa.style.fontSize = mainContent.fontPx; - //Text Area - //mainContent.$.taCode.style.fontSize = fontPx; //Pre Element if (mainContent.$.destination.shadowRoot) { var preElement = mainContent.$.destination.shadowRoot.querySelector('pre'); preElement.style.fontSize = mainContent.fontPx; - Polymer.updateStyles(); } + Polymer.updateStyles(); }; From 6ce9128e72573c2e1632e67174381967df78dd85 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 01:25:30 +0200 Subject: [PATCH 08/10] fix fontSize change --- index.html | 3 +-- main.js | 4 +++- styles.html | 22 ++++++++++++---------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 48feeca..db1bfa5 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,7 @@ text="{{code}}" language="{{language}}" on-tap="selPrettyCode" - class$="[[_computedDestinationClass(theme)]]" - style="overflow:auto"> + class$="[[_computedDestinationClass(theme)]]"> diff --git a/main.js b/main.js index 5bf5977..2ea0057 100644 --- a/main.js +++ b/main.js @@ -114,7 +114,9 @@ mainContent.ptChange = function(newVal) { mainContent.fontPx = ptToPx(newVal.detail.value) + 'px'; //AutoGrow Text Area - mainContent.$.agTa.style.fontSize = mainContent.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 if (mainContent.$.destination.shadowRoot) { diff --git a/styles.html b/styles.html index b5c73aa..a752d04 100644 --- a/styles.html +++ b/styles.html @@ -15,15 +15,6 @@ color: #000; } - paper-textarea { - width: 100%; - min-height: 90px; - max-height: 50%; - - font-family: Inconsolata; - font-size: 20px;/*= 15pt, more info http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/*/ - } - paper-input.theme-dark { --paper-input-container-input-color: #fff; } @@ -32,6 +23,16 @@ --paper-input-container-input-color: #000; } + paper-textarea { + width: auto; + min-height: 90px; + max-height: 50%; + --paper-input-container-input: { + font-family: Inconsolata; + font-size: 20px;/*= 15pt, more info http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/*/ + }; + } + paper-textarea.theme-dark { background-color: #300; --paper-input-container-input-color: #fff; @@ -52,7 +53,8 @@ } prettify-element { - --prettify-pre: { + overflow: auto; + --prettify-code-pre: { font-family: Inconsolata; font-size: 20px; background-color:transparent; From 6741d7e141a62e924e0e858216c78c3b8f8de1ab Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 20:18:31 +0200 Subject: [PATCH 09/10] bump version to 1.0 --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 5f3456c..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.9.0", + "version": "1.0.0", "icons": { "32": "assets/favicon_32.png", From 0d667bac266eb840a0739e178db7324e4672cad1 Mon Sep 17 00:00:00 2001 From: Mauro Solcia Date: Wed, 1 Jul 2015 20:29:38 +0200 Subject: [PATCH 10/10] small fix --- styles.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.html b/styles.html index a752d04..3e30865 100644 --- a/styles.html +++ b/styles.html @@ -54,7 +54,7 @@ prettify-element { overflow: auto; - --prettify-code-pre: { + --prettify-pre: { font-family: Inconsolata; font-size: 20px; background-color:transparent;