diff --git a/components/pagerating/coverage/base.css b/components/pagerating/coverage/base.css new file mode 100644 index 00000000..f418035b --- /dev/null +++ b/components/pagerating/coverage/base.css @@ -0,0 +1,224 @@ +body, html { + margin:0; padding: 0; + height: 100%; +} +body { + font-family: Helvetica Neue, Helvetica, Arial; + font-size: 14px; + color:#333; +} +.small { font-size: 12px; } +*, *:after, *:before { + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + } +h1 { font-size: 20px; margin: 0;} +h2 { font-size: 14px; } +pre { + font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; + margin: 0; + padding: 0; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; +} +a { color:#0074D9; text-decoration:none; } +a:hover { text-decoration:underline; } +.strong { font-weight: bold; } +.space-top1 { padding: 10px 0 0 0; } +.pad2y { padding: 20px 0; } +.pad1y { padding: 10px 0; } +.pad2x { padding: 0 20px; } +.pad2 { padding: 20px; } +.pad1 { padding: 10px; } +.space-left2 { padding-left:55px; } +.space-right2 { padding-right:20px; } +.center { text-align:center; } +.clearfix { display:block; } +.clearfix:after { + content:''; + display:block; + height:0; + clear:both; + visibility:hidden; + } +.fl { float: left; } +@media only screen and (max-width:640px) { + .col3 { width:100%; max-width:100%; } + .hide-mobile { display:none!important; } +} + +.quiet { + color: #7f7f7f; + color: rgba(0,0,0,0.5); +} +.quiet a { opacity: 0.7; } + +.fraction { + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + font-size: 10px; + color: #555; + background: #E8E8E8; + padding: 4px 5px; + border-radius: 3px; + vertical-align: middle; +} + +div.path a:link, div.path a:visited { color: #333; } +table.coverage { + border-collapse: collapse; + margin: 10px 0 0 0; + padding: 0; +} + +table.coverage td { + margin: 0; + padding: 0; + vertical-align: top; +} +table.coverage td.line-count { + text-align: right; + padding: 0 5px 0 20px; +} +table.coverage td.line-coverage { + text-align: right; + padding-right: 10px; + min-width:20px; +} + +table.coverage td span.cline-any { + display: inline-block; + padding: 0 5px; + width: 100%; +} +.missing-if-branch { + display: inline-block; + margin-right: 5px; + border-radius: 3px; + position: relative; + padding: 0 4px; + background: #333; + color: yellow; +} + +.skip-if-branch { + display: none; + margin-right: 10px; + position: relative; + padding: 0 4px; + background: #ccc; + color: white; +} +.missing-if-branch .typ, .skip-if-branch .typ { + color: inherit !important; +} +.coverage-summary { + border-collapse: collapse; + width: 100%; +} +.coverage-summary tr { border-bottom: 1px solid #bbb; } +.keyline-all { border: 1px solid #ddd; } +.coverage-summary td, .coverage-summary th { padding: 10px; } +.coverage-summary tbody { border: 1px solid #bbb; } +.coverage-summary td { border-right: 1px solid #bbb; } +.coverage-summary td:last-child { border-right: none; } +.coverage-summary th { + text-align: left; + font-weight: normal; + white-space: nowrap; +} +.coverage-summary th.file { border-right: none !important; } +.coverage-summary th.pct { } +.coverage-summary th.pic, +.coverage-summary th.abs, +.coverage-summary td.pct, +.coverage-summary td.abs { text-align: right; } +.coverage-summary td.file { white-space: nowrap; } +.coverage-summary td.pic { min-width: 120px !important; } +.coverage-summary tfoot td { } + +.coverage-summary .sorter { + height: 10px; + width: 7px; + display: inline-block; + margin-left: 0.5em; + background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; +} +.coverage-summary .sorted .sorter { + background-position: 0 -20px; +} +.coverage-summary .sorted-desc .sorter { + background-position: 0 -10px; +} +.status-line { height: 10px; } +/* yellow */ +.cbranch-no { background: yellow !important; color: #111; } +/* dark red */ +.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } +.low .chart { border:1px solid #C21F39 } +.highlighted, +.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{ + background: #C21F39 !important; +} +/* medium red */ +.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } +/* light red */ +.low, .cline-no { background:#FCE1E5 } +/* light green */ +.high, .cline-yes { background:rgb(230,245,208) } +/* medium green */ +.cstat-yes { background:rgb(161,215,106) } +/* dark green */ +.status-line.high, .high .cover-fill { background:rgb(77,146,33) } +.high .chart { border:1px solid rgb(77,146,33) } +/* dark yellow (gold) */ +.status-line.medium, .medium .cover-fill { background: #f9cd0b; } +.medium .chart { border:1px solid #f9cd0b; } +/* light yellow */ +.medium { background: #fff4c2; } + +.cstat-skip { background: #ddd; color: #111; } +.fstat-skip { background: #ddd; color: #111 !important; } +.cbranch-skip { background: #ddd !important; color: #111; } + +span.cline-neutral { background: #eaeaea; } + +.coverage-summary td.empty { + opacity: .5; + padding-top: 4px; + padding-bottom: 4px; + line-height: 1; + color: #888; +} + +.cover-fill, .cover-empty { + display:inline-block; + height: 12px; +} +.chart { + line-height: 0; +} +.cover-empty { + background: white; +} +.cover-full { + border-right: none !important; +} +pre.prettyprint { + border: none !important; + padding: 0 !important; + margin: 0 !important; +} +.com { color: #999 !important; } +.ignore-none { color: #999; font-weight: normal; } + +.wrapper { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -48px; +} +.footer, .push { + height: 48px; +} diff --git a/components/pagerating/coverage/block-navigation.js b/components/pagerating/coverage/block-navigation.js new file mode 100644 index 00000000..c7ff5a5c --- /dev/null +++ b/components/pagerating/coverage/block-navigation.js @@ -0,0 +1,79 @@ +/* eslint-disable */ +var jumpToCode = (function init() { + // Classes of code we would like to highlight in the file view + var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no']; + + // Elements to highlight in the file listing view + var fileListingElements = ['td.pct.low']; + + // We don't want to select elements that are direct descendants of another match + var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > ` + + // Selecter that finds elements on the page to which we can jump + var selector = + fileListingElements.join(', ') + + ', ' + + notSelector + + missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b` + + // The NodeList of matching elements + var missingCoverageElements = document.querySelectorAll(selector); + + var currentIndex; + + function toggleClass(index) { + missingCoverageElements + .item(currentIndex) + .classList.remove('highlighted'); + missingCoverageElements.item(index).classList.add('highlighted'); + } + + function makeCurrent(index) { + toggleClass(index); + currentIndex = index; + missingCoverageElements.item(index).scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'center' + }); + } + + function goToPrevious() { + var nextIndex = 0; + if (typeof currentIndex !== 'number' || currentIndex === 0) { + nextIndex = missingCoverageElements.length - 1; + } else if (missingCoverageElements.length > 1) { + nextIndex = currentIndex - 1; + } + + makeCurrent(nextIndex); + } + + function goToNext() { + var nextIndex = 0; + + if ( + typeof currentIndex === 'number' && + currentIndex < missingCoverageElements.length - 1 + ) { + nextIndex = currentIndex + 1; + } + + makeCurrent(nextIndex); + } + + return function jump(event) { + switch (event.which) { + case 78: // n + case 74: // j + goToNext(); + break; + case 66: // b + case 75: // k + case 80: // p + goToPrevious(); + break; + } + }; +})(); +window.addEventListener('keydown', jumpToCode); diff --git a/components/pagerating/coverage/index.html b/components/pagerating/coverage/index.html new file mode 100644 index 00000000..cdb95b25 --- /dev/null +++ b/components/pagerating/coverage/index.html @@ -0,0 +1,125 @@ + + + + +
++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
---|---|---|---|---|---|---|---|---|---|
index.js | +
+
+ |
+ 42% | +21/50 | +36.36% | +8/22 | +20% | +2/10 | +42% | +21/50 | +
template.js | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 | + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + +1x +1x + + +1x +1x + + + + + + +1x + + + + +1x + + + + + + + +1x + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x | import ratingsTemplate from './template.js' + +class CWDSPageRating extends window.HTMLElement { + connectedCallback () { + let question = (this.dataset.question ? this.dataset.question : 'Is this page useful?'); + let yes = (this.dataset.yes ? this.dataset.yes : 'Yes'); + let no = (this.dataset.no ? this.dataset.no : 'No'); + let commentPrompt = (this.dataset.commentPrompt ? this.dataset.commentPrompt : 'Additional comments:'); + let thanksFeedback = (this.dataset.thanksFeedback ? this.dataset.thanksFeedback : 'Thank you for your feedback!'); + let thanksComments = (this.dataset.thanksComments ? this.dataset.thanksComments : 'Thank you for your comments!'); + let submit = (this.dataset.submit ? this.dataset.submit : 'Submit'); + let requiredField = (this.dataset.requiredField ? this.dataset.requiredField : 'This field is required'); + this.endpointUrl = this.dataset.endpointUrl; + let html = ratingsTemplate(question, yes, no, commentPrompt, thanksFeedback, thanksComments, submit, requiredField); + this.innerHTML = html; + this.applyListeners(); + } + + applyListeners() { + this.wasHelpful = ''; + this.querySelector('.js-add-feedback').addEventListener('focus', (event) => { + this.querySelector('.js-feedback-submit').style.display = 'block'; + }); + let feedback = this.querySelector(".js-add-feedback"); + feedback.addEventListener('keyup', function (event) { + if(feedback.value.length > 15) { + feedback.setAttribute('rows', '2'); + } else { + feedback.setAttribute('rows', '1'); + } + }); + feedback.addEventListener('blur', (event) => { + if(feedback.value.length !== 0) { + this.querySelector('.js-feedback-submit').style.display = 'block'; + } + }); + this.querySelector('.js-feedback-yes').addEventListener('click', (event) => { + this.querySelector('.js-feedback-form').style.display = 'none'; + this.querySelector('.js-feedback-thanks').style.display = 'block'; + this.wasHelpful = 'yes'; + this.dispatchEvent(new CustomEvent("ratedPage", { + detail: this.wasHelpful + })); + }); + this.querySelector('.js-feedback-no').addEventListener('click', (event) => { + this.querySelector('.js-feedback-form').style.display = 'none'; + this.querySelector('.js-feedback-thanks').style.display = 'block'; + this.wasHelpful = 'no'; + this.dispatchEvent(new CustomEvent("ratedPage", { + detail: this.wasHelpful + })); + }); + this.querySelector('.js-feedback-submit').addEventListener('click', (event) => { + if(feedback.value.length !== 0) { + this.querySelector('.feedback-form-add').style.display = 'none'; + this.querySelector('.feedback-thanks-add').style.display = 'block'; + this.querySelector('.feedback-error').removeAttribute("style"); + + let postData = {}; + postData.url = window.location.href; + postData.helpful = this.wasHelpful; + postData.comments = feedback.value; + postData.userAgent = navigator.userAgent; + console.log(this.endpointUrl) + console.log(postData) + + fetch(this.endpointUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(postData) + }) + .then(response => response.json()) + .then(data => console.log(data)); + + } else { + this.querySelector('.feedback-error').style.display = 'block'; + } + }); + + } +} +window.customElements.define('cwds-pagerating', CWDSPageRating); |