How to use selectedItem method in storybook-root

Best JavaScript code snippet using storybook-root

initEvent.js

Source:initEvent.js Github

copy

Full Screen

1import * as d3 from 'd3'2import { randomString } from '@/libs/tool'3// 操作类型4const enumActionType = {5 move: 0,6 select: 1,7 drawRect: 2,8 drawPolygon: 3,9 drawCircle: 4,10 drawEllipse: 511}12export default {13 methods: {14 /**15 * 初始化键盘事件16 */17 initKeyEvents() {18 window.addEventListener('keydown', (e) => {19 this.shiftKeyDown = e.key === 'Shift'20 })21 // 选择操作快捷键22 window.addEventListener('keyup', (e) => {23 const { key } = e24 const values = ['e', 'r', 't', 'y']25 this.shiftKeyDown = false26 if (this.activeTags.length != 1 && values.includes(key) || this.readOnly) {27 return28 }29 switch (key) {30 case 'e':31 this.actionType = enumActionType.drawPolygon32 break33 case 'r':34 this.actionType = enumActionType.drawRect35 break36 case 't':37 this.actionType = enumActionType.drawCircle38 break39 case 'y':40 this.actionType = enumActionType.drawEllipse41 break42 case 'm':43 this.actionType = enumActionType.move44 break45 case 'w':46 if (this.currentDraw && this.currentDraw.type === 'polygon') {47 this.zoom.translateBy(this.svg, 0, 10)48 }49 break50 case 's':51 if (this.currentDraw && this.currentDraw.type === 'polygon') {52 this.zoom.translateBy(this.svg, 0, -10)53 }54 break55 case 'a':56 if (this.currentDraw && this.currentDraw.type === 'polygon') {57 this.zoom.translateBy(this.svg, -10, 0)58 }59 break60 case 'd':61 if (this.currentDraw && this.currentDraw.type === 'polygon') {62 this.zoom.translateBy(this.svg, 10, 0)63 }64 break65 case 'Backspace':66 this.deleteRegionList()67 break68 case 'Delete':69 this.deleteRegionList()70 break71 default:72 break73 }74 })75 },76 /**77 * 绘制圆形、椭圆形、矩形进行时78 */79 initDragEvent() {80 d3.select('#mark-img').call(81 d382 .drag()83 .on('start', (d) => {84 if (this.actionType === enumActionType.drawRect) {85 this.currentDraw = {86 type: 'rect',87 start: {88 x: d3.event.x,89 y: d3.event.y90 },91 drag: {92 x: d3.event.x,93 y: d3.event.y94 }95 }96 }97 if (this.actionType === enumActionType.drawCircle) {98 this.currentDraw = {99 type: 'circle',100 start: {101 x: d3.event.x,102 y: d3.event.y103 },104 drag: {105 x: d3.event.x,106 y: d3.event.y107 }108 }109 }110 if (this.actionType === enumActionType.drawEllipse) {111 this.currentDraw = {112 type: 'ellipse',113 start: {114 x: d3.event.x,115 y: d3.event.y116 },117 drag: {118 x: d3.event.x,119 y: d3.event.y120 }121 }122 }123 })124 .on('drag', (d) => {125 // // 鼠标坐标126 const { dx, dy } = d3.event127 console.log(dx, dy)128 this.currentDraw.drag.x += dx129 this.currentDraw.drag.y += dy130 const {131 start: { x: startX, y: startY },132 drag: { x: endX, y: endY }133 } = this.currentDraw134 if (135 this.actionType === enumActionType.drawCircle ||136 this.actionType === enumActionType.drawEllipse137 ) {138 this.currentDraw.drag.dx = Math.abs(endX - startX)139 this.currentDraw.drag.dy = Math.abs(endY - startY)140 }141 })142 .on('end', (d) => {143 const {144 start: { x: startX, y: startY },145 drag: { x: endX, y: endY }146 } = this.currentDraw147 const id = randomString(8)148 const tagValue = this.activeTags[0]149 if (startX === endX || startY === endY) {150 this.currentDraw = null151 return152 }153 const width = Math.abs(endX - startX)154 const height = Math.abs(endY - startY)155 this.currentDraw.drag.dx = width156 this.currentDraw.drag.dy = height157 if (this.actionType === enumActionType.drawRect) {158 this.regionList = [159 ...this.regionList,160 {161 id,162 type: 'rect',163 x: Math.min(startX, endX),164 y: Math.min(startY, endY),165 width: width < 10 ? 10 : width,166 height: height < 10 ? 10 : height,167 opacity: 0.8,168 tags: this.isMultiple ? [...this.activeTags] : tagValue169 }170 ]171 this.currentDraw = null172 this.selectedItem = this.regionList[this.regionList.length - 1]173 this.selectedItemIdArr.push(id)174 this.rectLimit()175 this.$nextTick(() => {176 this.initRectDragEvent()177 this.initPointsDragEvent()178 })179 }180 if (this.actionType === enumActionType.drawCircle) {181 this.regionList = [182 ...this.regionList,183 {184 id,185 type: 'circle',186 cx: startX,187 cy: startY,188 r: Math.hypot(width, height),189 opacity: 0.8,190 tags: this.isMultiple ? [...this.activeTags] : tagValue191 }192 ]193 this.currentDraw = null194 this.selectedItem = this.regionList[this.regionList.length - 1]195 this.selectedItemIdArr.push(id)196 this.circleLimit()197 this.$nextTick(() => {198 this.initCircleDragEvent()199 this.initCirclePointsDragEvent()200 })201 }202 if (this.actionType === enumActionType.drawEllipse) {203 this.regionList = [204 ...this.regionList,205 {206 id,207 type: 'ellipse',208 cx: startX,209 cy: startY,210 rx: width,211 ry: height,212 opacity: 0.8,213 tags: this.isMultiple ? [...this.activeTags] : tagValue214 }215 ]216 this.currentDraw = null217 this.selectedItem = this.regionList[this.regionList.length - 1]218 this.selectedItemIdArr.push(id)219 this.ellipseLimit()220 this.$nextTick(() => {221 this.initEllipseDragEvent()222 this.initEllipsePointsDragEvent()223 })224 }225 })226 .filter(227 (e) =>228 (this.actionType === enumActionType.drawRect ||229 this.actionType === enumActionType.drawCircle ||230 this.actionType === enumActionType.drawEllipse) &&231 !this.readOnly &&232 !window.event.ctrlKey &&233 !window.event.metaKey234 )235 )236 },237 initRectDragEvent() {238 d3.selectAll('rect.rect').call(239 d3240 .drag()241 .on('start', (e) => {242 d3.event.sourceEvent.stopPropagation()243 // this.selectedItem = this.regionList.find(item => item.id === d3.event.sourceEvent.target.id)244 })245 .on('drag', (e) => {246 d3.event.sourceEvent.stopPropagation()247 const { dx, dy } = d3.event248 this.selectedItem.x += dx249 this.selectedItem.y += dy250 this.rectLimit()251 })252 .on('end', (e) => {253 d3.event.sourceEvent.stopPropagation()254 })255 .filter((e) => !this.readOnly)256 )257 },258 initCircleDragEvent() {259 d3.selectAll('#circle').call(260 d3261 .drag()262 .on('start', (e) => {263 d3.event.sourceEvent.stopPropagation()264 // this.selectedItem = this.regionList.find(item => item.id === d3.event.sourceEvent.target.id)265 })266 .on('drag', (e) => {267 d3.event.sourceEvent.stopPropagation()268 const { dx, dy } = d3.event269 this.selectedItem.cx += dx270 this.selectedItem.cy += dy271 this.circleLimit()272 })273 .on('end', (e) => {274 d3.event.sourceEvent.stopPropagation()275 })276 .filter((e) => !this.readOnly)277 )278 },279 rectLimit() {280 if (this.selectedItem.x <= 0) {281 this.selectedItem.x = 0282 }283 if (this.selectedItem.y <= 0) {284 this.selectedItem.y = 0285 }286 if (this.selectedItem.width > this.width) {287 this.selectedItem.width = this.width288 }289 if (this.selectedItem.height > this.height) {290 this.selectedItem.height = this.height291 }292 if (this.selectedItem.x + this.selectedItem.width >= this.width) {293 this.selectedItem.x = this.width - this.selectedItem.width294 }295 if (this.selectedItem.y + this.selectedItem.height >= this.height) {296 this.selectedItem.y = this.height - this.selectedItem.height297 }298 },299 circleLimit() {300 const min = this.width < this.height ? this.width / 2 : this.height / 2301 if (this.selectedItem.r > min) {302 this.selectedItem.r = min303 this.selectedItem.cx = min304 this.selectedItem.cy = min305 }306 if (this.selectedItem.cx - this.selectedItem.r < 0) {307 this.selectedItem.cx = this.selectedItem.r308 }309 if (this.selectedItem.cy - this.selectedItem.r < 0) {310 this.selectedItem.cy = this.selectedItem.r311 }312 if (this.selectedItem.cx + this.selectedItem.r > this.width) {313 this.selectedItem.cx = this.width - this.selectedItem.r314 }315 if (this.selectedItem.cy + this.selectedItem.r > this.height) {316 this.selectedItem.cy = this.height - this.selectedItem.r317 }318 },319 ellipseLimit() {320 if (this.selectedItem.rx > this.width / 2) {321 this.selectedItem.rx = this.width / 2322 this.selectedItem.cx = this.width / 2323 }324 if (this.selectedItem.ry > this.height / 2) {325 this.selectedItem.rx = this.height / 2326 this.selectedItem.cx = this.height / 2327 }328 if (this.selectedItem.cx - this.selectedItem.rx < 0) {329 this.selectedItem.cx = this.selectedItem.rx330 }331 if (this.selectedItem.cy - this.selectedItem.ry < 0) {332 this.selectedItem.cy = this.selectedItem.ry333 }334 if (this.selectedItem.cx + this.selectedItem.rx > this.width) {335 this.selectedItem.cx = this.width - this.selectedItem.rx336 }337 if (this.selectedItem.cy + this.selectedItem.ry > this.height) {338 this.selectedItem.cy = this.height - this.selectedItem.ry339 }340 },341 initEllipseDragEvent() {342 d3.selectAll('#ellipse').call(343 d3344 .drag()345 .on('start', (e) => {346 d3.event.sourceEvent.stopPropagation()347 // this.selectedItem = this.regionList.find(item => item.id === d3.event.sourceEvent.target.id)348 })349 .on('drag', (e) => {350 d3.event.sourceEvent.stopPropagation()351 const { dx, dy } = d3.event352 this.selectedItem.cx += dx353 this.selectedItem.cy += dy354 this.ellipseLimit()355 })356 .on('end', (e) => {357 d3.event.sourceEvent.stopPropagation()358 })359 .filter((e) => !this.readOnly)360 )361 },362 initPolygonDragEvent() {363 d3.selectAll('polygon.polygon').call(364 d3365 .drag()366 .on('start', (e) => {367 d3.event.sourceEvent.stopPropagation()368 // this.selectedItem = this.regionList.find(item => item.id === d3.event.sourceEvent.target.id)369 })370 .on('drag', (e) => {371 d3.event.sourceEvent.stopPropagation()372 const { dx, dy } = d3.event373 const length = this.selectedItem.points.length374 let xMove = true375 let yMove = true376 for (let i = 0; i < length; i++) {377 const { x, y } = this.selectedItem.points[i]378 if (x + dx < 0 || x + dx > this.width) {379 xMove = false380 }381 if (y + dy < 0 || y + dy > this.height) {382 yMove = false383 }384 }385 this.selectedItem.points = this.selectedItem.points.map(386 ({ x, y, ...other }) => ({387 x: xMove ? x + dx : x,388 y: yMove ? y + dy : y,389 ...other390 })391 )392 })393 .on('end', (e) => {394 d3.event.sourceEvent.stopPropagation()395 })396 .filter((e) => !this.readOnly)397 )398 },399 initPointsDragEvent() {400 let pointDirection = ''401 let pointIndex = ''402 let pointId = ''403 d3.selectAll('.point-rect').call(404 d3405 .drag()406 .on('start', (d) => {407 pointDirection = d3.event.sourceEvent.target.getAttribute(408 'data-point-action-type'409 )410 pointId = d3.event.sourceEvent.target.getAttribute(411 'data-point-id'412 )413 this.selectedItem = this.regionList.find((item) => item.id === pointId)414 pointIndex = d3.event.sourceEvent.target.getAttribute('data-index')415 d3.event.sourceEvent.stopPropagation()416 })417 .on('drag', (d) => {418 d3.event.sourceEvent.stopPropagation()419 const { dx, dy } = d3.event420 const { x, y, width, height } = this.selectedItem421 switch (pointDirection) {422 case 'tl':423 if (width >= 10 && height >= 10) {424 this.selectedItem.x += dx425 this.selectedItem.y += dy426 this.selectedItem.width -= dx427 this.selectedItem.height -= dy428 }429 if (width < 10 && dx < 0) {430 this.selectedItem.x += dx431 this.selectedItem.width -= dx432 }433 if (height < 10 && dy < 0) {434 this.selectedItem.y += dy435 this.selectedItem.height -= dy436 }437 if (width < 5) {438 this.selectedItem.width = 5439 }440 if (height < 5) {441 this.selectedItem.height = 5442 }443 break444 case 'tm':445 if (height >= 10 || (height < 10 && dy < 0)) {446 this.selectedItem.y += dy447 this.selectedItem.height -= dy448 }449 if (height < 5) {450 this.selectedItem.height = 5451 }452 break453 case 'tr':454 if (width >= 10 && height >= 10) {455 this.selectedItem.y += dy456 this.selectedItem.height -= dy457 this.selectedItem.width += dx458 }459 if (width < 10) {460 this.selectedItem.width = 10461 }462 if (height < 10 && dy < 0) {463 this.selectedItem.y += dy464 this.selectedItem.height -= dy465 }466 if (height < 5) {467 this.selectedItem.height = 5468 }469 break470 case 'ml':471 if (width >= 10 || (width < 10 && dx < 0)) {472 this.selectedItem.x += dx473 this.selectedItem.width -= dx474 }475 if (width < 5) {476 this.selectedItem.width = 5477 }478 break479 case 'mr':480 if (width >= 10 || (width < 10 && dx < 0)) {481 this.selectedItem.width += dx482 }483 if (width < 10) {484 this.selectedItem.width = 10485 }486 break487 case 'bl':488 if (width >= 10 && height >= 10) {489 this.selectedItem.x += dx490 this.selectedItem.height += dy491 this.selectedItem.width -= dx492 }493 if (height < 10) {494 this.selectedItem.height = 10495 }496 if (width < 10 && dx < 0) {497 this.selectedItem.x += dx498 this.selectedItem.width -= dx499 }500 if (width < 5) {501 this.selectedItem.width = 5502 }503 break504 case 'bm':505 if (height >= 10 || (height < 10 && dy > 0)) {506 this.selectedItem.height += dy507 }508 if (height < 5) {509 this.selectedItem.height = 5510 }511 break512 case 'br':513 if (width >= 10 && height >= 10) {514 this.selectedItem.width += dx515 this.selectedItem.height += dy516 }517 if (width < 10) {518 this.selectedItem.width = 10519 }520 if (height < 10) {521 this.selectedItem.height = 10522 }523 break524 case 'polygon':525 const point = this.selectedItem.points[pointIndex]526 point.x += dx527 point.y += dy528 console.log(point)529 if (point.x <= 0) {530 point.x = 0531 }532 if (point.y <= 0) {533 point.y = 0534 }535 if (point.x >= this.width) {536 point.x = this.width537 }538 if (point.y >= this.height) {539 point.y = this.height540 }541 break542 default:543 break544 }545 })546 .on('end', (d) => {547 d3.event.sourceEvent.stopPropagation()548 this.selectedItem.type === 'rect' && this.rectLimit()549 })550 .filter((e) => !this.readOnly)551 )552 },553 initPolygonPointsDragEvent() {554 let pointIndex = ''555 let pointId = ''556 d3.selectAll('.point-polygon').call(557 d3558 .drag()559 .on('start', (d) => {560 pointId = d3.event.sourceEvent.target.getAttribute(561 'data-point-id'562 )563 this.selectedItem = this.regionList.find((item) => item.id === pointId)564 pointIndex = d3.event.sourceEvent.target.getAttribute('data-index')565 d3.event.sourceEvent.stopPropagation()566 })567 .on('drag', (d) => {568 d3.event.sourceEvent.stopPropagation()569 const { dx, dy } = d3.event570 const point = this.selectedItem.points[pointIndex]571 point.x += dx572 point.y += dy573 if (point.x <= 0) {574 point.x = 0575 }576 if (point.y <= 0) {577 point.y = 0578 }579 if (point.x >= this.width) {580 point.x = this.width581 }582 if (point.y >= this.height) {583 point.y = this.height584 }585 })586 .on('end', (d) => {587 d3.event.sourceEvent.stopPropagation()588 })589 .filter((e) => !this.readOnly)590 )591 },592 initCirclePointsDragEvent() {593 let pointDirection = ''594 let pointIndex = ''595 let pointId = ''596 d3.selectAll('.point-circle').call(597 d3598 .drag()599 .on('start', (d) => {600 pointDirection = d3.event.sourceEvent.target.getAttribute(601 'data-point-action-type'602 )603 pointIndex = d3.event.sourceEvent.target.getAttribute('data-index')604 pointId = d3.event.sourceEvent.target.getAttribute(605 'data-point-id'606 )607 this.selectedItem = this.regionList.find((item) => item.id === pointId)608 d3.event.sourceEvent.stopPropagation()609 })610 .on('drag', (d) => {611 d3.event.sourceEvent.stopPropagation()612 const { dx, dy } = d3.event613 switch (pointDirection) {614 case 'tm':615 this.selectedItem.r = this.selectedItem.r - dy >= 0 ? this.selectedItem.r - dy : this.selectedItem.r616 break617 case 'ml':618 this.selectedItem.r = this.selectedItem.r - dx >= 0 ? this.selectedItem.r - dx : this.selectedItem.r619 break620 case 'mr':621 this.selectedItem.r = this.selectedItem.r + dx >= 0 ? this.selectedItem.r + dx : this.selectedItem.r622 break623 case 'bm':624 this.selectedItem.r = this.selectedItem.r + dy >= 0 ? this.selectedItem.r + dy : this.selectedItem.r625 break626 default:627 break628 }629 })630 .on('end', (d) => {631 d3.event.sourceEvent.stopPropagation()632 this.selectedItem.type === 'circle' && this.circleLimit()633 })634 .filter((e) => !this.readOnly)635 )636 },637 initEllipsePointsDragEvent() {638 let pointDirection = ''639 let pointIndex = ''640 let pointId = ''641 d3.selectAll('.point-ellipse').call(642 d3643 .drag()644 .on('start', (d) => {645 pointDirection = d3.event.sourceEvent.target.getAttribute(646 'data-point-action-type'647 )648 pointIndex = d3.event.sourceEvent.target.getAttribute('data-index')649 pointId = d3.event.sourceEvent.target.getAttribute(650 'data-point-id'651 )652 this.selectedItem = this.regionList.find((item) => item.id === pointId)653 console.log(this.selectedItem)654 d3.event.sourceEvent.stopPropagation()655 })656 .on('drag', (d) => {657 d3.event.sourceEvent.stopPropagation()658 const { dx, dy } = d3.event659 switch (pointDirection) {660 case 'tm':661 this.selectedItem.ry = this.selectedItem.ry - dy >= 0 ? this.selectedItem.ry - dy : this.selectedItem.ry662 break663 case 'ml':664 this.selectedItem.rx = this.selectedItem.rx - dx >= 0 ? this.selectedItem.rx - dx : this.selectedItem.rx665 break666 case 'mr':667 this.selectedItem.rx = this.selectedItem.rx + dx >= 0 ? this.selectedItem.rx + dx : this.selectedItem.rx668 break669 case 'bm':670 this.selectedItem.ry = this.selectedItem.ry + dy >= 0 ? this.selectedItem.ry + dy : this.selectedItem.ry671 break672 default:673 break674 }675 })676 .on('end', (d) => {677 d3.event.sourceEvent.stopPropagation()678 this.selectedItem.type === 'ellipse' && this.ellipseLimit()679 })680 .filter((e) => !this.readOnly)681 )682 }683 }...

