How to use highlightObject method in storybook-root
Best JavaScript code snippet using storybook-root
settingHighlightPane.js
Source:settingHighlightPane.js 
1const SettingHighlightPane = {2 highlightList: {},3 show: function() {4 const self = this;5 var visualizeState = State.visualize;6 var selectedEvents = visualizeState.filter(function(d) {7 return (d.type == 'pointEvent' || d.type == 'intervalEvent');8 });9 $('#setting-pane > .settings').removeClass('visualize');10 $('#setting-pane > .settings').removeClass('group');11 $('#setting-pane > .settings').removeClass('filter');12 $('#setting-pane > .settings').removeClass('encode');13 $('#setting-pane > .settings').removeClass('highlight');14 $('#setting-pane > .settings').removeClass('other');15 $('#setting-pane > .settings').addClass('highlight');16 self.highlightList = {};17 self.showSearchBox(selectedEvents);18 self.addEventHighlightsToList(selectedEvents);19 self.drawHighlights(selectedEvents);20 self.initClickListHighlightHeaderBehaviour();21 self.initClickRangeHighlightHeaderBehaviour();22 self.initHoverTitleBehaviour();23 self.initHoverHighlightHeaderBehaviour();24 self.initSearchBoxBehaviour();25 $('#setting-pane > .settings').scrollTop(0);26 },27 showSearchBox: function(selectedEvents) {28 var hasSelectedEvents = selectedEvents.length > 0;29 if (hasSelectedEvents)30 $('#setting-pane > .search-box')31 .css('display', '');32 else if (!hasSelectedEvents)33 $('#setting-pane > .search-box')34 .css('display', 'none');35 },36 addEventHighlightsToList: function(selectedEvents) {37 const self = this;38 var highlightList = self.highlightList;39 for (var i = 0; i < selectedEvents.length; i++) {40 var eventData = selectedEvents[i].data;41 var eventName = eventData.eventName;42 var eventAttributeList = eventData.eventAttributeList;43 highlightList[eventName] = [];44 for (var j = 0; j < eventAttributeList.length; j++) {45 var eventAttributeData = eventAttributeList[j];46 var eventAttributeName = eventAttributeData.eventAttributeName;47 var eventAttributeType = eventAttributeData.eventAttributeType;48 var eventAttributeAttributeList = eventAttributeData.eventAttributeAttributeList;49 var highlightObject = null;50 var previousHighlightObjectList = State.getPreviousHighlightObjectList({51 databaseQueryType: 'event',52 databaseQueryName: eventName,53 eventAttributeName: eventAttributeName,54 eventAttributeType: eventAttributeType,55 displayName: eventAttributeName // to differentiate from event attribute attribute56 });57 // handle event attribute58 if (previousHighlightObjectList.length == 0) { // not previously stored59 highlightObject = {};60 highlightObject.databaseQueryType = 'event';61 highlightObject.databaseQueryName = eventName;62 highlightObject.eventAttributeName = eventAttributeName;63 highlightObject.eventAttributeType = eventAttributeType;64 highlightObject.displayName = eventAttributeName;65 highlightObject.isChanged = false; // filtered?66 self.addDataToHighlightObject(highlightObject, eventAttributeType, eventAttributeData);67 highlightList[eventName].push(highlightObject);68 }69 else if (previousHighlightObjectList.length > 0) {70 highlightObject = previousHighlightObjectList[0]; // only one match71 highlightList[eventName].push(highlightObject);72 }73 // handle event attribute attribute74 for (var k = 0; k < eventAttributeAttributeList.length; k++) {75 var eventAttributeAttributeData = eventAttributeAttributeList[k];76 var eventAttributeAttributeName = eventAttributeAttributeData.attributeName;77 var eventAttributeAttributeType = eventAttributeAttributeData.attributeType;78 var eventAttributEntityKey = eventAttributeData.entityKey;79 var shortEventAttributeName = eventAttributeName.length > 10 ? eventAttributeName.substring(0, 10) + '...' : eventAttributeName;80 var highlightObject = null;81 var previousHighlightObjectList = State.getPreviousHighlightObjectList({82 databaseQueryType: 'event',83 databaseQueryName: eventName,84 eventAttributeName: eventAttributeName,85 eventAttributeType: eventAttributeType,86 eventAttributeAttributeName: eventAttributeAttributeName,87 eventAttributeAttributeType: eventAttributeAttributeType88 });89 if (previousHighlightObjectList.length == 0) { // not previously stored90 highlightObject = {};91 highlightObject.databaseQueryType = 'event';92 highlightObject.databaseQueryName = eventName;93 highlightObject.eventAttributeName = eventAttributeName;94 highlightObject.eventAttributeType = eventAttributeType;95 highlightObject.eventAttributeAttributeName = eventAttributeAttributeName;96 highlightObject.eventAttributeAttributeType = eventAttributeAttributeType;97 highlightObject.entityKey = eventAttributEntityKey;98 highlightObject.displayName = shortEventAttributeName + ' : ' + eventAttributeAttributeName;99 highlightObject.isChanged = false; // filtered?100 self.addDataToHighlightObject(highlightObject, eventAttributeAttributeType, eventAttributeAttributeData);101 highlightList[eventName].push(highlightObject);102 }103 else if (previousHighlightObjectList.length > 0) {104 highlightObject = previousHighlightObjectList[0]; // only one match105 highlightList[eventName].push(highlightObject);106 }107 }108 }109 }110 },111 drawHighlights: function(selectedEvents) {112 const self = this;113 var highlightList = self.highlightList;114 var hasSelectedEvents = selectedEvents.length > 0;115 if (!hasSelectedEvents) // highlightList is empty116 $('#setting-pane > .settings')117 .append('<div class="no-event-text">No Events Selected</div>');118 for (var highlightItem in highlightList) {119 var title = 'Highlight ' + highlightItem;120 $('#setting-pane > .settings')121 .append('<div class="title">' + title + '</div>');122 for (var i = 0; i < highlightList[highlightItem].length; i++) {123 var highlightObject = highlightList[highlightItem][i];124 var attributeName = highlightObject.displayName;125 var isChanged = highlightObject.isChanged;126 var attributeType = null;127 var highlightCapsuleHTML = null;128 var addedHighlightCapsuleEl = null;129 if ('eventAttributeAttributeType' in highlightObject) attributeType = highlightObject.eventAttributeAttributeType;130 else if ('eventAttributeType' in highlightObject) attributeType = highlightObject.eventAttributeType;131 else if ('attributeType' in highlightObject) attributeType = highlightObject.attributeType;132 highlightCapsuleHTML = self.generateHighlightCapsuleHTML(attributeName, attributeType, isChanged);133 $('#setting-pane > .settings').append(highlightCapsuleHTML);134 addedHighlightCapsuleEl = $('#setting-pane > .settings > .highlight-capsule').last()[0];135 d3.select(addedHighlightCapsuleEl).datum(highlightObject);136 }137 }138 },139 initClickListHighlightHeaderBehaviour: function() {140 const self = this;141 $('#setting-pane > .settings.highlight > .highlight-capsule.list > .header')142 .on('click', onClickHighlightPaneListHighlightHeader);143 function onClickHighlightPaneListHighlightHeader() {144 var highlightCapsuleEl = this.parentNode;145 var needToExpand = !$(highlightCapsuleEl).hasClass('expanded');146 var highlightContentEl = $(highlightCapsuleEl).find('.content')[0];147 var highlightObject = d3.select(highlightCapsuleEl).datum();148 var clickedSelectAllButton = $(event.target).hasClass('select-all-button');149 var clickedSelectNoneButton = $(event.target).hasClass('select-none-button');150 // expand151 if (needToExpand && !clickedSelectAllButton && !clickedSelectNoneButton) {152 $(highlightCapsuleEl).addClass('expanded');153 $(highlightContentEl).empty();154 $(this).find('.expand-button').removeClass('fa-caret-square-down');155 $(this).find('.expand-button').addClass('fa-caret-square-up');156 for (var i = 0; i < highlightObject.categories.length; i++) {157 var categoryName = highlightObject.categories[i];158 var categoryIsChecked = highlightObject.selectedCategories.indexOf(categoryName) != -1;159 var categoryHTML = self.generateCategoryHTML(categoryName, categoryIsChecked);160 var addedCategoryEl = null;161 $(highlightContentEl).append(categoryHTML);162 addedCategoryEl = $(highlightContentEl).find('.category').last()[0];163 d3.select(addedCategoryEl).datum(categoryName);164 }165 self.initClickListHighlightCategoryBehaviour(highlightContentEl);166 self.initHoverListHighlightCategoryBehaviour(highlightContentEl);167 }168 // collapse169 else if (!needToExpand && !clickedSelectAllButton && !clickedSelectNoneButton) {170 $(highlightCapsuleEl).removeClass('expanded');171 $(highlightContentEl).empty();172 $(this).find('.expand-button').removeClass('fa-caret-square-up');173 $(this).find('.expand-button').addClass('fa-caret-square-down');174 }175 // select all176 else if (clickedSelectAllButton) {177 ListHighlight.clickSelectAll(highlightCapsuleEl); // update states178 RightColumn.update();179 }180 // select none181 else if (clickedSelectNoneButton) {182 ListHighlight.clickSelectNone(highlightCapsuleEl); // update states183 RightColumn.update();184 }185 }186 },187 initClickRangeHighlightHeaderBehaviour: function() {188 const self = this;189 $('#setting-pane > .settings.highlight > .highlight-capsule.range > .header')190 .on('click', onClickHighlightPaneRangeHighlight);191 function onClickHighlightPaneRangeHighlight() {192 var highlightCapsuleEl = this.parentNode;193 var needToExpand = !$(highlightCapsuleEl).hasClass('expanded');194 var highlightContentEl = $(highlightCapsuleEl).find('.content')[0];195 var highlightObject = d3.select(highlightCapsuleEl).datum();196 var clickedSelectAllButton = $(event.target).hasClass('select-all-button');197 var clickedSelectNoneButton = $(event.target).hasClass('select-none-button');198 // expand199 if (needToExpand && !clickedSelectAllButton && !clickedSelectNoneButton) {200 var sliderHTML = self.generateSliderHTML();201 var sliderObject = new HighlightSlider(highlightContentEl);202 var sliderMin = highlightObject.range[0];203 var sliderMax = highlightObject.range[1];204 var sliderHandleMin = highlightObject.selectedRange[0];205 var sliderHandleMax = highlightObject.selectedRange[1];206 let realMaxNumberOfDecimal = Math.max(self.countDecimals(sliderMin), self.countDecimals(sliderMax));207 let maxNumberOfDecimal = (realMaxNumberOfDecimal > 2) ? 2 : realMaxNumberOfDecimal;208 let step = 1 / Math.pow(10, maxNumberOfDecimal);209 $(highlightCapsuleEl).addClass('expanded');210 $(highlightContentEl).empty();211 $(this).find('.expand-button').removeClass('fa-caret-square-down');212 $(this).find('.expand-button').addClass('fa-caret-square-up');213 $(highlightContentEl).append(sliderHTML);214 sliderObject.init();215 sliderObject.initHandleValues();216 sliderObject.initDragBehaviour();217 sliderObject.updateMinMax(sliderMin, sliderMax);218 sliderObject.updateValues([ sliderHandleMin, sliderHandleMax ]);219 sliderObject.updateStep(step);220 sliderObject.updateHandles();221 sliderObject.updateMinMaxText();222 }223 // collapse224 else if (!needToExpand && !clickedSelectAllButton && !clickedSelectNoneButton) {225 $(highlightCapsuleEl).removeClass('expanded');226 $(highlightContentEl).empty();227 $(this).find('.expand-button').removeClass('fa-caret-square-up');228 $(this).find('.expand-button').addClass('fa-caret-square-down');229 }230 }231 },232 initHoverTitleBehaviour: function() {233 $('#setting-pane > .settings.highlight > .title')234 .unbind('mouseover').unbind('mouseout')235 .on('mouseover', onMouseoverTitle)236 .on('mouseout', onMouseoutTitle);237 function onMouseoverTitle() {238 var name = $(this).text();239 SettingPaneAttributeTooltip.show(name, this);240 }241 function onMouseoutTitle() {242 SettingPaneAttributeTooltip.hide();243 }244 },245 initHoverHighlightHeaderBehaviour: function() {246 $('#setting-pane > .settings.highlight > .highlight-capsule > .header')247 .unbind('mouseover').unbind('mouseout')248 .on('mouseover', onMouseoverHighlightHeader)249 .on('mouseout', onMouseoutHighlightHeader);250 function onMouseoverHighlightHeader(event) {251 var data = d3.select(this.parentNode).datum();252 var name = null;253 var hoveredSelectNoneButton = $(event.target).hasClass('select-none-button');254 var hoveredSelectAllButton = $(event.target).hasClass('select-all-button');255 if (data.databaseQueryType == 'entity') name = data.attributeName;256 else if ('eventAttributeAttributeName' in data) name = data.eventAttributeName + ' : ' + data.eventAttributeAttributeName;257 else name = data.eventAttributeName;258 if (!hoveredSelectNoneButton && !hoveredSelectAllButton) {259 $(this).addClass('hover');260 SettingPaneAttributeTooltip.show(name, this);261 }262 else if (hoveredSelectNoneButton) {263 var offset = $(this).offset();264 var width = $(this).width();265 $(this).removeClass('hover');266 SettingPaneAttributeTooltip.simplyShow(267 left = offset.left + width + 8 + 5,268 top = offset.top + 8,269 text = 'Click to gray out all categories below'270 );271 }272 else if (hoveredSelectAllButton) {273 var offset = $(this).offset();274 var width = $(this).width();275 $(this).removeClass('hover');276 SettingPaneAttributeTooltip.simplyShow(277 left = offset.left + width + 8 + 5,278 top = offset.top + 8,279 text = 'Click to highlight all categories below'280 );281 }282 }283 function onMouseoutHighlightHeader() {284 $(this).removeClass('hover');285 SettingPaneAttributeTooltip.hide();286 }287 },288 initSearchBoxBehaviour: function() {289 const self = this;290 $('#setting-pane > .search-box > input')291 .unbind('input')292 .on('input', onInputSearchQuery);293 function onInputSearchQuery() {294 var searchQueryInLowerCase = $(this).val().toLowerCase();295 if (searchQueryInLowerCase == '') {296 var visualizeState = State.visualize;297 var selectedEvents = visualizeState.filter(function(d) {298 return (d.type == 'pointEvent' || d.type == 'intervalEvent');299 });300 301 SettingPane.empty();302 self.highlightList = {};303 self.addEventHighlightsToList(selectedEvents);304 self.drawHighlights(selectedEvents);305 self.initClickListHighlightHeaderBehaviour();306 self.initClickRangeHighlightHeaderBehaviour();307 self.initHoverTitleBehaviour();308 self.initHoverHighlightHeaderBehaviour();309 }310 else if (searchQueryInLowerCase != '') {311 self.expandListHighlights(searchQueryInLowerCase);312 self.markVariables(searchQueryInLowerCase);313 self.filterHighlights(searchQueryInLowerCase);314 self.filterTitles();315 }316 }317 },318 // initSearchBoxBehaviour319 expandListHighlights: function(searchQueryInLowerCase) {320 const self = this;321 $('#setting-pane > .settings.highlight > .highlight-capsule.list').each(function() {322 var highlightCapsuleEl = this;323 var highlightContentEl = $(highlightCapsuleEl).find('.content')[0];324 var highlightObject = d3.select(highlightCapsuleEl).datum();325 var allCategoryList = highlightObject.categories;326 var selectedCategoryList = highlightObject.selectedCategories;327 var matchedCategoryList = [];328 // get matchedCategoryList329 for (var i = 0; i < allCategoryList.length; i++) {330 var categoryName = allCategoryList[i];331 var categoryNameInLowerCase = categoryName.toLowerCase();332 var categoryNameMatchedQuery = categoryNameInLowerCase.indexOf(searchQueryInLowerCase) != -1;333 if (categoryNameMatchedQuery) matchedCategoryList.push(categoryName);334 }335 // expand if matchedCategoryList is not empty336 if (matchedCategoryList.length > 0) {337 $(highlightCapsuleEl).addClass('expanded');338 $(highlightContentEl).empty();339 $(this).find('.expand-button').removeClass('fa-caret-square-down');340 $(this).find('.expand-button').addClass('fa-caret-square-up');341 }342 // collapse if matchedCategoryList is empty343 else if (matchedCategoryList.length == 0) {344 $(highlightCapsuleEl).removeClass('expanded');345 $(highlightContentEl).empty();346 $(this).find('.expand-button').removeClass('fa-caret-square-up');347 $(this).find('.expand-button').addClass('fa-caret-square-down');348 }349 // draw matchedCategoryList350 for (var i = 0; i < matchedCategoryList.length; i++) {351 var categoryName = matchedCategoryList[i];352 var categoryIsChecked = selectedCategoryList.indexOf(categoryName) != -1;353 var categoryHTML = self.generateCategoryHTML(categoryName, categoryIsChecked);354 var addedCategoryEl = null;355 $(highlightContentEl).append(categoryHTML);356 addedCategoryEl = $(highlightContentEl).find('.category').last()[0];357 d3.select(addedCategoryEl).datum(categoryName);358 }359 self.initClickListHighlightCategoryBehaviour(highlightContentEl);360 self.initHoverListHighlightCategoryBehaviour(highlightContentEl);361 });362 },363 markVariables: function(searchQueryInLowerCase) {364 var markInstance = new Mark(document.querySelectorAll('#setting-pane > .settings.highlight'));365 markInstance.unmark({366 done: function(){367 markInstance.mark(searchQueryInLowerCase, {368 'separateWordSearch': false,369 'diacritics': false370 });371 }372 });373 },374 filterHighlights: function(searchQueryInLowerCase) {375 $('#setting-pane > .settings.highlight > .highlight-capsule').each(function() {376 var highlightCapsuleEl = this;377 var highlightObject = d3.select(highlightCapsuleEl).datum();378 var attributeName = highlightObject.displayName;379 var attributeNameInLowerCase = attributeName.toLowerCase();380 var attributeNameMatchedQuery = attributeNameInLowerCase.indexOf(searchQueryInLowerCase) != -1;381 var categoriesMatchedQuery = $(highlightCapsuleEl).hasClass('expanded');382 if (attributeNameMatchedQuery || categoriesMatchedQuery)383 $(highlightCapsuleEl).css('display', '');384 else if (!attributeNameMatchedQuery && !categoriesMatchedQuery)385 $(highlightCapsuleEl).css('display', 'none');386 });387 },388 filterTitles: function() {389 $('#setting-pane > .settings.highlight > .title').each(function() {390 var currentTitleEl = this;391 var currentEl = $(this).next()[0];392 var currentTitleHasContent = false;393 var isCurrentHighlightCapsule = $(currentEl).hasClass('highlight-capsule');394 while (isCurrentHighlightCapsule) {395 if ($(currentEl).is(':visible')) {396 currentTitleHasContent = true; break;397 }398 currentEl = $(currentEl).next()[0];399 isCurrentHighlightCapsule = $(currentEl).hasClass('highlight-capsule');400 }401 if (currentTitleHasContent) $(currentTitleEl).css('display', '');402 else if (!currentTitleHasContent) $(currentTitleEl).css('display', 'none');403 });404 },405 // helpers406 addDataToHighlightObject: function(highlightObject, attributeType, data) {407 const self = this;408 if (attributeType == 'categorical') {409 highlightObject.categories = self.shallowCopyList(data.categories);410 highlightObject.selectedCategories = self.shallowCopyList(data.categories);411 }412 else if (attributeType == 'nominal') {413 highlightObject.range = d3.extent(data.levels);414 highlightObject.selectedRange = d3.extent(data.levels);415 }416 else if (attributeType == 'numerical') {417 highlightObject.range = self.shallowCopyList(data.range);418 highlightObject.selectedRange = self.shallowCopyList(data.range);419 }420 },421 shallowCopyList: function(list) {422 var newList = [];423 for (var i = 0; i < list.length; i++)424 newList.push(list[i]);425 return newList;426 },427 generateHighlightCapsuleHTML: function(attributeName, attributeType, isChanged) {428 var typeClass = attributeType == 'categorical' ? 'fa-font' 429 : (attributeType == 'temporal' ? 'fa-chart-line' : 'fa-hashtag');430 var highlightClass = attributeType == 'categorical' ? 'list' : 'range';431 var isChangedClass = isChanged ? ' changed' : '';432 return '<div class="highlight-capsule ' + highlightClass + isChangedClass + '">' +433 '<div class="header">' +434 '<span class="fa fa-highlighter highlight-icon"></span>' +435 '<span class="fa ' + typeClass + ' type"></span>' +436 '<span class="name">' + attributeName + '</span>' +437 '<span class="far fa-square select-none-button"></span>' +438 '<span class="far fa-check-square select-all-button"></span>' +439 '<span class="far fa-caret-square-down expand-button"></span>' +440 '</div>' +441 '<div class="content"></div>' +442 '</div>';443 },444 generateCategoryHTML: function(categoryName, categoryIsChecked) {445 return '<div class="category">' +446 '<span class="round-check-box">' +447 '<input type="checkbox"' + (categoryIsChecked ? ' checked' : '') + '/>' +448 '<label></label>' +449 '</span>' +450 '<span class="name">' + categoryName + '</span>' +451 '</div>';452 },453 generateSliderHTML: function() {454 return '<span class="min-text">min</span>' +455 '<input type="text"/>' +456 '<span class="max-text">max</span>';457 },458 countDecimals: function(value) {459 if (Math.floor(value) !== value)460 return value.toString().split(".")[1].length || 0;461 return 0;462 },463 initClickListHighlightCategoryBehaviour: function(highlightContentEl) {464 $(highlightContentEl).find('.category')465 .on('click', onClickListHighlightCategory);466 function onClickListHighlightCategory() {467 var highlightCapsuleEl = highlightContentEl.parentNode;468 ListHighlight.clickCategory(highlightCapsuleEl, this); // update states469 RightColumn.update();470 }471 },472 initHoverListHighlightCategoryBehaviour: function(highlightContentEl) {473 $(highlightContentEl).find('.category')474 .unbind('mouseover').unbind('mouseout')475 .on('mouseover', onMouseoverListHighlightCategory)476 .on('mouseout', onMouseoutListHighlightCategory);477 function onMouseoverListHighlightCategory() {478 var name = d3.select(this).datum();479 SettingPaneAttributeTooltip.show(name, this);480 }481 function onMouseoutListHighlightCategory() {482 SettingPaneAttributeTooltip.hide();483 }484 }...
listHighlight.js
Source:listHighlight.js
1const ListHighlight = {2 clickSelectAll: function(highlightCapsuleEl) { // handle searching that leads to fewer categories3 const self = this;4 var highlightContentEl = $(highlightCapsuleEl).find('.content')[0];5 var highlightObject = d3.select(highlightCapsuleEl).datum();6 var allCategoryList = highlightObject.categories;7 var selectedCategoryList = highlightObject.selectedCategories;8 // check all, get new selected list, determine if is changed9 $(highlightContentEl).find('.category > .round-check-box > input').prop('checked', true);10 $(highlightContentEl).find('.category').each(function() {11 var categoryName = d3.select(this).datum();12 var categoryIsChecked = $(this).find('.round-check-box > input').prop('checked');13 if (categoryIsChecked) {14 var categoryFoundInSelectedList = selectedCategoryList.indexOf(categoryName) != -1;15 if (!categoryFoundInSelectedList) selectedCategoryList.push(categoryName);16 }17 });18 highlightObject.selectedCategories = self.copySelectedCategoriesInOrder(19 allCategoryList, selectedCategoryList20 ); // ensure order always the same21 isChanged = self.checkIfIsChanged(highlightObject);22 if (isChanged) {23 $(highlightCapsuleEl).addClass('changed');24 highlightObject.isChanged = true;25 State.addHighlightState(highlightObject);26 }27 else if (!isChanged) {28 $(highlightCapsuleEl).removeClass('changed');29 highlightObject.isChanged = false;30 State.removeHighlightState(highlightObject);31 }32 },33 clickSelectNone: function(highlightCapsuleEl) { // handle searching that leads to fewer categories34 const self = this;35 var highlightContentEl = $(highlightCapsuleEl).find('.content')[0];36 var highlightObject = d3.select(highlightCapsuleEl).datum();37 var allCategoryList = highlightObject.categories;38 var selectedCategoryList = highlightObject.selectedCategories;39 // uncheck all, get new selected list, determine if is selected40 $(highlightContentEl).find('.category > .round-check-box > input').prop('checked', false);41 $(highlightContentEl).find('.category').each(function() {42 var categoryName = d3.select(this).datum();43 var categoryIsChecked = $(this).find('.round-check-box > input').prop('checked');44 if (!categoryIsChecked) {45 var index = selectedCategoryList.indexOf(categoryName);;46 var categoryFoundInSelectedList = index != -1;47 if (categoryFoundInSelectedList) selectedCategoryList.splice(index, 1);48 }49 });50 isChanged = self.checkIfIsChanged(highlightObject);51 if (isChanged) {52 $(highlightCapsuleEl).addClass('changed');53 highlightObject.isChanged = true;54 State.addHighlightState(highlightObject);55 }56 else if (!isChanged) {57 $(highlightCapsuleEl).removeClass('changed');58 highlightObject.isChanged = false;59 State.removeHighlightState(highlightObject);60 }61 },62 clickCategory: function(highlightCapsuleEl, categoryEl) {63 const self = this;64 var needToSelect = !$(categoryEl).find('.round-check-box > input').prop('checked');65 var categoryName = d3.select(categoryEl).datum();66 var highlightObject = d3.select(highlightCapsuleEl).datum();67 var allCategoryList = highlightObject.categories;68 var selectedCategoryList = highlightObject.selectedCategories;69 var isChanged = null;70 if (needToSelect) {71 $(categoryEl).find('.round-check-box > input').prop('checked', true);72 selectedCategoryList.push(categoryName);73 highlightObject.selectedCategories = self.copySelectedCategoriesInOrder(74 allCategoryList, selectedCategoryList75 ); // ensure order always the same76 isChanged = self.checkIfIsChanged(highlightObject);77 }78 else if (!needToSelect) {79 var index = selectedCategoryList.indexOf(categoryName);80 $(categoryEl).find('.round-check-box > input').prop('checked', false);81 highlightObject.selectedCategories.splice(index, 1);82 isChanged = self.checkIfIsChanged(highlightObject);83 }84 if (isChanged) {85 $(highlightCapsuleEl).addClass('changed');86 highlightObject.isChanged = true;87 State.addHighlightState(highlightObject);88 }89 else if (!isChanged) {90 $(highlightCapsuleEl).removeClass('changed');91 highlightObject.isChanged = false;92 State.removeHighlightState(highlightObject);93 }94 },95 // helpers96 copySelectedCategoriesInOrder: function(allCategoryList, selectedCategoryList) {97 const self = this;98 var newSelectedCategoryList = [];99 for (var i = 0; i < allCategoryList.length; i++) {100 var categoryName = allCategoryList[i];101 var categoryNameFound = selectedCategoryList.indexOf(categoryName) != -1;102 if (categoryNameFound) newSelectedCategoryList.push(categoryName);103 }104 return newSelectedCategoryList;105 },106 checkIfIsChanged: function(highlightObject) {107 var allCategoryList = highlightObject.categories;108 var selectedCategoryList = highlightObject.selectedCategories;109 var selectedCategoryListHasAllCategories = true;110 for (var i = 0; i < allCategoryList.length; i++) {111 var categoryName = allCategoryList[i];112 var categoryNameFound = selectedCategoryList.indexOf(categoryName) != -1;113 if (!categoryNameFound) { selectedCategoryListHasAllCategories = false; break; }114 }115 return !selectedCategoryListHasAllCategories;116 }...
core.js
Source:core.js
1var highlightObject = {2 tags : ['p', 'li', 'span', 'em', 'a', 'strong', 'dd', 'dt', 'th', 'td'],3 excludeId : ['count'],4 option : function(obj) {5 "use strict";6 var thisOption = '<option value="';7 thisOption += obj;8 thisOption += '">';9 thisOption += obj;10 thisOption += '</option>';11 return thisOption;12 },13 menu : function(obj) {14 "use strict";15 if (highlightObject.tags.length > 0) {16 if (highlightObject.tags.length > 1) {17 highlightObject.tags.sort();18 jQuery.each(highlightObject.tags, function(k, v) {19 obj.append(highlightObject.option(v));20 });21 } else {22 obj.append(highlightObject.option(highlightObject.tags));23 }24 }25 },26 run : function(obj) {27 "use strict";28 obj.live('change', function() {29 var thisTags = highlightObject.tags.join(', ');30 $(thisTags).removeClass('fade highlight');31 var thisTag = $(this).val().toLowerCase();32 if (thisTag && typeof thisTag !== 'undefined') {33 $(thisTags).addClass('fade');34 $(thisTag).addClass('highlight');35 $('#count').text($(thisTag).length);36 } else {37 $('#count').text('0');38 }39 });40 }41};42$(function() {43 "use strict";44 highlightObject.menu($('#tag'));45 highlightObject.run($('#tag'));...
Using AI Code Generation
1import { highlightObject } from "storybook-root";2highlightObject({ a: 1, b: 2 });3import { highlightObject } from "storybook-root";4highlightObject({ a: 1, b: 2 });5import { highlightObject } from "storybook-root";6highlightObject({ a: 1, b: 2 });7import { highlightObject } from "storybook-root";8highlightObject({ a: 1, b: 2 });9import { highlightObject } from "storybook-root";10highlightObject({ a: 1, b: 2 });11import { highlightObject } from "storybook-root";12highlightObject({ a: 1, b: 2 });13import { highlightObject } from "storybook-root";14highlightObject({ a: 1, b: 2 });15import { highlightObject } from "storybook-root";16highlightObject({ a: 1, b: 2 });17import { highlightObject } from "storybook-root";18highlightObject({ a: 1, b: 2 });19import { highlightObject } from "storybook-root";20highlightObject({ a: 1, b: 2 });21import { highlightObject } from "storybook-root";22highlightObject({ a: 1, b: 2 });23import { highlightObject } from "storybook-root";24highlightObject({ a: 1, b: 2 });25import { highlightObject } from "
Using AI Code Generation
1import { highlightObject } from 'storybook-root';2highlightObject({ prop1: 'value1', prop2: 'value2' });3import { highlightObject } from 'storybook-root';4highlightObject({ prop1: 'value1', prop2: 'value2' });5import { highlightObject } from 'storybook-root';6highlightObject({ prop1: 'value1', prop2: 'value2' });7import { highlightObject } from 'storybook-root';8highlightObject({ prop1: 'value1', prop2: 'value2' });9import { highlightObject } from 'storybook-root';10highlightObject({ prop1: 'value1', prop2: 'value2' });11import { highlightObject } from 'storybook-root';12highlightObject({ prop1: 'value1', prop2: 'value2' });13import { highlightObject } from 'storybook-root';14highlightObject({ prop1: 'value1', prop2: 'value2' });15import { highlightObject } from 'storybook-root';16highlightObject({ prop1: 'value1', prop2: 'value2' });17import { highlightObject } from 'storybook-root';18highlightObject({ prop1: 'value1', prop2: 'value2' });19import { highlightObject } from 'storybook-root';20highlightObject({ prop1: 'value1', prop2: 'value2' });21import { highlightObject } from 'storybook-root';22highlightObject({ prop1: 'value1', prop2: 'value2' });
Using AI Code Generation
1import { highlightObject } from 'storybook-root'2const Test = () => (3 <button onClick={() => highlightObject('div')}>Click to Highlight</button>4import { highlightObject } from 'storybook-addon-jsx'5export { highlightObject }6import { highlightObject } from 'storybook-root'7import { configure } from '@storybook/react'8import { addDecorator } from '@storybook/react'9addDecorator(highlightObject)10configure(require.context('../src', true, /\.stories\.js$/), module)11module.exports = (baseConfig, env, config) => {12 config.module.rules.push({13 test: /\.(ts|tsx)$/,14 loader: require.resolve('ts-loader')15 })16 config.module.rules.push({17 loaders: [require.resolve('@storybook/addon-storysource/loader')],18 })19 config.resolve.extensions.push('.ts', '.tsx')20 config.resolve.alias['storybook-root'] = path.resolve(__dirname, '../src')21}22import '@storybook/addon-actions/register'23import '@storybook/addon-links/register'24import 'storybook-addon-jsx/register'
Using AI Code Generation
1import { highlightObject } from 'storybook-root';2highlightObject({name: 'value'});3import { highlightObject } from 'storybook-root';4highlightObject({name: 'value'}, 'myLabel');5import { addDecorator } from '@storybook/react';6import { withHighlight } from 'storybook-root';7addDecorator(withHighlight);8import { addDecorator } from '@storybook/react';9import { withHighlight } from 'storybook-root';10addDecorator(withHighlight('myLabel'));11import { addDecorator } from '@storybook/react';12import { withHighlight } from 'storybook-root';13addDecorator(withHighlight({label: 'myLabel', color: 'red'}));14import { addDecorator } from '@storybook/react';15import { withHighlight } from 'storybook-root';16addDecorator(withHighlight({label: 'myLabel', color: 'red', backgroundColor: 'blue'}));17import { addDecorator } from '@storybook/react';18import { withHighlight } from 'storybook-root';19addDecorator(withHighlight({label: 'myLabel', color: 'red', backgroundColor: 'blue', borderColor: 'green'}));20import { addDecorator } from '@storybook/react';21import { withHighlight } from 'storybook-root';22addDecorator(withHighlight({label: 'myLabel', color: 'red', backgroundColor: 'blue', borderColor: 'green', borderStyle: 'solid'}));23import { addDecorator } from '@storybook/react';24import { withHighlight } from 'storybook-root';25addDecorator(withHighlight({label: 'myLabel', color: 'red', backgroundColor: 'blue', borderColor: 'green', borderStyle: 'solid', padding: '10px'}));26import { addDecorator } from '@storybook/react';27import { withHighlight } from 'storybook-root';28addDecorator(withHighlight({label: 'myLabel', color: 'red', backgroundColor: 'blue', borderColor: 'green', borderStyle: 'solid', padding: '10px', margin: '20px'}));29import { addDecorator } from '@storybook/react';30import { withHighlight } from 'storybook-root
Using AI Code Generation
1import {highlightObject} from 'storybook-root';2highlightObject(1);3highlightObject(2);4highlightObject(3);5highlightObject(4);6highlightObject(5);7highlightObject(6);8highlightObject(7);9highlightObject(8);10highlightObject(9);11highlightObject(10);12highlightObject(11);13highlightObject(12);14highlightObject(13);15highlightObject(14);
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:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
