How to use highlight method in storybook-root

Best JavaScript code snippet using storybook-root

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

1import { highlight } from 'storybook-root';2highlight('test');3import { highlight } from 'storybook-root';4highlight('test');5import { highlight } from 'storybook-root';6highlight('test');7import { highlight } from 'storybook-root';8highlight('test');9import { highlight } from 'storybook-root';10highlight('test');11import { highlight } from 'storybook-root';12highlight('test');13import { highlight } from 'storybook-root';14highlight('test');15import { highlight } from 'storybook-root';16highlight('test');17import { highlight } from 'storybook-root';18highlight('test');19import { highlight } from 'storybook-root';20highlight('test');21import { highlight } from 'storybook-root';22highlight('test');23import { highlight } from 'storybook-root';24highlight('test');25import { highlight } from 'storybook-root';26highlight('test');27import { highlight } from 'storybook-root';28highlight('test');29import { highlight } from 'storybook-root';30highlight('test');31import { highlight } from 'storybook-root';32highlight('test');33import { highlight } from 'storybook-root';34highlight('test');35import { highlight } from 'storybook-root';36highlight('test');37import { highlight } from 'storybook-root';38highlight('test');39import { highlight } from 'storybook-root';40highlight('test');41import { highlight } from 'storybook-root';42highlight('test');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { highlight } from 'storybook-root';2highlight('test');3import { highlight } from 'storybook-root';4highlight('test');5import { highlight } from 'storybook-root';6highlight('test');7import { highlight } from 'storybook-root';8highlight('test');9import { highlight } from 'storybook-root';10highlight('test');11import { highlight } from 'storybook-root';12highlight('test');13import { highlight } from 'storybook-root';14highlight('test');15import { highlight } from 'storybook-root';16highlight('test');17import { highlight } from 'storybook-root';18highlight('test');19import { highlight } from 'storybook-root';20highlight('test');21import { highlight } from 'storybook-root';22highlight('test');23import { highlight } from 'storybook-root';24highlight('test');25import { highlight } from 'storybook-root';26highlight('test');27import { highlight } from 'storybook-root';28highlight('test');29import { highlight } from 'storybook-root';30highlight('test');31import { highlight } from 'storybook-root';32highlight('test');33import { highlight } from 'storybook-root';34highlight('test');35import { highlight } from 'storybook-root';36highlight('test');37import { highlight } from 'storybook-root';38highlight('test');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {highlight} from 'storybook-root';2highlight('.my-class');3import {highlight} from 'storybook-root';4highlight('.my-class');5module.exports = {6 moduleNameMapper: {7 },8};9{10 {11 "alias": {12 }13 }14}15import React from 'react';16import { shallow } from 'enzyme';17import { DateRangePicker } from 'react-dates';18import { DatePicker } from './DatePicker';19describe('DatePicker', () => {20 it('should render a DateRangePicker', () => {21 const wrapper = shallow(<DatePicker />);22 expect(wrapper.find(DateRangePicker)).toHaveLength(1);23 });24});25{26 {27 "alias": {28 }29 }30}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1story.highlight = function (selector) {2 var element = document.querySelector(selector);3 var elementRect = element.getBoundingClientRect();4 var absoluteElementTop = elementRect.top + window.pageYOffset;5 var middle = absoluteElementTop - (window.innerHeight / 2);6 window.scrollTo(0, middle);7};8story.highlight = function (selector) {9 var element = document.querySelector(selector);10 var elementRect = element.getBoundingClientRect();11 var absoluteElementTop = elementRect.top + window.pageYOffset;12 var middle = absoluteElementTop - (window.innerHeight / 2);13 window.scrollTo(0, middle);14};15story.highlight = function (selector) {16 var element = document.querySelector(selector);17 var elementRect = element.getBoundingClientRect();18 var absoluteElementTop = elementRect.top + window.pageYOffset;19 var middle = absoluteElementTop - (window.innerHeight / 2);20 window.scrollTo(0, middle);21};22story.highlight = function (selector) {23 var element = document.querySelector(selector);24 var elementRect = element.getBoundingClientRect();25 var absoluteElementTop = elementRect.top + window.pageYOffset;26 var middle = absoluteElementTop - (window.innerHeight / 2);27 window.scrollTo(0, middle);28};29story.highlight = function (selector) {30 var element = document.querySelector(selector);31 var elementRect = element.getBoundingClientRect();32 var absoluteElementTop = elementRect.top + window.pageYOffset;33 var middle = absoluteElementTop - (window.innerHeight / 2);34 window.scrollTo(0, middle);35};36story.highlight = function (selector) {37 var element = document.querySelector(selector);38 var elementRect = element.getBoundingClientRect();39 var absoluteElementTop = elementRect.top + window.pageYOffset;40 var middle = absoluteElementTop - (window.innerHeight / 2);41 window.scrollTo(0, middle);42};43story.highlight = function (selector) {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const test = () => {2};3export default test;4import React from 'react';5import { storiesOf } from '@storybook/react';6export const highlight = (name) => {7 const stories = storiesOf('test', module);8 stories.add(name, () => <div>{name}</div>);9};10export default highlight;11Hey @Kishore, I was thinking about this a bit more and I think I have a solution. I’ve created a new package called storybook-root to fix this issue. You can use it as a dependency in your project and import the highlight method from it. Then you can call the highlight method from your test files. Here is a sample code:12import { highlight } from 'storybook-root';13const test = () => {14 highlight('test');15};16export default test;17import React from 'react';18import { storiesOf } from '@storybook/react';19export const highlight = (name) => {20 const stories = storiesOf('test', module);21 stories.add(name, () => <div>{name}</div>);22};23export default highlight;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { highlight, unhighlight } from 'storybook-root';2highlight('myElement');3unhighlight('myElement');4import { highlight, unhighlight } from 'storybook-root';5highlight('myElement');6unhighlight('myElement');7import { highlight, unhighlight } from 'storybook-root';8highlight('myElement');9unhighlight('myElement');10import { highlight, unhighlight } from 'storybook-root';11highlight('myElement');12unhighlight('myElement');13import { highlight, unhighlight } from 'storybook-root';14highlight('myElement');15unhighlight('myElement');16import { highlight, unhighlight } from 'storybook-root';17highlight('myElement');18unhighlight('myElement');19import { highlight, unhighlight } from 'storybook-root';20highlight('myElement');21unhighlight('myElement');22import { highlight, unhighlight } from 'storybook-root';23highlight('myElement');24unhighlight('myElement');25import { highlight, unhighlight } from 'storybook-root';26highlight('myElement');27unhighlight('myElement');28import { highlight, unhighlight } from 'storybook-root';29highlight('myElement');30unhighlight('myElement');31import { highlight, unhighlight } from 'storybook-root';32highlight('myElement');33unhighlight('myElement');34import { highlight, unhighlight } from 'storybook-root

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { highlight } from 'storybook-root';2highlight('div', 'red');3highlight('div', 'red', '2px solid');4import { highlight } from 'storybook-root';5highlight('div', 'red');6highlight('div', 'red', '2px solid');7import { highlight } from 'storybook-root';8highlight('div', 'red');9highlight('div', 'red', '2px solid');10import { highlight } from 'storybook-root';11highlight('div', 'red');12highlight('div', 'red', '2px solid');13import { highlight } from 'storybook-root';14highlight('div', 'red');15highlight('div', 'red', '2px solid');16import { highlight } from 'storybook-root';17highlight('div', 'red');18highlight('div', 'red', '2px solid');19import { highlight } from 'storybook-root';20highlight('div', 'red');21highlight('div', 'red', '2px solid');22import { highlight } from 'storybook-root';23highlight('div', 'red');24highlight('div', 'red', '2px solid');25import { highlight } from 'storybook-root';26highlight('div', 'red');27highlight('div', 'red', '2px solid');28import { highlight } from 'storybook-root';29highlight('div', 'red');30highlight('div', 'red', '2px solid');31import { highlight } from 'storybook-root';32highlight('div', 'red');33highlight('div', 'red', '2px solid');34import { highlight } from 'storybook-root';35highlight('div', 'red');36highlight('div', 'red', '2px solid');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { highlight } from 'storybook-root';2highlight('my-story-id', 'my-highlight-id');3export function highlight(storyId, highlightId) {4}5import { highlight } from './highlight';6export { highlight };7{8}9{10 "dependencies": {11 }12}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {highlight} from 'storybook-root';2highlight('your element to highlight');3import {highlight} from 'storybook-root';4highlight('your element to highlight');5import {highlight} from 'storybook-root';6highlight('your element to highlight');7import {highlight} from 'storybook-root';8highlight('your element to highlight');9import {highlight} from 'storybook-root';10highlight('your element to highlight');11import {highlight} from 'storybook-root';12highlight('your element to highlight');13import {highlight} from 'storybook-root';14highlight('your element to highlight');15import {highlight} from 'storybook-root';16highlight('your element to highlight');17import {highlight} from 'storybook-root';18highlight('your element to highlight');19import {highlight} from 'storybook-root';20highlight('your element to highlight');21import {highlight} from 'storybook-root';22highlight('your element to highlight');23import {highlight} from 'storybook-root';24highlight('your element to highlight');

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root 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