Full Screen

Full Screen

menuController.js

Source:menuController.js Github

copy

Full Screen

1/*2 * ***************************************************************************3 * Copyright (c) 2010 Qcadoo Limited4 * Project: Qcadoo Framework5 * Version: 1.46 *7 * This file is part of Qcadoo.8 *9 * Qcadoo is free software; you can redistribute it and/or modify10 * it under the terms of the GNU Affero General Public License as published11 * by the Free Software Foundation; either version 3 of the License,12 * or (at your option) any later version.13 *14 * This program is distributed in the hope that it will be useful,15 * but WITHOUT ANY WARRANTY; without even the implied warranty16 * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.17 * See the GNU Affero General Public License for more details.18 *19 * You should have received a copy of the GNU Affero General Public License20 * along with this program; if not, write to the Free Software21 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA22 * ***************************************************************************23 */24var QCD = QCD || {};25QCD.menu = QCD.menu || {};26QCD.menu.MenuController = function(menuStructure, windowController) {27 if (!(this instanceof QCD.menu.MenuController)) {28 return new QCD.menu.MenuController(menuStructure, windowController);29 }30 var that = this;31 var firstLevelElement = $(".headerMenuRowMain");32 var secondLevelElement = $(".headerMenuRowSub");33 var previousActive = {};34 previousActive.first = null;35 previousActive.second = null;36 var currentActive = {};37 currentActive.first = null;38 currentActive.second = null;39 var model = {};40 function constructor() {41 createMenu(menuStructure);42 if (model.selectedItem) {43 previousActive.first = model.selectedItem;44 model.selectedItem.element.addClass("path");45 previousActive.second = model.selectedItem.selectedItem;46 }47 //48 // updateState();49 // updateTopButtons();50 if (model.selectedItem && model.selectedItem.selectedItem) {51 fillCurrentPage();52 that.setPageTitle();53 changePage(model.selectedItem.selectedItem.page);54 } else {55 changePage("noDashboard.html");56 }57 }58 this.updateMenu = function() {59 var selectedFirstName = model.selectedItem.name;60 var selectedSecondName = model.selectedItem.selectedItem.name;61 $62 .ajax({63 url : "/menu.html",64 type : 'GET',65 dataType : 'text',66 contentType : 'plain/text; charset=utf-8',67 complete : function(XMLHttpRequest, textStatus) {68 if (XMLHttpRequest.status == 200) {69 var responseText = $70 .trim(XMLHttpRequest.responseText);71 if (responseText == "sessionExpired") {72 return;73 }74 if (responseText.substring(0, 20) == "<![CDATA[ERROR PAGE:") {75 return;76 }77 if (responseText != "") {78 var response = JSON.parse(responseText);79 //$(".mainMenu").children().remove();80 //secondLevelElement.children().remove();81 //createMenu(response);82 model.selectedItem = model.itemsMap[selectedFirstName];83 model.selectedItem.selectedItem = model.selectedItem.itemsMap[selectedSecondName];84 // updateState();85 }86 // updateTopButtons();87 }88 }89 });90 };91 function updateTopButtons() {92 if (that.hasMenuPosition("administration.profile")) {93 $("#profileButton").show();94 } else {95 $("#profileButton").hide();96 }97 }98 function createMenu(menuStructure) {99 model = new QCD.menu.MenuModel(menuStructure);100 var menuContentElement = $(".mainMenu");//.addClass("q_row1");101 var itemsLen = model.items.length, i, item, firstLevelButton;102 for (i = 0; i < itemsLen; i++) {103 item = model.items[i];104 firstLevelButton = $("<li>").html(105 "<a class='not-active' href='menu-" + item.name + "'>"106 + item.label + "</a>").attr("id",107 "firstLevelButton_" + item.name);108 if (item.description) {109 firstLevelButton.attr("title", item.description);110 }111 if (item.type == QCD.menu.MenuModel.HOME_CATEGORY) {112 firstLevelButton.hide();113 }114 menuContentElement.append(firstLevelButton);115 var secondItemsLen = item.items.length, j, secondLevelItem, secondLevelButton;116 var secondMenuContentElement = $("<div>").attr("id",117 "menu-" + item.name);118 secondMenuContentElement.addClass("subMenuBox");119 secondMenuContentElement.addClass("subMenuBoxLiveSearch");120 var secondLevelContent = $("<ul>").addClass("subMenu").attr("id",121 "list-" + item.name);122 for (j = 0; j < secondItemsLen; j++) {123 secondLevelItem = item.items[j];124 secondLevelButton = $("<li>").html(125 "<a href='#'><span>" + secondLevelItem.label126 + "</span></a>").attr("id",127 "secondLevelButton_" + secondLevelItem.name);128 if (secondLevelItem.description) {129 secondLevelButton130 .attr("title", secondLevelItem.description);131 }132 secondLevelButton.appendTo(secondLevelContent);133 secondLevelItem.element = secondLevelButton;134 secondLevelButton.click(function() {135 onBottomItemClick($(this));136 });137 if (item.type == QCD.menu.MenuModel.HOME_CATEGORY) {138 secondLevelButton.hide();139 }140 secondLevelContent.appendTo(secondMenuContentElement);141 secondMenuContentElement.appendTo(secondLevelElement);142 }143 item.element = firstLevelButton;144 }145 var searchBoxEmpty = $("<div>")146 .html(147 "<i class='icon iconInfo'></i><div>Brak elementów pasujących<br />do zapytania</div>")148 .attr("id", "emptySearchResult");149 searchBoxEmpty.addClass("subMenuBox");150 searchBoxEmpty.appendTo(secondLevelElement);151 var searchBoxTooMany = $("<div>")152 .html(153 "<i class='icon iconInfo'></i><div>Znaleziono zbyt wiele<br />wyników</div>")154 .attr("id", "tooManySearchResult");155 searchBoxTooMany.addClass("subMenuBox");156 searchBoxTooMany.appendTo(secondLevelElement);157 var searchBoxResult = $("<div>").html("<ul class='subMenu'></ul>")158 .attr("id", "searchResult");159 searchBoxResult.addClass("subMenuBox");160 searchBoxResult.appendTo(secondLevelElement);161 menuContentElement.menuAim({162 activate : activateSubmenu,163 deactivate : deactivateSubmenu164 });165 // ************ lazy menu show item166 function activateSubmenu(row) {167 deactivateSubmenu($('.maintainHover', menuContentElement).parent());168 var $row = $(row);169 $row.find("a").addClass("maintainHover");170 var target = $row.find("a").attr('href');171 $("#" + target).show();172 onTopItemClick(row);173 }174 // ************ lazy menu hide item175 function deactivateSubmenu(row) {176 $('.subMenu .maintainHover').removeClass('maintainHover');177 var $row = $(row);178 $row.find("a").removeClass("maintainHover");179 var target = $row.find("a").attr('href');180 $("#" + target).hide();181 }182 }183 function onTopItemClick(itemElement) {184 // itemElement.children().blur();185 itemElement = $(itemElement);186 var buttonName = itemElement.attr("id").substring(17);187 model.selectedItem = model.itemsMap[buttonName];188 if (model.selectedItem.selectedItem) {189 currentActive.second = model.selectedItem.selectedItem190 }191 // updateState();192 }193 function onBottomItemClick(itemElement) {194 // itemElement.children().blur();195 if (!canChangePage()) {196 return;197 }198 var buttonName = itemElement.attr("id").substring(18);199 model.selectedItem.selectedItem = model.selectedItem.itemsMap[buttonName];200 previousActive.first.element.removeClass("path");201 previousActive.first = model.selectedItem;202 previousActive.second = model.selectedItem.selectedItem;203 previousActive.first.element.addClass("path");204 //updateState();205 $('.subMenu .currentActive').removeClass('currentActive');206 itemElement.find('a').addClass('currentActive');207 $('.mainMenu .currentMainActive').removeClass('currentMainActive');208 $('.mainMenu .maintainHover').addClass('currentMainActive');209 $('.userMenuBackdoor').click();210 changeTitle(itemElement);211 fillCurrentPage();212 changePage(model.selectedItem.selectedItem.page);213 }214 this.activateMenuPosition = function(position) {215 var menuParts = position.split(".");216 var topItem = model.itemsMap[menuParts[0]];217 var bottomItem;218 if (topItem) {219 if (menuParts[1] && menuParts[1].indexOf(menuParts[0] + "_") != 0) {220 bottomItem = topItem.itemsMap[menuParts[0] + "_" + menuParts[1]];221 } else if (menuParts[1]) {222 bottomItem = topItem.itemsMap[menuParts[1]];223 }224 }225 if (bottomItem) {226 $('.subMenu .currentActive').removeClass('currentActive');227 bottomItem.element.find('a').addClass('currentActive');228 }229 if (topItem) {230 $('.mainMenu .maintainHover').removeClass('maintainHover');231 $('.mainMenu .currentMainActive').removeClass('currentMainActive');232 topItem.element.find("a").addClass("maintainHover");233 topItem.element.find("a").addClass("currentMainActive");234 }235 if (topItem && bottomItem) {236 model.selectedItem.element.removeClass("path");237 topItem.selectedItem = bottomItem;238 previousActive.first = topItem;239 previousActive.second = bottomItem;240 model.selectedItem = topItem;241 model.selectedItem.selectedItem = bottomItem;242 if (model.selectedItem && model.selectedItem.selectedItem) {243 changeTitle(model.selectedItem.selectedItem.element);244 }245 fillCurrentPage();246 updateState();247 }248 };249 this.getCurrentActive = function() {250 return currentActive;251 };252 this.goToMenuPosition = function(position) {253 this.activateMenuPosition(position);254 if (model.selectedItem && model.selectedItem.selectedItem) {255 changePage(model.selectedItem.selectedItem.page);256 }257 };258 this.hasMenuPosition = function(position) {259 var menuParts = position.split(".");260 var topItem = model.itemsMap[menuParts[0]];261 if (topItem == null) {262 return false;263 }264 var bottomItem = topItem.itemsMap[menuParts[0] + "_" + menuParts[1]];265 return bottomItem != null;266 };267 this.restoreState = function() {268 model.selectedItem = previousActive.first;269 if (previousActive.second) {270 model.selectedItem.selectedItem = previousActive.second;271 }272 //updateState();273 };274 function updateState() {275 if (currentActive.first != model.selectedItem) {276 if (currentActive.first) {277 currentActive.first.element.removeClass("activ");278 currentActive.first.selectedItem = null;279 }280 currentActive.first = model.selectedItem;281 currentActive.first.element.addClass("activ");282 //updateSecondLevel();283 } else if (model.selectedItem) {284 if (currentActive.second != model.selectedItem.selectedItem) {285 if (currentActive.second) {286 currentActive.second.element.removeClass("activ");287 }288 currentActive.second = model.selectedItem.selectedItem;289 if (currentActive.second) {290 currentActive.second.element.addClass("activ");291 }292 }293 }294 }295 function changePage(page) {296 windowController.onMenuClicked(page);297 }298 function canChangePage() {299 return windowController.canChangePage();300 }301 function changeTitle(itemElement) {302 var indexOfDash = window.parent.document.title.indexOf("-");303 var actualTitle = window.parent.document.title;304 var title;305 if (itemElement.context) {306 title = itemElement.context.textContent;307 } else if (model.selectedItem && model.selectedItem.selectedItem) {308 title = model.selectedItem.selectedItem.label;309 }310 if (title !== undefined) {311 window.parent.document.title = (indexOfDash == -1312 ? actualTitle313 : actualTitle.substr(0, indexOfDash - 1))314 + " - " + title;315 } else {316 window.parent.document.title = (indexOfDash == -1317 ? actualTitle318 : actualTitle.substr(0, indexOfDash - 1));319 }320 }321 function fillCurrentPage() {322 var container = $(".pageTitle");323 if (model.selectedItem && model.selectedItem.selectedItem) {324 container.children().remove();325 var category = $("<span>").html(model.selectedItem.label).addClass(326 "category");327 category.appendTo(container);328 var currentPage = $("<h1>" + model.selectedItem.selectedItem.label329 + "</h1>");330 currentPage.appendTo(container);331 }332 };333 this.fillBreadCrumbs = function() {334 fillCurrentPage();335 }336 this.setPageTitle = function() {337 var indexOfDash = window.parent.document.title.indexOf("-");338 var actualTitle = window.parent.document.title;339 var title;340 if (model.selectedItem && model.selectedItem.selectedItem) {341 title = model.selectedItem.selectedItem.label;342 }343 if (title !== undefined) {344 window.parent.document.title = (indexOfDash == -1345 ? actualTitle346 : actualTitle.substr(0, indexOfDash - 1))347 + " - " + title;348 } else {349 window.parent.document.title = (indexOfDash == -1350 ? actualTitle351 : actualTitle.substr(0, indexOfDash - 1));352 }353 }354 constructor();...

Full Screen

Full Screen

re-page-detail.js

Source:re-page-detail.js Github

copy

Full Screen

1/**2 * @license3 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.4 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt5 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt6 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt7 * Code distributed by Google as part of the polymer project is also8 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt9 */10import './../bower_components/polymer/polymer-element.html';11import {connect} from './redux-helpers.js';12import {13 listings,14 getSelectedItem15} from './redux-reducer-listings.js';16store.addReducers({listings});17 18class RePageDetail extends Polymer.Element {19 static get is() { return 're-page-detail'; }20 static get template() { return `21 <style>22 :host {23 display: block;24 padding: 10px 20px;25 }26 .card {27 margin: auto;28 max-width: 800px29 }30 h1.title {31 display: flex;32 }33 h1.title span:first-child {34 flex: 1;35 }36 img.main {37 width: 100%;38 max-height: 400px;39 }40 </style>41 <div class="card">42 <h1 class="title">43 <span>[[selectedItem.address]]</span>44 <span>[[currency(selectedItem.price)]]</span>45 </h1>46 <p>[[selectedItem.bedrooms]] bed / [[selectedItem.bathrooms]] bath, [[selectedItem.size]] sqft [[selectedItem.type]] in [[selectedItem.city]], [[selectedItem.state]]</p>47 <img class="main" src="[[selectedItem.photos.0]]">48 <h3>Overview:</h3>49 <p>[[selectedItem.description]]</p>50 <h3>Details:</h3>51 <ul>52 <li>Type: [[selectedItem.type]]</li>53 <li>HOA Dues: [[selectedItem.hoaDues]]</li>54 <li>Bedrooms: [[selectedItem.bedrooms]]</li>55 <li>Bathrooms: [[selectedItem.bathrooms]]</li>56 <li>Size: [[selectedItem.size]] sqft</li>57 <li>Year built: [[selectedItem.yearBuilt]]</li>58 <li>Parking spaces: [[selectedItem.parking]]</li>59 <li>Address: [[selectedItem.address]], [[selectedItem.city]], [[selectedItem.state]] [[selectedItem.zip]]</li>60 <li>Listed: [[selectedItem.listed]]</li>61 </ul>62 </div>`;63 }64}65const ConnectedRePageDetail = connect(store, class extends RePageDetail {66 currency(val) {67 return '$' + val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");68 }69 _mapStateToProps(state) {70 return {71 selectedItem: getSelectedItem(state)72 }73 }74});...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var storybookRoot = require('storybook-root');2storybookRoot.selectedItem('item1', function (err, result) {3});4var storybookRoot = require('storybook-root');5storybookRoot.selectedItem('item1', function (err, result) {6});7var storybookRoot = require('storybook-root');8storybookRoot.selectedItem('item1', function (err, result) {9});10var storybookRoot = require('storybook-root');11storybookRoot.selectedItem('item1', function (err, result) {12});13var storybookRoot = require('storybook-root');14storybookRoot.selectedItem('item1', function (err, result) {15});16var storybookRoot = require('storybook-root');17storybookRoot.selectedItem('item1', function (err, result) {18});19var storybookRoot = require('storybook-root');20storybookRoot.selectedItem('item1', function (err, result) {21});22var storybookRoot = require('storybook-root');23storybookRoot.selectedItem('item1', function (err, result) {24});25var storybookRoot = require('storybook-root');26storybookRoot.selectedItem('item1', function (err, result) {27});28var storybookRoot = require('storybook-root');29storybookRoot.selectedItem('item1', function (err, result) {30});31var storybookRoot = require('storybook-root');32storybookRoot.selectedItem('item1', function (err, result) {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var root = document.querySelector('storybook-root');2root.selectedItem = "my story";3root.selectedItem = "my story 2";4root.selectedItem = "my story 3";5var root = document.querySelector('storybook-root');6root.selectedItem = "my story";7root.selectedItem = "my story 2";8root.selectedItem = "my story 3";9var root = document.querySelector('storybook-root');10root.selectedItem = "my story";11root.selectedItem = "my story 2";12root.selectedItem = "my story 3";13var root = document.querySelector('storybook-root');14root.selectedItem = "my story";15root.selectedItem = "my story 2";16root.selectedItem = "my story 3";17var root = document.querySelector('storybook-root');18root.selectedItem = "my story";19root.selectedItem = "my story 2";20root.selectedItem = "my story 3";21var root = document.querySelector('storybook-root');22root.selectedItem = "my story";23root.selectedItem = "my story 2";24root.selectedItem = "my story 3";25var root = document.querySelector('storybook-root');26root.selectedItem = "my story";27root.selectedItem = "my story 2";28root.selectedItem = "my story 3";29var root = document.querySelector('storybook-root');30root.selectedItem = "my story";31root.selectedItem = "my story 2";32root.selectedItem = "my story 3";33var root = document.querySelector('storybook-root');34root.selectedItem = "my story";35root.selectedItem = "my story 2";36root.selectedItem = "my story 3";37var root = document.querySelector('storybook-root');38root.selectedItem = "my story";39root.selectedItem = "my story 2";40root.selectedItem = "my story 3";41var root = document.querySelector('storybook-root');42root.selectedItem = "my story";

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {root} from 'storybook-root';2root.selectedItem().then(console.log);3export const root = {4 selectedItem: () => {5 return new Promise((resolve, reject) => {6 resolve(selectedItem);7 });8 }9};10export const root = {11 selectedItem: () => {12 return new Promise((resolve, reject) => {13 resolve(selectedItem);14 });15 }16};17export const root = {18 selectedItem: () => {19 return new Promise((resolve, reject) => {20 resolve(selectedItem);21 });22 }23};24export const root = {25 selectedItem: () => {26 return new Promise((resolve, reject) => {27 resolve(selectedItem);28 });29 }30};31export const root = {32 selectedItem: () => {33 return new Promise((resolve, reject) => {34 resolve(selectedItem);35 });36 }37};38export const root = {39 selectedItem: () => {40 return new Promise((resolve, reject) => {41 resolve(selectedItem);42 });43 }44};45export const root = {46 selectedItem: () => {47 return new Promise((resolve, reject) => {48 resolve(selectedItem);49 });50 }51};52export const root = {53 selectedItem: () => {54 return new Promise((resolve, reject) => {55 resolve(selectedItem);56 });57 }58};59export const root = {60 selectedItem: () => {61 return new Promise((resolve, reject) => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var storybook = require('storybook-root');2storybook.selectedItem('MyStory');3var storybook = require('storybook-root');4storybook.selectedItem('MyStory');5var storybook = require('storybook-root');6storybook.selectedItem('MyStory');7var storybook = require('storybook-root');8storybook.selectedItem('MyStory');9var storybook = require('storybook-root');10storybook.selectedItem('MyStory');11var storybook = require('storybook-root');12storybook.selectedItem('MyStory');13var storybook = require('storybook-root');14storybook.selectedItem('MyStory');15var storybook = require('storybook-root');16storybook.selectedItem('MyStory');17var storybook = require('storybook-root');18storybook.selectedItem('MyStory');19var storybook = require('storybook-root');20storybook.selectedItem('MyStory');21var storybook = require('storybook-root');22storybook.selectedItem('MyStory');23var storybook = require('storybook-root');24storybook.selectedItem('MyStory');25var storybook = require('storybook-root');26storybook.selectedItem('MyStory');27var storybook = require('storybook-root');28storybook.selectedItem('MyStory');29var storybook = require('storybook-root');30storybook.selectedItem('MyStory');31var storybook = require('storybook-root');32storybook.selectedItem('MyStory');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {selectedItem} from "storybook-root";2selectedItem("Hello World");3export function selectedItem(value) {4 return value;5}6 at StorybookViewport._this._onSelectViewport (preview.js:1)7 at onChange (preview.js:1)8 at HTMLUnknownElement.callCallback (react-dom.development.js:188)9 at Object.invokeGuardedCallbackDev (react-dom.development.js:237)10 at invokeGuardedCallback (react-dom.development.js:292)11 at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)12 at executeDispatch (react-dom.development.js:389)13 at executeDispatchesInOrder (react-dom.development.js:414)14 at executeDispatchesAndRelease (react-dom.development.js:3270)15 at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3281)

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