How to use highlight method in Playwright Internal

Best JavaScript code snippet using playwright-internal

plugin.js

Source:plugin.js Github

copy

Full Screen

1import hljs from 'highlight.js'2/* highlightjs-line-numbers.js 2.6.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */3/* Edited by Hakim for reveal.js; removed async timeout */4!function(n,e){"use strict";function t(){var n=e.createElement("style");n.type="text/css",n.innerHTML=g(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[v,L,b]),e.getElementsByTagName("head")[0].appendChild(n)}function r(t){"interactive"===e.readyState||"complete"===e.readyState?i(t):n.addEventListener("DOMContentLoaded",function(){i(t)})}function i(t){try{var r=e.querySelectorAll("code.hljs,code.nohighlight");for(var i in r)r.hasOwnProperty(i)&&l(r[i],t)}catch(o){n.console.error("LineNumbers error: ",o)}}function l(n,e){"object"==typeof n&&f(function(){n.innerHTML=s(n,e)})}function o(n,e){if("string"==typeof n){var t=document.createElement("code");return t.innerHTML=n,s(t,e)}}function s(n,e){e=e||{singleLine:!1};var t=e.singleLine?0:1;return c(n),a(n.innerHTML,t)}function a(n,e){var t=u(n);if(""===t[t.length-1].trim()&&t.pop(),t.length>e){for(var r="",i=0,l=t.length;i<l;i++)r+=g('<tr><td class="{0}"><div class="{1} {2}" {3}="{5}"></div></td><td class="{4}"><div class="{1}">{6}</div></td></tr>',[j,m,L,b,p,i+1,t[i].length>0?t[i]:" "]);return g('<table class="{0}">{1}</table>',[v,r])}return n}function c(n){var e=n.childNodes;for(var t in e)if(e.hasOwnProperty(t)){var r=e[t];h(r.textContent)>0&&(r.childNodes.length>0?c(r):d(r.parentNode))}}function d(n){var e=n.className;if(/hljs-/.test(e)){for(var t=u(n.innerHTML),r=0,i="";r<t.length;r++){var l=t[r].length>0?t[r]:" ";i+=g('<span class="{0}">{1}</span>\n',[e,l])}n.innerHTML=i.trim()}}function u(n){return 0===n.length?[]:n.split(y)}function h(n){return(n.trim().match(y)||[]).length}function f(e){e()}function g(n,e){return n.replace(/\{(\d+)\}/g,function(n,t){return e[t]?e[t]:n})}var v="hljs-ln",m="hljs-ln-line",p="hljs-ln-code",j="hljs-ln-numbers",L="hljs-ln-n",b="data-line-number",y=/\r\n|\r|\n/g;hljs?(hljs.initLineNumbersOnLoad=r,hljs.lineNumbersBlock=l,hljs.lineNumbersValue=o,t()):n.console.error("highlight.js not detected!")}(window,document);5/*!6 * reveal.js plugin that adds syntax highlight support.7 */8const Plugin = {9 id: 'highlight',10 HIGHLIGHT_STEP_DELIMITER: '|',11 HIGHLIGHT_LINE_DELIMITER: ',',12 HIGHLIGHT_LINE_RANGE_DELIMITER: '-',13 hljs: hljs,14 /**15 * Highlights code blocks withing the given deck.16 *17 * Note that this can be called multiple times if18 * there are multiple presentations on one page.19 *20 * @param {Reveal} reveal the reveal.js instance21 */22 init: function( reveal ) {23 // Read the plugin config options and provide fallbacks24 var config = reveal.getConfig().highlight || {};25 config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;26 config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;27 [].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {28 // Trim whitespace if the "data-trim" attribute is present29 if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {30 block.innerHTML = betterTrim( block );31 }32 // Escape HTML tags unless the "data-noescape" attrbute is present33 if( config.escapeHTML && !block.hasAttribute( 'data-noescape' )) {34 block.innerHTML = block.innerHTML.replace( /</g,"&lt;").replace(/>/g, '&gt;' );35 }36 // Re-highlight when focus is lost (for contenteditable code)37 block.addEventListener( 'focusout', function( event ) {38 hljs.highlightBlock( event.currentTarget );39 }, false );40 if( config.highlightOnLoad ) {41 Plugin.highlightBlock( block );42 }43 } );44 // If we're printing to PDF, scroll the code highlights of45 // all blocks in the deck into view at once46 reveal.on( 'pdf-ready', function() {47 [].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {48 Plugin.scrollHighlightedLineIntoView( block, {}, true );49 } );50 } );51 },52 /**53 * Highlights a code block. If the <code> node has the54 * 'data-line-numbers' attribute we also generate slide55 * numbers.56 *57 * If the block contains multiple line highlight steps,58 * we clone the block and create a fragment for each step.59 */60 highlightBlock: function( block ) {61 hljs.highlightBlock( block );62 // Don't generate line numbers for empty code blocks63 if( block.innerHTML.trim().length === 0 ) return;64 if( block.hasAttribute( 'data-line-numbers' ) ) {65 hljs.lineNumbersBlock( block, { singleLine: true } );66 var scrollState = { currentBlock: block };67 // If there is at least one highlight step, generate68 // fragments69 var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );70 if( highlightSteps.length > 1 ) {71 // If the original code block has a fragment-index,72 // each clone should follow in an incremental sequence73 var fragmentIndex = parseInt( block.getAttribute( 'data-fragment-index' ), 10 );74 if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {75 fragmentIndex = null;76 }77 // Generate fragments for all steps except the original block78 highlightSteps.slice(1).forEach( function( highlight ) {79 var fragmentBlock = block.cloneNode( true );80 fragmentBlock.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlight ] ) );81 fragmentBlock.classList.add( 'fragment' );82 block.parentNode.appendChild( fragmentBlock );83 Plugin.highlightLines( fragmentBlock );84 if( typeof fragmentIndex === 'number' ) {85 fragmentBlock.setAttribute( 'data-fragment-index', fragmentIndex );86 fragmentIndex += 1;87 }88 else {89 fragmentBlock.removeAttribute( 'data-fragment-index' );90 }91 // Scroll highlights into view as we step through them92 fragmentBlock.addEventListener( 'visible', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );93 fragmentBlock.addEventListener( 'hidden', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );94 } );95 block.removeAttribute( 'data-fragment-index' )96 block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );97 }98 // Scroll the first highlight into view when the slide99 // becomes visible. Note supported in IE11 since it lacks100 // support for Element.closest.101 var slide = typeof block.closest === 'function' ? block.closest( 'section:not(.stack)' ) : null;102 if( slide ) {103 var scrollFirstHighlightIntoView = function() {104 Plugin.scrollHighlightedLineIntoView( block, scrollState, true );105 slide.removeEventListener( 'visible', scrollFirstHighlightIntoView );106 }107 slide.addEventListener( 'visible', scrollFirstHighlightIntoView );108 }109 Plugin.highlightLines( block );110 }111 },112 /**113 * Animates scrolling to the first highlighted line114 * in the given code block.115 */116 scrollHighlightedLineIntoView: function( block, scrollState, skipAnimation ) {117 cancelAnimationFrame( scrollState.animationFrameID );118 // Match the scroll position of the currently visible119 // code block120 if( scrollState.currentBlock ) {121 block.scrollTop = scrollState.currentBlock.scrollTop;122 }123 // Remember the current code block so that we can match124 // its scroll position when showing/hiding fragments125 scrollState.currentBlock = block;126 var highlightBounds = this.getHighlightedLineBounds( block )127 var viewportHeight = block.offsetHeight;128 // Subtract padding from the viewport height129 var blockStyles = getComputedStyle( block );130 viewportHeight -= parseInt( blockStyles.paddingTop ) + parseInt( blockStyles.paddingBottom );131 // Scroll position which centers all highlights132 var startTop = block.scrollTop;133 var targetTop = highlightBounds.top + ( Math.min( highlightBounds.bottom - highlightBounds.top, viewportHeight ) - viewportHeight ) / 2;134 // Account for offsets in position applied to the135 // <table> that holds our lines of code136 var lineTable = block.querySelector( '.hljs-ln' );137 if( lineTable ) targetTop += lineTable.offsetTop - parseInt( blockStyles.paddingTop );138 // Make sure the scroll target is within bounds139 targetTop = Math.max( Math.min( targetTop, block.scrollHeight - viewportHeight ), 0 );140 if( skipAnimation === true || startTop === targetTop ) {141 block.scrollTop = targetTop;142 }143 else {144 // Don't attempt to scroll if there is no overflow145 if( block.scrollHeight <= viewportHeight ) return;146 var time = 0;147 var animate = function() {148 time = Math.min( time + 0.02, 1 );149 // Update our eased scroll position150 block.scrollTop = startTop + ( targetTop - startTop ) * Plugin.easeInOutQuart( time );151 // Keep animating unless we've reached the end152 if( time < 1 ) {153 scrollState.animationFrameID = requestAnimationFrame( animate );154 }155 };156 animate();157 }158 },159 /**160 * The easing function used when scrolling.161 */162 easeInOutQuart: function( t ) {163 // easeInOutQuart164 return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;165 },166 getHighlightedLineBounds: function( block ) {167 var highlightedLines = block.querySelectorAll( '.highlight-line' );168 if( highlightedLines.length === 0 ) {169 return { top: 0, bottom: 0 };170 }171 else {172 var firstHighlight = highlightedLines[0];173 var lastHighlight = highlightedLines[ highlightedLines.length -1 ];174 return {175 top: firstHighlight.offsetTop,176 bottom: lastHighlight.offsetTop + lastHighlight.offsetHeight177 }178 }179 },180 /**181 * Visually emphasize specific lines within a code block.182 * This only works on blocks with line numbering turned on.183 *184 * @param {HTMLElement} block a <code> block185 * @param {String} [linesToHighlight] The lines that should be186 * highlighted in this format:187 * "1" = highlights line 1188 * "2,5" = highlights lines 2 & 5189 * "2,5-7" = highlights lines 2, 5, 6 & 7190 */191 highlightLines: function( block, linesToHighlight ) {192 var highlightSteps = Plugin.deserializeHighlightSteps( linesToHighlight || block.getAttribute( 'data-line-numbers' ) );193 if( highlightSteps.length ) {194 highlightSteps[0].forEach( function( highlight ) {195 var elementsToHighlight = [];196 // Highlight a range197 if( typeof highlight.end === 'number' ) {198 elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child(n+'+highlight.start+'):nth-child(-n+'+highlight.end+')' ) );199 }200 // Highlight a single line201 else if( typeof highlight.start === 'number' ) {202 elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child('+highlight.start+')' ) );203 }204 if( elementsToHighlight.length ) {205 elementsToHighlight.forEach( function( lineElement ) {206 lineElement.classList.add( 'highlight-line' );207 } );208 block.classList.add( 'has-highlights' );209 }210 } );211 }212 },213 /**214 * Parses and formats a user-defined string of line215 * numbers to highlight.216 *217 * @example218 * Plugin.deserializeHighlightSteps( '1,2|3,5-10' )219 * // [220 * // [ { start: 1 }, { start: 2 } ],221 * // [ { start: 3 }, { start: 5, end: 10 } ]222 * // ]223 */224 deserializeHighlightSteps: function( highlightSteps ) {225 // Remove whitespace226 highlightSteps = highlightSteps.replace( /\s/g, '' );227 // Divide up our line number groups228 highlightSteps = highlightSteps.split( Plugin.HIGHLIGHT_STEP_DELIMITER );229 return highlightSteps.map( function( highlights ) {230 return highlights.split( Plugin.HIGHLIGHT_LINE_DELIMITER ).map( function( highlight ) {231 // Parse valid line numbers232 if( /^[\d-]+$/.test( highlight ) ) {233 highlight = highlight.split( Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER );234 var lineStart = parseInt( highlight[0], 10 ),235 lineEnd = parseInt( highlight[1], 10 );236 if( isNaN( lineEnd ) ) {237 return {238 start: lineStart239 };240 }241 else {242 return {243 start: lineStart,244 end: lineEnd245 };246 }247 }248 // If no line numbers are provided, no code will be highlighted249 else {250 return {};251 }252 } );253 } );254 },255 /**256 * Serializes parsed line number data into a string so257 * that we can store it in the DOM.258 */259 serializeHighlightSteps: function( highlightSteps ) {260 return highlightSteps.map( function( highlights ) {261 return highlights.map( function( highlight ) {262 // Line range263 if( typeof highlight.end === 'number' ) {264 return highlight.start + Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER + highlight.end;265 }266 // Single line267 else if( typeof highlight.start === 'number' ) {268 return highlight.start;269 }270 // All lines271 else {272 return '';273 }274 } ).join( Plugin.HIGHLIGHT_LINE_DELIMITER );275 } ).join( Plugin.HIGHLIGHT_STEP_DELIMITER );276 }277}278// Function to perform a better "data-trim" on code snippets279// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)280function betterTrim(snippetEl) {281 // Helper functions282 function trimLeft(val) {283 // Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill284 return val.replace(/^[\s\uFEFF\xA0]+/g, '');285 }286 function trimLineBreaks(input) {287 var lines = input.split('\n');288 // Trim line-breaks from the beginning289 for (var i = 0; i < lines.length; i++) {290 if (lines[i].trim() === '') {291 lines.splice(i--, 1);292 } else break;293 }294 // Trim line-breaks from the end295 for (var i = lines.length-1; i >= 0; i--) {296 if (lines[i].trim() === '') {297 lines.splice(i, 1);298 } else break;299 }300 return lines.join('\n');301 }302 // Main function for betterTrim()303 return (function(snippetEl) {304 var content = trimLineBreaks(snippetEl.innerHTML);305 var lines = content.split('\n');306 // Calculate the minimum amount to remove on each line start of the snippet (can be 0)307 var pad = lines.reduce(function(acc, line) {308 if (line.length > 0 && trimLeft(line).length > 0 && acc > line.length - trimLeft(line).length) {309 return line.length - trimLeft(line).length;310 }311 return acc;312 }, Number.POSITIVE_INFINITY);313 // Slice each line with this amount314 return lines.map(function(line, index) {315 return line.slice(pad);316 })317 .join('\n');318 })(snippetEl);319}...

Full Screen

Full Screen

highlight.js

Source:highlight.js Github

copy

Full Screen

...136 highlight.shape.setOptions(highlight.opts);137 // we can use this if we don't care about other options changing : highlight.shape.setRadius(highlight.opts.radiusInMeters)138 }139 else {140 highlight.shape = Drupal.gmap.factory.highlight(jQuery.extend({}, highlight.opts, {radius: highlight.opts.radiusInMeters})); // only pass radiusinmeters to g.m.circle. We keep the pixel radius in case we need to calculate again after a zoom141 }142 };143 highlightOverlay.prototype.activateHighlight = function (highlight) {144 if (!highlight.shape) {145 this.configHighlight(highlight);146 this.calculateHighlight(highlight);147 }148 highlight.shape.setMap(this.map);149 };150 highlightOverlay.prototype.deactivateHighlight = function (highlight) {151 if (highlight.shape) {152 highlight.shape.setMap(null);153 }154 };...

Full Screen

Full Screen

chart-js.demo.js

Source:chart-js.demo.js Github

copy

Full Screen

1/* 2Template Name: Color Admin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.53Version: 1.9.04Author: Sean Ngu5Website: http://www.seantheme.com/color-admin-v1.9/admin/6*/78// white9var white = 'rgba(255,255,255,1.0)';10var fillBlack = 'rgba(45, 53, 60, 0.6)';11var fillBlackLight = 'rgba(45, 53, 60, 0.2)';12var strokeBlack = 'rgba(45, 53, 60, 0.8)';13var highlightFillBlack = 'rgba(45, 53, 60, 0.8)';14var highlightStrokeBlack = 'rgba(45, 53, 60, 1)';1516// blue17var fillBlue = 'rgba(52, 143, 226, 0.6)';18var fillBlueLight = 'rgba(52, 143, 226, 0.2)';19var strokeBlue = 'rgba(52, 143, 226, 0.8)';20var highlightFillBlue = 'rgba(52, 143, 226, 0.8)';21var highlightStrokeBlue = 'rgba(52, 143, 226, 1)';2223// grey24var fillGrey = 'rgba(182, 194, 201, 0.6)';25var fillGreyLight = 'rgba(182, 194, 201, 0.2)';26var strokeGrey = 'rgba(182, 194, 201, 0.8)';27var highlightFillGrey = 'rgba(182, 194, 201, 0.8)';28var highlightStrokeGrey = 'rgba(182, 194, 201, 1)';2930// green31var fillGreen = 'rgba(0, 172, 172, 0.6)';32var fillGreenLight = 'rgba(0, 172, 172, 0.2)';33var strokeGreen = 'rgba(0, 172, 172, 0.8)';34var highlightFillGreen = 'rgba(0, 172, 172, 0.8)';35var highlightStrokeGreen = 'rgba(0, 172, 172, 1)';3637// purple38var fillPurple = 'rgba(114, 124, 182, 0.6)';39var fillPurpleLight = 'rgba(114, 124, 182, 0.2)';40var strokePurple = 'rgba(114, 124, 182, 0.8)';41var highlightFillPurple = 'rgba(114, 124, 182, 0.8)';42var highlightStrokePurple = 'rgba(114, 124, 182, 1)';434445var randomScalingFactor = function() { 46 return Math.round(Math.random()*100)47};4849var barChartData = {50 labels : ['January','February','March','April','May','June','July'],51 datasets : [52 {53 fillColor : fillBlackLight,54 strokeColor : strokeBlack,55 highlightFill: highlightFillBlack,56 highlightStroke: highlightStrokeBlack,57 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]58 },59 {60 fillColor : fillBlueLight,61 strokeColor : strokeBlue,62 highlightFill: highlightFillBlue,63 highlightStroke: highlightStrokeBlue,64 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]65 }66 ]67};6869var doughnutData = [70 {71 value: 300,72 color: fillGrey,73 highlight: highlightFillGrey,74 label: 'Grey'75 },76 {77 value: 50,78 color: fillGreen,79 highlight: highlightFillGreen,80 label: 'Green'81 },82 {83 value: 100,84 color: fillBlue,85 highlight: highlightFillBlue,86 label: 'Blue'87 },88 {89 value: 40,90 color: fillPurple,91 highlight: highlightFillPurple,92 label: 'Purple'93 },94 {95 value: 120,96 color: fillBlack,97 highlight: highlightFillBlack,98 label: 'Black'99 }100];101102var lineChartData = {103 labels : ['January','February','March','April','May','June','July'],104 datasets : [105 {106 label: 'My First dataset',107 fillColor : fillBlackLight,108 strokeColor : strokeBlack,109 pointColor : strokeBlack,110 pointStrokeColor : white,111 pointHighlightFill : white,112 pointHighlightStroke : strokeBlack,113 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]114 },115 {116 label: 'My Second dataset',117 fillColor : 'rgba(52,143,226,0.2)',118 strokeColor : 'rgba(52,143,226,1)',119 pointColor : 'rgba(52,143,226,1)',120 pointStrokeColor : '#fff',121 pointHighlightFill : '#fff',122 pointHighlightStroke : 'rgba(52,143,226,1)',123 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]124 }125 ]126};127128var pieData = [129 {130 value: 300,131 color: strokePurple,132 highlight: highlightStrokePurple,133 label: 'Purple'134 },135 {136 value: 50,137 color: strokeBlue,138 highlight: highlightStrokeBlue,139 label: 'Blue'140 },141 {142 value: 100,143 color: strokeGreen,144 highlight: highlightStrokeGreen,145 label: 'Green'146 },147 {148 value: 40,149 color: strokeGrey,150 highlight: highlightStrokeGrey,151 label: 'Grey'152 },153 {154 value: 120,155 color: strokeBlack,156 highlight: highlightStrokeBlack,157 label: 'Black'158 }159];160161var polarData = [162 {163 value: 300,164 color: strokePurple,165 highlight: highlightStrokePurple,166 label: 'Purple'167 },168 {169 value: 50,170 color: strokeBlue,171 highlight: highlightStrokeBlue,172 label: 'Blue'173 },174 {175 value: 100,176 color: strokeGreen,177 highlight: highlightStrokeGreen,178 label: 'Green'179 },180 {181 value: 40,182 color: strokeGrey,183 highlight: highlightStrokeGrey,184 label: 'Grey'185 },186 {187 value: 120,188 color: strokeBlack,189 highlight: highlightStrokeBlack,190 label: 'Black'191 }192];193194var radarChartData = {195 labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],196 datasets: [197 {198 label: 'My First dataset',199 fillColor: 'rgba(45,53,60,0.2)',200 strokeColor: 'rgba(45,53,60,1)',201 pointColor: 'rgba(45,53,60,1)',202 pointStrokeColor: '#fff',203 pointHighlightFill: '#fff',204 pointHighlightStroke: 'rgba(45,53,60,1)',205 data: [65,59,90,81,56,55,40]206 },207 {208 label: 'My Second dataset',209 fillColor: 'rgba(52,143,226,0.2)',210 strokeColor: 'rgba(52,143,226,1)',211 pointColor: 'rgba(52,143,226,1)',212 pointStrokeColor: '#fff',213 pointHighlightFill: '#fff',214 pointHighlightStroke: 'rgba(52,143,226,1)',215 data: [28,48,40,19,96,27,100]216 }217 ]218};219220221Chart.defaults.global = {222 animation: true,223 animationSteps: 60,224 animationEasing: 'easeOutQuart',225 showScale: true,226 scaleOverride: false,227 scaleSteps: null,228 scaleStepWidth: null,229 scaleStartValue: null,230 scaleLineColor: 'rgba(0,0,0,.1)',231 scaleLineWidth: 1,232 scaleShowLabels: true,233 scaleLabel: '<%=value%>',234 scaleIntegersOnly: true,235 scaleBeginAtZero: false,236 scaleFontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif',237 scaleFontSize: 12,238 scaleFontStyle: 'normal',239 scaleFontColor: '#707478',240 responsive: true,241 maintainAspectRatio: true,242 showTooltips: true,243 customTooltips: false,244 tooltipEvents: ['mousemove', 'touchstart', 'touchmove'],245 tooltipFillColor: 'rgba(0,0,0,0.8)',246 tooltipFontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif',247 tooltipFontSize: 12,248 tooltipFontStyle: 'normal',249 tooltipFontColor: '#ccc',250 tooltipTitleFontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif',251 tooltipTitleFontSize: 12,252 tooltipTitleFontStyle: 'bold',253 tooltipTitleFontColor: '#fff',254 tooltipYPadding: 10,255 tooltipXPadding: 10,256 tooltipCaretSize: 8,257 tooltipCornerRadius: 3,258 tooltipXOffset: 10,259 tooltipTemplate: '<%if (label){%><%=label%>: <%}%><%= value %>',260 multiTooltipTemplate: '<%= value %>',261 onAnimationProgress: function(){},262 onAnimationComplete: function(){}263}264265var handleGenerateGraph = function(animationOption) {266 var animationOption = (animationOption) ? animationOption : false;267 268 if (!animationOption) {269 $('[data-render="chart-js"]').each(function() {270 var targetId = $(this).attr('id');271 var targetContainer = $(this).closest('div');272 $(targetContainer).empty();273 $(targetContainer).append('<canvas id="'+ targetId +'"></canvas>');274 });275 }276 var ctx = document.getElementById('line-chart').getContext('2d');277 var lineChart = new Chart(ctx).Line(lineChartData, {278 animation: animationOption279 });280 281 var ctx2 = document.getElementById('bar-chart').getContext('2d');282 var barChart = new Chart(ctx2).Bar(barChartData, {283 animation: animationOption284 });285 286 var ctx3 = document.getElementById('radar-chart').getContext('2d');287 var radarChart = new Chart(ctx3).Radar(radarChartData, {288 animation: animationOption289 });290 291 var ctx4 = document.getElementById('polar-area-chart').getContext('2d');292 var polarAreaChart = new Chart(ctx4).PolarArea(polarData, {293 animation: animationOption294 });295 296 var ctx5 = document.getElementById('pie-chart').getContext('2d');297 window.myPie = new Chart(ctx5).Pie(pieData, {298 animation: animationOption299 });300 301 var ctx6 = document.getElementById('doughnut-chart').getContext('2d');302 window.myDoughnut = new Chart(ctx6).Doughnut(doughnutData, {303 animation: animationOption304 });305};306307308var handleChartJs = function() {309 handleGenerateGraph(true);310 311 $(window).resize( function() {312 handleGenerateGraph();313 });314};315316var ChartJs = function () {317 "use strict";318 return {319 //main function320 init: function () {321 handleChartJs();322 }323 }; ...

Full Screen

Full Screen

jquery.highlightText.test.js

Source:jquery.highlightText.test.js Github

copy

Full Screen

1( function ( $ ) {2 QUnit.module( 'jquery.highlightText', QUnit.newMwEnvironment() );3 QUnit.test( 'Check', function ( assert ) {4 var $fixture,5 cases = [6 {7 desc: 'Test 001',8 text: 'Blue Öyster Cult',9 highlight: 'Blue',10 expected: '<span class="highlight">Blue</span> Öyster Cult'11 },12 {13 desc: 'Test 002',14 text: 'Blue Öyster Cult',15 highlight: 'Blue ',16 expected: '<span class="highlight">Blue</span> Öyster Cult'17 },18 {19 desc: 'Test 003',20 text: 'Blue Öyster Cult',21 highlight: 'Blue Ö',22 expected: '<span class="highlight">Blue</span> <span class="highlight">Ö</span>yster Cult'23 },24 {25 desc: 'Test 004',26 text: 'Blue Öyster Cult',27 highlight: 'Blue Öy',28 expected: '<span class="highlight">Blue</span> <span class="highlight">Öy</span>ster Cult'29 },30 {31 desc: 'Test 005',32 text: 'Blue Öyster Cult',33 highlight: ' Blue',34 expected: '<span class="highlight">Blue</span> Öyster Cult'35 },36 {37 desc: 'Test 006',38 text: 'Blue Öyster Cult',39 highlight: ' Blue ',40 expected: '<span class="highlight">Blue</span> Öyster Cult'41 },42 {43 desc: 'Test 007',44 text: 'Blue Öyster Cult',45 highlight: ' Blue Ö',46 expected: '<span class="highlight">Blue</span> <span class="highlight">Ö</span>yster Cult'47 },48 {49 desc: 'Test 008',50 text: 'Blue Öyster Cult',51 highlight: ' Blue Öy',52 expected: '<span class="highlight">Blue</span> <span class="highlight">Öy</span>ster Cult'53 },54 {55 desc: 'Test 009: Highlighter broken on starting Umlaut?',56 text: 'Österreich',57 highlight: 'Österreich',58 expected: '<span class="highlight">Österreich</span>'59 },60 {61 desc: 'Test 010: Highlighter broken on starting Umlaut?',62 text: 'Österreich',63 highlight: 'Ö',64 expected: '<span class="highlight">Ö</span>sterreich'65 },66 {67 desc: 'Test 011: Highlighter broken on starting Umlaut?',68 text: 'Österreich',69 highlight: 'Öst',70 expected: '<span class="highlight">Öst</span>erreich'71 },72 {73 desc: 'Test 012: Highlighter broken on starting Umlaut?',74 text: 'Österreich',75 highlight: 'Oe',76 expected: 'Österreich'77 },78 {79 desc: 'Test 013: Highlighter broken on punctuation mark?',80 text: 'So good. To be there',81 highlight: 'good',82 expected: 'So <span class="highlight">good</span>. To be there'83 },84 {85 desc: 'Test 014: Highlighter broken on space?',86 text: 'So good. To be there',87 highlight: 'be',88 expected: 'So good. To <span class="highlight">be</span> there'89 },90 {91 desc: 'Test 015: Highlighter broken on space?',92 text: 'So good. To be there',93 highlight: ' be',94 expected: 'So good. To <span class="highlight">be</span> there'95 },96 {97 desc: 'Test 016: Highlighter broken on space?',98 text: 'So good. To be there',99 highlight: 'be ',100 expected: 'So good. To <span class="highlight">be</span> there'101 },102 {103 desc: 'Test 017: Highlighter broken on space?',104 text: 'So good. To be there',105 highlight: ' be ',106 expected: 'So good. To <span class="highlight">be</span> there'107 },108 {109 desc: 'Test 018: en de Highlighter broken on special character at the end?',110 text: 'So good. xbß',111 highlight: 'xbß',112 expected: 'So good. <span class="highlight">xbß</span>'113 },114 {115 desc: 'Test 019: en de Highlighter broken on special character at the end?',116 text: 'So good. xbß.',117 highlight: 'xbß.',118 expected: 'So good. <span class="highlight">xbß.</span>'119 },120 {121 desc: 'Test 020: RTL he Hebrew',122 text: 'חסיד אומות העולם',123 highlight: 'חסיד אומות העולם',124 expected: '<span class="highlight">חסיד</span> <span class="highlight">אומות</span> <span class="highlight">העולם</span>'125 },126 {127 desc: 'Test 021: RTL he Hebrew',128 text: 'חסיד אומות העולם',129 highlight: 'חסי',130 expected: '<span class="highlight">חסי</span>ד אומות העולם'131 },132 {133 desc: 'Test 022: ja Japanese',134 text: '諸国民の中の正義の人',135 highlight: '諸国民の中の正義の人',136 expected: '<span class="highlight">諸国民の中の正義の人</span>'137 },138 {139 desc: 'Test 023: ja Japanese',140 text: '諸国民の中の正義の人',141 highlight: '諸国',142 expected: '<span class="highlight">諸国</span>民の中の正義の人'143 },144 {145 desc: 'Test 024: fr French text and « french quotes » (guillemets)',146 text: '« L\'oiseau est sur l’île »',147 highlight: '« L\'oiseau est sur l’île »',148 expected: '<span class="highlight">«</span> <span class="highlight">L\'oiseau</span> <span class="highlight">est</span> <span class="highlight">sur</span> <span class="highlight">l’île</span> <span class="highlight">»</span>'149 },150 {151 desc: 'Test 025: fr French text and « french quotes » (guillemets)',152 text: '« L\'oiseau est sur l’île »',153 highlight: '« L\'oise',154 expected: '<span class="highlight">«</span> <span class="highlight">L\'oise</span>au est sur l’île »'155 },156 {157 desc: 'Test 025a: fr French text and « french quotes » (guillemets) - does it match the single strings "«" and "L" separately?',158 text: '« L\'oiseau est sur l’île »',159 highlight: '« L',160 expected: '<span class="highlight">«</span> <span class="highlight">L</span>\'oiseau est sur <span class="highlight">l</span>’île »'161 },162 {163 desc: 'Test 026: ru Russian',164 text: 'Праведники мира',165 highlight: 'Праведники мира',166 expected: '<span class="highlight">Праведники</span> <span class="highlight">мира</span>'167 },168 {169 desc: 'Test 027: ru Russian',170 text: 'Праведники мира',171 highlight: 'Праве',172 expected: '<span class="highlight">Праве</span>дники мира'173 },174 {175 desc: 'Test 028 ka Georgian',176 text: 'მთავარი გვერდი',177 highlight: 'მთავარი გვერდი',178 expected: '<span class="highlight">მთავარი</span> <span class="highlight">გვერდი</span>'179 },180 {181 desc: 'Test 029 ka Georgian',182 text: 'მთავარი გვერდი',183 highlight: 'მთა',184 expected: '<span class="highlight">მთა</span>ვარი გვერდი'185 },186 {187 desc: 'Test 030 hy Armenian',188 text: 'Նոնա Գափրինդաշվիլի',189 highlight: 'Նոնա Գափրինդաշվիլի',190 expected: '<span class="highlight">Նոնա</span> <span class="highlight">Գափրինդաշվիլի</span>'191 },192 {193 desc: 'Test 031 hy Armenian',194 text: 'Նոնա Գափրինդաշվիլի',195 highlight: 'Նոն',196 expected: '<span class="highlight">Նոն</span>ա Գափրինդաշվիլի'197 },198 {199 desc: 'Test 032: th Thai',200 text: 'พอล แอร์ดิช',201 highlight: 'พอล แอร์ดิช',202 expected: '<span class="highlight">พอล</span> <span class="highlight">แอร์ดิช</span>'203 },204 {205 desc: 'Test 033: th Thai',206 text: 'พอล แอร์ดิช',207 highlight: 'พอ',208 expected: '<span class="highlight">พอ</span>ล แอร์ดิช'209 },210 {211 desc: 'Test 034: RTL ar Arabic',212 text: 'بول إيردوس',213 highlight: 'بول إيردوس',214 expected: '<span class="highlight">بول</span> <span class="highlight">إيردوس</span>'215 },216 {217 desc: 'Test 035: RTL ar Arabic',218 text: 'بول إيردوس',219 highlight: 'بو',220 expected: '<span class="highlight">بو</span>ل إيردوس'221 }222 ];223 $.each( cases, function ( i, item ) {224 $fixture = $( '<p>' ).text( item.text ).highlightText( item.highlight );225 assert.equal(226 $fixture.html(),227 // Re-parse to normalize228 $( '<p>' ).html( item.expected ).html(),229 item.desc || undefined230 );231 } );232 } );...

Full Screen

Full Screen

ve.dm.MWSyntaxHighlightNode.js

Source:ve.dm.MWSyntaxHighlightNode.js Github

copy

Full Screen

1/*!2 * VisualEditor DataModel MWSyntaxHighlightNode class.3 *4 * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt5 * @license The MIT License (MIT); see LICENSE.txt6 */7/**8 * DataModel MediaWiki syntax highlight node.9 *10 * @class11 * @abstract12 *13 * @constructor14 */15ve.dm.MWSyntaxHighlightNode = function VeDmMWSyntaxHighlightNode() {16};17/* Inheritance */18OO.initClass( ve.dm.MWSyntaxHighlightNode );19/* Static members */20ve.dm.MWSyntaxHighlightNode.static.name = 'mwSyntaxHighlight';21ve.dm.MWSyntaxHighlightNode.static.extensionName = 'syntaxhighlight';22ve.dm.MWSyntaxHighlightNode.static.getMatchRdfaTypes = function () {23 return [ 'mw:Extension/syntaxhighlight', 'mw:Extension/source' ];24};25/* Static methods */26/**27 * @inheritdoc28 */29ve.dm.MWSyntaxHighlightNode.static.toDataElement = function ( domElements, converter ) {30 // Parent method31 var isInline = this.isHybridInline( domElements, converter ),32 type = isInline ? 'mwInlineSyntaxHighlight' : 'mwBlockSyntaxHighlight',33 dataElement = ve.dm.MWExtensionNode.static.toDataElement.call( this, domElements, converter, type );34 return dataElement;35};36( function () {37 var supportedLanguages = [ undefined ],38 geshiToPygmentsMap,39 pygmentsToAceMap;40 /**41 * Register supported Pygments languages.42 *43 * @param {Array} languages44 */45 ve.dm.MWSyntaxHighlightNode.static.addPygmentsLanguages = function ( languages ) {46 ve.batchPush( supportedLanguages, languages );47 };48 /**49 * Register map from Geshi to pygments lexer names.50 *51 * @param {Array} map52 */53 ve.dm.MWSyntaxHighlightNode.static.addGeshiToPygmentsMap = function ( map ) {54 geshiToPygmentsMap = map;55 ve.batchPush( supportedLanguages, Object.keys( geshiToPygmentsMap ) );56 };57 /**58 * Register a map from pygments to Ace lexer names.59 *60 * @param {Array} map61 */62 ve.dm.MWSyntaxHighlightNode.static.addPygmentsToAceMap = function ( map ) {63 pygmentsToAceMap = map;64 };65 /**66 * Converts a (valid) language as recognized by the SyntaxHighlight wikicode67 * to a compatible Ace lexer name (to be used by CodeEditor)68 *69 * @param {string} language Language name70 * @return {string} The name of the ace lexer71 */72 ve.dm.MWSyntaxHighlightNode.static.convertLanguageToAce = function ( language ) {73 language = geshiToPygmentsMap[ language ] || language;74 return ( pygmentsToAceMap[ language ] || language ).toLowerCase();75 };76 /**77 * Check if a language is supported78 *79 * @param {string} language Language name80 * @return {boolean} The language is supported81 */82 ve.dm.MWSyntaxHighlightNode.static.isLanguageSupported = function ( language ) {83 return supportedLanguages.indexOf( language || undefined ) !== -1;84 };85 /**86 * Get an array of all languages (both Pygments and former GeSHi names)87 *88 * @return {Array} All currently supported languages89 */90 ve.dm.MWSyntaxHighlightNode.static.getLanguages = function () {91 return supportedLanguages.slice();92 };93}() );94/* Methods */95/**96 * Check if the node's current language is supported97 *98 * @return {boolean} The language is supported99 */100ve.dm.MWSyntaxHighlightNode.prototype.isLanguageSupported = function () {101 return this.constructor.static.isLanguageSupported( this.getLanguage() );102};103ve.dm.MWSyntaxHighlightNode.prototype.getLanguage = function () {104 return this.getAttribute( 'mw' ).attrs.lang;105};106/* Concrete subclasses */107ve.dm.MWBlockSyntaxHighlightNode = function VeDmMWBlockSyntaxHighlightNode() {108 // Parent method109 ve.dm.MWBlockExtensionNode.super.apply( this, arguments );110 // Mixin method111 ve.dm.MWSyntaxHighlightNode.call( this );112};113OO.inheritClass( ve.dm.MWBlockSyntaxHighlightNode, ve.dm.MWBlockExtensionNode );114OO.mixinClass( ve.dm.MWBlockSyntaxHighlightNode, ve.dm.MWSyntaxHighlightNode );115ve.dm.MWBlockSyntaxHighlightNode.static.name = 'mwBlockSyntaxHighlight';116ve.dm.MWBlockSyntaxHighlightNode.static.tagName = 'div';117ve.dm.MWInlineSyntaxHighlightNode = function VeDmMWInlineSyntaxHighlightNode() {118 // Parent method119 ve.dm.MWInlineExtensionNode.super.apply( this, arguments );120 // Mixin method121 ve.dm.MWSyntaxHighlightNode.call( this );122};123OO.inheritClass( ve.dm.MWInlineSyntaxHighlightNode, ve.dm.MWInlineExtensionNode );124OO.mixinClass( ve.dm.MWInlineSyntaxHighlightNode, ve.dm.MWSyntaxHighlightNode );125ve.dm.MWInlineSyntaxHighlightNode.static.name = 'mwInlineSyntaxHighlight';126ve.dm.MWInlineSyntaxHighlightNode.static.tagName = 'code';127ve.dm.MWInlineSyntaxHighlightNode.static.isContent = true;128/* Registration */129ve.dm.modelRegistry.register( ve.dm.MWBlockSyntaxHighlightNode );...

Full Screen

Full Screen

ve.ui.MWSyntaxHighlightInspector.js

Source:ve.ui.MWSyntaxHighlightInspector.js Github

copy

Full Screen

1/*!2 * VisualEditor UserInterface MWSyntaxHighlightInspector class.3 *4 * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt5 * @license The MIT License (MIT); see LICENSE.txt6 */7/**8 * MediaWiki syntax highlight inspector.9 *10 * @class11 * @extends ve.ui.MWLiveExtensionInspector12 * @mixins ve.ui.MWSyntaxHighlightWindow13 *14 * @constructor15 * @param {Object} [config] Configuration options16 */17ve.ui.MWSyntaxHighlightInspector = function VeUiMWSyntaxHighlightInspector() {18 // Parent constructor19 ve.ui.MWSyntaxHighlightInspector.super.apply( this, arguments );20 // Mixin constructor21 ve.ui.MWSyntaxHighlightWindow.call( this );22};23/* Inheritance */24OO.inheritClass( ve.ui.MWSyntaxHighlightInspector, ve.ui.MWLiveExtensionInspector );25OO.mixinClass( ve.ui.MWSyntaxHighlightInspector, ve.ui.MWSyntaxHighlightWindow );26/* Static properties */27ve.ui.MWSyntaxHighlightInspector.static.name = 'syntaxhighlightInspector';28ve.ui.MWSyntaxHighlightInspector.static.modelClasses = [ ve.dm.MWInlineSyntaxHighlightNode ];29/* Methods */30/**31 * @inheritdoc32 */33ve.ui.MWSyntaxHighlightInspector.prototype.initialize = function () {34 // Parent method35 ve.ui.MWSyntaxHighlightInspector.super.prototype.initialize.call( this );36 // Mixin method37 ve.ui.MWSyntaxHighlightWindow.prototype.initialize.call( this );38 // Initialization39 this.$content.addClass( 've-ui-mwSyntaxHighlightInspector-content' );40 this.form.$element.prepend(41 this.languageField.$element,42 this.codeField.$element43 );44};45/**46 * @inheritdoc47 */48ve.ui.MWSyntaxHighlightInspector.prototype.getReadyProcess = function ( data ) {49 // Parent process50 var process = ve.ui.MWSyntaxHighlightInspector.super.prototype.getReadyProcess.call( this, data );51 // Mixin process52 return ve.ui.MWSyntaxHighlightWindow.prototype.getReadyProcess.call( this, data, process );53};54/**55 * @inheritdoc56 */57ve.ui.MWSyntaxHighlightInspector.prototype.getSetupProcess = function ( data ) {58 // Parent process59 var process = ve.ui.MWSyntaxHighlightInspector.super.prototype.getSetupProcess.call( this, data );60 // Mixin process61 return ve.ui.MWSyntaxHighlightWindow.prototype.getSetupProcess.call( this, data, process ).next( function () {62 this.language.on( 'change', this.onChangeHandler );63 }, this );64};65/**66 * @inheritdoc67 */68ve.ui.MWSyntaxHighlightInspector.prototype.getTeardownProcess = function ( data ) {69 // Parent process70 var process = ve.ui.MWSyntaxHighlightInspector.super.prototype.getTeardownProcess.call( this, data );71 // Mixin process72 return ve.ui.MWSyntaxHighlightWindow.prototype.getTeardownProcess.call( this, data, process ).first( function () {73 this.language.off( 'change', this.onChangeHandler );74 }, this );75};76/**77 * @inheritdoc78 */79ve.ui.MWSyntaxHighlightInspector.prototype.updateMwData = function () {80 // Parent method81 ve.ui.MWSyntaxHighlightInspector.super.prototype.updateMwData.apply( this, arguments );82 // Mixin method83 ve.ui.MWSyntaxHighlightWindow.prototype.updateMwData.apply( this, arguments );84};85/* Registration */...

Full Screen

Full Screen

ve.ce.MWSyntaxHighlightNode.js

Source:ve.ce.MWSyntaxHighlightNode.js Github

copy

Full Screen

1/*!2 * VisualEditor ContentEditable MWSyntaxHighlightNode class.3 *4 * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt5 * @license The MIT License (MIT); see LICENSE.txt6 */7/**8 * ContentEditable MediaWiki syntax highlight node.9 *10 * @class11 * @abstract12 *13 * @constructor14 */15ve.ce.MWSyntaxHighlightNode = function VeCeMWSyntaxHighlightNode() {16};17/* Inheritance */18OO.initClass( ve.ce.MWSyntaxHighlightNode );19/* Static Properties */20ve.ce.MWSyntaxHighlightNode.static.name = 'mwSyntaxHighlight';21/* Methods */22// Inherits from ve.ce.GeneratedContentNode23ve.ce.MWSyntaxHighlightNode.prototype.generateContents = function () {24 var node = this,25 args = arguments;26 // Parent method27 return mw.loader.using( 'ext.pygments' ).then( function () {28 return ve.ce.MWExtensionNode.prototype.generateContents.apply( node, args );29 } );30};31// Inherits from ve.ce.BranchNode32ve.ce.MWSyntaxHighlightNode.prototype.onSetup = function () {33 // Parent method34 ve.ce.MWExtensionNode.prototype.onSetup.call( this );35 // DOM changes36 this.$element.addClass( 've-ce-mwSyntaxHighlightNode' );37};38// Inherits from ve.ce.FocusableNode39ve.ce.MWSyntaxHighlightNode.prototype.getBoundingRect = function () {40 // HACK: Because nodes can overflow due to the pre tag, just use the41 // first rect (of the wrapper div) for placing the context.42 return this.rects[ 0 ];43};44/* Concrete subclasses */45ve.ce.MWBlockSyntaxHighlightNode = function VeCeMWBlockSyntaxHighlightNode() {46 // Parent method47 ve.ce.MWBlockExtensionNode.super.apply( this, arguments );48 // Mixin method49 ve.ce.MWSyntaxHighlightNode.call( this );50};51OO.inheritClass( ve.ce.MWBlockSyntaxHighlightNode, ve.ce.MWBlockExtensionNode );52OO.mixinClass( ve.ce.MWBlockSyntaxHighlightNode, ve.ce.MWSyntaxHighlightNode );53ve.ce.MWBlockSyntaxHighlightNode.static.name = 'mwBlockSyntaxHighlight';54ve.ce.MWBlockSyntaxHighlightNode.static.primaryCommandName = 'syntaxhighlightDialog';55ve.ce.MWInlineSyntaxHighlightNode = function VeCeMWInlineSyntaxHighlightNode() {56 // Parent method57 ve.ce.MWInlineExtensionNode.super.apply( this, arguments );58 // Mixin method59 ve.ce.MWSyntaxHighlightNode.call( this );60};61OO.inheritClass( ve.ce.MWInlineSyntaxHighlightNode, ve.ce.MWInlineExtensionNode );62OO.mixinClass( ve.ce.MWInlineSyntaxHighlightNode, ve.ce.MWSyntaxHighlightNode );63ve.ce.MWInlineSyntaxHighlightNode.static.name = 'mwInlineSyntaxHighlight';64ve.ce.MWInlineSyntaxHighlightNode.static.primaryCommandName = 'syntaxhighlightInspector';65/* Registration */66ve.ce.nodeFactory.register( ve.ce.MWBlockSyntaxHighlightNode );...

Full Screen

Full Screen

TimelineHighlightRange.js

Source:TimelineHighlightRange.js Github

copy

Full Screen

1/*global define*/2define([3 '../../Core/defaultValue',4 '../../Core/JulianDate'5 ], function(6 defaultValue,7 JulianDate) {8 "use strict";910 /**11 * @private12 */13 function TimelineHighlightRange(color, heightInPx, base) {14 this._color = color;15 this._height = heightInPx;16 this._base = defaultValue(base, 0);17 }1819 TimelineHighlightRange.prototype.getHeight = function() {20 return this._height;21 };2223 TimelineHighlightRange.prototype.getBase = function() {24 return this._base;25 };2627 TimelineHighlightRange.prototype.getStartTime = function() {28 return this._start;29 };3031 TimelineHighlightRange.prototype.getStopTime = function() {32 return this._stop;33 };3435 TimelineHighlightRange.prototype.setRange = function(start, stop) {36 this._start = start;37 this._stop = stop;38 };3940 TimelineHighlightRange.prototype.render = function(renderState) {41 var range = '';42 if (this._start && this._stop && this._color) {43 var highlightStart = JulianDate.secondsDifference(this._start, renderState.epochJulian);44 var highlightLeft = Math.round(renderState.timeBarWidth * renderState.getAlpha(highlightStart));45 var highlightStop = JulianDate.secondsDifference(this._stop, renderState.epochJulian);46 var highlightWidth = Math.round(renderState.timeBarWidth * renderState.getAlpha(highlightStop)) - highlightLeft;47 if (highlightLeft < 0) {48 highlightWidth += highlightLeft;49 highlightLeft = 0;50 }51 if ((highlightLeft + highlightWidth) > renderState.timeBarWidth) {52 highlightWidth = renderState.timeBarWidth - highlightLeft;53 }54 if (highlightWidth > 0) {55 range = '<span class="cesium-timeline-highlight" style="left: ' + highlightLeft.toString() +56 'px; width: ' + highlightWidth.toString() + 'px; bottom: ' + this._base.toString() +57 'px; height: ' + this._height + 'px; background-color: ' + this._color + ';"></span>';58 }59 }60 return range;61 };6263 return TimelineHighlightRange; ...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('input[name="q"]');7 await page.fill('input[name="q"]', 'Hello World!');8 await page.click('text=Google Search');9 await page.close();10 await context.close();11 await browser.close();12})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { webkit, devices } = require('playwright');2const iPhone = devices['iPhone 6'];3(async () => {4 const browser = await webkit.launch();5 const context = await browser.newContext({6 viewport: { width: 1080, height: 1920 },7 });8 const page = await context.newPage();9 await page.click('text="Sign in"');10 await page.fill('input[name="identifier"]', 'foo');11 await page.press('input[name="identifier"]', 'Enter');12 await page.fill('input[name="password"]', 'bar');13 await page.press('input[name="password"]', 'Enter');14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('text=Get started');6 await page.click('text=Docs');7 await page.click('text=Language bindings');8 await page.click('text=JavaScript');9 await page.click('text=API');10 await page.click('text=class: Page');11 await page.click('text=highlight');12 await page.waitForTimeout(1000);13 await page.highlight('text=highlight');14 await page.waitForTimeout(1000);15 await page.highlight('text=highlight', { color: 'red' });16 await page.waitForTimeout(1000);17 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue' });18 await page.waitForTimeout(1000);19 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000 });20 await page.waitForTimeout(1000);21 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000, style: 'fade' });22 await page.waitForTimeout(1000);23 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000, style: 'fade' });24 await page.waitForTimeout(1000);25 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000, style: 'fade', type: 'rect' });26 await page.waitForTimeout(1000);27 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000, style: 'fade', type: 'rect', padding: 20 });28 await page.waitForTimeout(1000);29 await page.highlight('text=highlight', { color: 'red', outline: 'solid 2px blue', duration: 2000, style: 'fade', type: 'rect', padding: 20, borderColor: 'green' });30 await page.waitForTimeout(1000);31 await page.highlight('text=highlight',

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.highlight('text=Get started');6 await browser.close();7})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 await page.type('input[name="q"]', 'Hello World');6 await page.keyboard.press('Enter');7 await page.waitForSelector('h3');8 const element = await page.$('h3');9 await element.highlight();10 await browser.close();11})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { highlight } = require("@playwright/test");2const { highlight } = require("@playwright/test");3const { highlight } = require("@playwright/test");4const { highlight } = require("@playwright/test");5const { highlight } = require("@playwright/test");6const { highlight } = require("@playwright/test");7const { highlight } = require("@playwright/test");8const { highlight } = require("@playwright/test");9const { highlight } = require("@playwright/test");10const { highlight } = require("@playwright/test");

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {highlight, test} = require('playwright-testing-library');2test('my test', async ({page}) => {3 const heading = await page.$('h1');4 await highlight(heading);5});6[MIT](./LICENSE)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {highlight} = require('@playwright/test');2const fs = require('fs');3test('example', async ({page}) => {4 await highlight(page, 'text=Get started');5 await page.click('text=Get started');6 await highlight(page, 'text=Quick start');7 await page.click('text=Quick start');8 await highlight(page, 'text=Install');9 await page.click('text=Install');10 await highlight(page, 'text=Run your first test');11 await page.click('text=Run your first test');12 await highlight(page, 'text=Run in Playwright');13 await page.click('text=Run in Playwright');14 await highlight(page, 'text=Run in WebStorm');15 await page.click('text=Run in WebStorm');16 await highlight(page, 'text=Run in VS Code');17 await page.click('text=Run in VS Code');18 await highlight(page, 'text=Run in IntelliJ');19 await page.click('text=Run in IntelliJ');20 await highlight(page, 'text=Run in Eclipse');21 await page.click('text=Run in Eclipse');22 await highlight(page, 'text=Run in CLI');23 await page.click('text=Run in CLI');24 await highlight(page, 'text=Run in Docker');25 await page.click('text=Run in Docker');26 await highlight(page, 'text=Run in CI');27 await page.click('text=Run in CI');28 await highlight(page, 'text=Run in all browsers');29 await page.click('text=Run in all browsers');30 await highlight(page, 'text=Debug your test');31 await page.click('text=Debug your test');32 await highlight(page, 'text=Debug in Playwright');33 await page.click('text=Debug in Playwright');34 await highlight(page, 'text=Debug in WebStorm');35 await page.click('text=Debug in WebStorm');36 await highlight(page, 'text=Debug in VS Code');37 await page.click('text=Debug in VS Code');38 await highlight(page, 'text=Debug in IntelliJ');39 await page.click('text=Debug in IntelliJ');40 await highlight(page, 'text=Debug in Eclipse');41 await page.click('text=Debug in Eclipse');42 await highlight(page, 'text=Debug in CLI');

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful