How to use valueId method in wpt
Best JavaScript code snippet using wpt
images.js
Source:images.js 
1var OptionExtended = {};2OptionExtended.Images = Class.create({3 v : [], 4 o : [], 5 imageLayerIds : [], 6 templatePattern : /(^|.|\r|\n)({{(\w+)}})/, 7 initialize : function(){8 Object.extend(this, OptionExtended.Config);9 10 this.mainImage = $(this.mainImageId); 11 if (!this.mainImage){12 var imgBox = $$('.product-img-box')[0];13 if (imgBox){14 var img = imgBox.down('img');15 if (img)16 this.mainImage = img;17 } 18 } 19 if (!this.mainImage)20 this.mainImage = {src:null};21 22 this.mainImageSrc = this.mainImage.src; 23 24 var optionsContainer = $('product-options-wrapper');25 if (optionsContainer){26 optionsContainer.onclick = function(){}; // to make checkbox label tag work on iPhone 27 }28 }, 29 load : function(element, optionId){30 if (!this.o[optionId]){31 this.o[optionId] = {};32 this.isNewOption = true; 33 this.dd = element.up('dd');34 this.prepareOption(optionId, element);35 }36 if (element.type == 'radio' || element.type == 'checkbox') { 37 if (element.value){38 var valueId = parseInt(element.value); 39 this.v[valueId] = {}; 40 }41 this.prepareValue(optionId, element, element.value); 42 } else if ((element.type == 'select-one' && !Element.hasClassName(element,'datetime-picker')) || element.type == 'select-multiple') { 43 var options = $A(element.options);44 for (var i = 0, len = options.length; i < len; ++i){45 if (options[i].value){46 var valueId = parseInt(options[i].value);47 this.v[valueId] = {}; 48 }49 this.prepareValue(optionId, element, options[i].value); 50 } 51 }52 },53 54 55 56 prepareOption : function(optionId, element){57 58 switch (this.config[0][optionId][1]){59 case 'above' : 60 if (element.type == 'radio' || element.type == 'select-one') {61 this.dd.className ='ox-above'; 62 Element.insert(this.dd, {'top': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 63 Element.insert(this.dd, {'top': this.makeImage(optionId, null, 'one')}); 64 Element.insert(this.dd, {'top': new Element('div').addClassName('spacer').update(' ')}); 65 Element.insert(this.dd.down('.description'), {'after': new Element('div').addClassName('spacer').update(' ')}); 66 } else {67 this.dd.className ='ox-above-checkbox'; 68 }69 break;70 case 'before' : 71 if (element.type == 'select-one'){ 72 this.dd.className ='ox-before-select'; 73 Element.wrap(element, 'div', {'class': 'ox-table'});74 Element.wrap(element, 'div', {'class': 'ox-table-cell'}); 75 Element.insert(element.up('.ox-table-cell'), {'before': this.makeImage(optionId, null, null)});76 Element.wrap($('optionextended_image_' + optionId), 'div', {'class': 'ox-table-cell-img'}); 77 Element.insert(element, {'after': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : '', id:'optionextended_description_'+ optionId, 'style' : 'display:none;'})}); 78 } else if (element.type == 'radio'){ 79 this.dd.className ='ox-before-radio'; 80 Element.wrap(this.dd.down('.input-box'), 'div', {'class': 'ox-table'}); 81 Element.wrap(this.dd.down('.input-box'), 'div', {'class': 'ox-table-cell'}); 82 Element.insert(this.dd.down('.input-box').up('.ox-table-cell'), {'before': this.makeImage(optionId, null, null)});83 Element.wrap($('optionextended_image_' + optionId), 'div', {'class': 'ox-table-cell-img'}); 84 } 85 break;86 case 'below' : 87 if (element.type == 'radio' || element.type == 'select-one') { 88 this.dd.className ='ox-below'; 89 Element.insert(this.dd, {'bottom': this.makeImage(optionId, null, 'one')}); 90 Element.insert(this.dd, {'bottom': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 91 Element.insert(this.dd.down('img'), {'before': new Element('div').addClassName('spacer').update(' ')}); 92 Element.insert(this.dd, {'bottom': new Element('div').addClassName('spacer').update(' ')}); 93 } else {94 this.dd.className ='ox-below-checkbox'; 95 }96 break;97 case 'swap' : 98 if (element.type == 'select-one'){ 99 this.dd.className ='ox-swap-select'; 100 Element.insert(element, {'after': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 101 } else if(element.type == 'radio'){ 102 this.dd.className ='ox-swap-radio'; 103 } 104 break;105 case 'pickerswap' : 106 case 'picker' : 107 this.dd.className ='ox-picker'; 108 Element.insert(element, {'after': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 109 break;110 case 'grid' :111 case 'gridcompact' : 112 this.dd.className = this.config[0][optionId][1] == 'grid' ? 'ox-grid' : 'ox-gridcompact';113 var ul = this.dd.down('ul');114 Element.insert(ul, {'top': new Element('div').addClassName('spacer').update(' ')});115 Element.insert(ul, {'bottom': new Element('div').addClassName('spacer').update(' ')});116 break;117 case 'list' : 118 this.dd.className ='ox-list'; 119 break; 120 } 121 122 Element.insert(this.dd, {'bottom': new Element('div').addClassName('ox-note').update(this.config[0][optionId][0])});123 },124 125 126 127 128 prepareValue : function(optionId, element, value){129 130 var valueId = value ? parseInt(value) : null;131 132 if (value)133 var imageUrl = this.thumbnailDirUrl + this.config[1][valueId][0];134 135 switch (this.config[0][optionId][1]){136 137 case 'above' : 138 139 if (value){140 if (this.config[1][valueId][0]){141 if (element.type == 'radio' || element.type == 'select-one'){ 142 this.v[valueId].thumbnail = new Image();143 this.v[valueId].thumbnail.src = imageUrl;144 } else {145 if (this.isNewOption){146 Element.insert(this.dd, {'top': this.makeImage(optionId, valueId, null)}); 147 this.isNewOption = false; 148 } else { 149 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 150 }151 previousImage = $('optionextended_v_image_' + valueId);152 if (element.type == 'select-multiple')153 this.v[valueId].selected = false; 154 }155 }156 if (this.config[1][valueId][1] && element.type == 'checkbox'){157 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 158 } 159 } 160 161 break;162 case 'before' : 163 164 if (value){165 if (this.config[1][valueId][0]){ 166 this.v[valueId].thumbnail = new Image();167 this.v[valueId].thumbnail.src = imageUrl;168 }169 if (this.config[1][valueId][1] && element.type == 'radio'){170 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 171 } 172 } 173 174 break;175 case 'below' : 176 177 if (value){178 if (this.config[1][valueId][0]){179 if (element.type == 'radio' || element.type == 'select-one'){ 180 this.v[valueId].thumbnail = new Image();181 this.v[valueId].thumbnail.src = imageUrl;182 } else {183 if (this.isNewOption){184 Element.insert(this.dd.down('.ox-note'), {'before': this.makeImage(optionId, valueId, null)}); 185 this.isNewOption = false; 186 } else { 187 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 188 }189 previousImage = $('optionextended_v_image_' + valueId);190 if (element.type == 'select-multiple')191 this.v[valueId].selected = false; 192 }193 }194 if (this.config[1][valueId][1] && element.type == 'checkbox'){ 195 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 196 } 197 } 198 199 break;200 case 'swap' : 201 202 if (value){203 if (this.config[1][valueId][0]){ 204 this.v[valueId].thumbnail = new Image();205 this.v[valueId].thumbnail.src = imageUrl;206 }207 if (this.config[1][valueId][1] && element.type == 'radio'){208 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 209 } 210 } 211 212 break;213 case 'pickerswap' :214 215 if (value && this.config[1][valueId][0]){ 216 this.v[valueId].thumbnail = new Image();217 this.v[valueId].thumbnail.src = imageUrl;218 } 219 220 case 'picker' : 221 222 if (value && this.config[1][valueId][0]) {223 if (this.isNewOption){224 Element.insert(this.dd, {'top': this.makeImage(optionId, valueId, null)}); 225 this.isNewOption = false; 226 } else { 227 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 228 }229 previousImage = $('optionextended_v_image_' + valueId);230 } 231 232 break;233 case 'grid' : 234 235 Element.insert(element, {'before': this.makeImage(optionId, valueId, null)});236 if (value && this.config[1][valueId][1])237 Element.insert(element, {'after': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 238 239 break;240 case 'gridcompact' : 241 242 Element.insert(element, {'before': this.makeImage(optionId, valueId, null)});243 if (value){244 var img = $('optionextended_v_image_' + valueId);245 Element.insert(img, {'after': new Element('img', {'src' : this.checkIcon, 'class' : 'ox-check-icon'})}); 246 if (this.config[1][valueId][1])247 img.title = this.config[1][valueId][1]; 248 } 249 break; 250 case 'list' : 251 252/* 253---------------The folowing javascript code changes html structure from:-------------------254<li>255 <input class="radio product-custom-option" onclick="opConfig.reloadPrice()" name="options[88]" id="options_88_3" value="192" type="radio">256 <span class="label">257 <label for="options_88_3">258 TITLE HERE ...259 <span class="price-notice">+<span class="price">PRICE HERE ...</span></span>260 </label>261 </span>262</li>263-------------------------to:264<li>265 <label for="options_88_3">266 <img class="ox-image" src="http://...jpg">267 </label>268 <span class="content">269 <label for="options_88_3">270 TITLE HERE ...271 <div class="description">DESCRIPTION HERE ...</div>272 <span class="price-notice">+<span class="price">PRICE HERE ...</span></span>273 <input class="radio product-custom-option" onclick="opConfig.reloadPrice()" name="options[88]" id="options_88_3" value="192" type="radio"> 274 </label> 275 </span>276 <div class="spacer"> </div>277</li>278------------------------------279*/ 280 var li = element.up('li');281 Element.insert(li, {'top': this.makeImage(optionId, valueId, null)}); 282 283 var content = li.down('span.label');284 285 content.className = 'content';286 287 if (value){ 288 var description = new Element('div').addClassName('description').update(this.config[1][valueId][1]);289 var price = content.down('span.price-notice');290 if (price)291 Element.insert(price, {'before': description}); 292 else293 Element.insert(content.down('label'), {'bottom': description}); 294 } else {295 li.addClassName('none'); 296 } 297 298 Element.insert(content.down('label'), {'bottom': element});299 300 Element.insert(li, {'bottom': new Element('div').addClassName('spacer').update(" ")}); 301 break; 302 } 303 },304 305 observeRadio : function(optionId, valueId){306 if (this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below'){ 307 this.reloadDescription(optionId, valueId);308 } 309 this.reloadImage(optionId, valueId, 'radio', null); 310 this.o[optionId].value = valueId; 311 },312 313 observeCheckbox : function(element, optionId, valueId){ 314 this.reloadImage(optionId, valueId, 'checkbox', element.checked); 315 },316 317 observeSelectOne : function(element, optionId){318 var valueId = element.value; 319 if (this.config[0][optionId][1] == 'pickerswap'){320 this.reloadPickerImage(optionId, valueId); 321 this.reloadImage(optionId, valueId, 'select-one', null); 322 } else if (this.config[0][optionId][1] == 'picker'){323 this.reloadPickerImage(optionId, valueId);324 } else {325 this.reloadImage(optionId, valueId, 'select-one', null); 326 }327 328 if (this.config[0][optionId][1] == 'before')329 this.reloadDescriptionIcon(optionId, valueId); 330 else331 this.reloadDescription(optionId, valueId); 332 333 this.o[optionId].value = valueId; 334 },335 336 observeSelectMultiple : function(element, optionId){337 var options = $A(element.options); 338 var l = options.length;339 while (l--){ 340 if (this.config[1][options[l].value][0] && this.v[options[l].value].selected !== options[l].selected){ 341 this.reloadImage(optionId, options[l].value, 'select-multiple', options[l].selected); 342 this.v[options[l].value].selected = options[l].selected; 343 } 344 } 345 }, 346 347 348 349 350 reloadImage : function(optionId, valueId, type, checked){351 if (type == 'radio' || type == 'select-one') {352 if (valueId && this.config[1][valueId][0]){ 353 this.showImage(optionId, valueId, type);354 } else {355 if (valueId && (this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below') && this.config[1][valueId][1]){356 this.hideImage(optionId, valueId, type); 357 } else if(valueId && this.config[0][optionId][1] == 'before'){358 this.setPlaceholder(optionId); 359 } else {360 this.hideImage(optionId, valueId, type);361 }362 }363 } else {364 if (checked && valueId && this.config[1][valueId][0]) 365 this.showImage(optionId, valueId, type);366 else367 this.hideImage(optionId, valueId, type); 368 }369 370 if (this.config[0][optionId][1] == 'gridcompact'){371 var el;372 var l = this.valsByOption[optionId].length;373 while (l--){374 el = this.oldV[this.valsByOption[optionId][l]].element; 375 if (el.checked){376 el.previous('.ox-image').addClassName('ox-selected');377 } else {378 el.previous('.ox-image').removeClassName('ox-selected');379 } 380 }381 } 382 },383 384 showImage : function(optionId, valueId, type){385 if (this.config[0][optionId][1] != 'grid' && this.config[0][optionId][1] != 'gridcompact' && this.config[0][optionId][1] != 'list'){386 if (type == 'radio' || type == 'select-one') {387 if (this.config[0][optionId][1] == 'swap' || this.config[0][optionId][1] == 'pickerswap'){ 388 this.mainImage.src = this.v[valueId].image.src; 389 this.resetZoom(); 390 if (this.imageLayerIds.indexOf(optionId) == -1)391 this.imageLayerIds.push(optionId);392 } else { 393 var image = $('optionextended_image_' + optionId);394 if (this.config[0][optionId][2]){ 395 image.style.cursor = 'pointer';396 image.title = this.imageTitle;397 image.setAttribute('ox-data-popup', this.imageDirUrl + this.config[1][valueId][4]);398 }399 image.src = this.v[valueId].thumbnail.src;400 image.show(); 401 } 402 } else {403 $('optionextended_v_image_' + valueId).show();404 }405 }406 }, 407 408 hideImage : function(optionId, valueId, type){409 if (this.config[0][optionId][1] != 'grid' && this.config[0][optionId][1] != 'gridcompact' && this.config[0][optionId][1] != 'list'){410 if (type == 'radio' || type == 'select-one') {411 if (this.config[0][optionId][1] == 'swap' || this.config[0][optionId][1] == 'pickerswap'){ 412 this.imageLayerIds = this.imageLayerIds.without(optionId);413 var src = this.imageLayerIds.last() ? this.v[this.o[this.imageLayerIds.last()].value].image.src : this.mainImageSrc; 414 if (this.mainImage.src != src){ 415 this.mainImage.src = src; 416 this.resetZoom(); 417 }418 } else if (this.config[0][optionId][1] == 'before'){419 var image = $('optionextended_image_' + optionId);420 if (image){421 if (this.config[0][optionId][2] && image.style.cursor == 'pointer'){ 422 image.style.cursor = null;423 image.title = '';424 image.setAttribute('ox-data-popup', "");425 } 426 image.src = this.spacer; 427 }428 } else {429 var image = $('optionextended_image_' + optionId);430 if (image){431 image.src = this.spacer;432 image.hide();433 }434 } 435 } else if(this.config[1][valueId][0]){436 $('optionextended_v_image_' + valueId).hide(); 437 }438 }439 },440 441 setPlaceholder : function(optionId){442 var image = $('optionextended_image_' + optionId); 443 if (this.config[0][optionId][2] && image.style.cursor == 'pointer'){ 444 image.style.cursor = null;445 image.title = '';446 image.setAttribute('ox-data-popup', "");447 } 448 image.src = this.placeholderUrl; 449 image.show();450 },451 452 453 454 455 reloadDescription : function(optionId, valueId){ 456 if (valueId && this.config[1][valueId][1])457 this.showDescription(optionId, valueId);458 else459 this.hideDescription(optionId);460 },461 462 showDescription : function(optionId, valueId){ 463 var description = $('optionextended_description_' + optionId);464 description.update(this.config[1][valueId][1]);465 description.show(); 466 },467 468 hideDescription : function(optionId){ 469 var description = $('optionextended_description_' + optionId);470 if (description) 471 description.hide(); 472 },473 474 475 476 477 reloadDescriptionIcon : function(optionId, valueId){ 478 if (valueId && this.config[1][valueId][1])479 this.showDescriptionIcon(optionId, valueId);480 else481 this.hideDescriptionIcon(optionId);482 },483 484 showDescriptionIcon : function(optionId, valueId){485 if (window.jQuery && jQuery.fn.tooltipster){486 jQuery('#optionextended_description_' + optionId).tooltipster('content', this.config[1][valueId][1]).show(); 487 } 488 },489 490 hideDescriptionIcon : function(optionId){491 var container = $('optionextended_description_' + optionId);492 if (container)493 container.hide(); 494 },495 reloadPickerImage : function(optionId, valueId){496 if (valueId && this.config[1][valueId][0])497 this.highlightPickerImage(valueId);498 if (this.o[optionId].value && this.o[optionId].value != valueId && this.config[1][this.o[optionId].value][0])499 this.unhighlightPickerImage(this.o[optionId].value); 500 },501 502 highlightPickerImage : function(valueId){503 $('optionextended_v_image_' + valueId).addClassName('ox-selected');504 },505 506 unhighlightPickerImage : function(valueId){507 if (this.config[1][valueId][0]) 508 $('optionextended_v_image_' + valueId).removeClassName('ox-selected');509 },510 511 showPickerImage : function(optionId, valueId){512 if ((this.config[0][optionId][1] == 'picker' || this.config[0][optionId][1] == 'pickerswap') && this.config[1][valueId][0]) 513 $('optionextended_v_image_' + valueId).show();514 }, 515 516 hidePickerImage : function(optionId, valueId){517 if ((this.config[0][optionId][1] == 'picker' || this.config[0][optionId][1] == 'pickerswap') && this.config[1][valueId][0]){ 518 $('optionextended_v_image_' + valueId).hide();519 }520 }, 521 522 523 524 reloadSelect : function(optionId, valueId){525 var select = $('select_' + optionId);526 for (var i=0; i < select.options.length; i++) {527 if (select.options[i].value == valueId) {528 select.options[i].selected = true;529 break;530 }531 } 532 optionExtended.observeSelectOne(select, optionId);533 },534 535 536 preloadSwapImages : function(optionIds, valsByOption){537 this.toload = 0; 538 this.loaded = 0;539 this.ss = '';540 var l = optionIds.length; 541 for (var i=0;i<l;i++){542 if (this.config[0][optionIds[i]][1] == 'swap' || this.config[0][optionIds[i]][1] == 'pickerswap'){543 var ll = valsByOption[optionIds[i]].length;544 while (ll--){545 if (this.config[1][valsByOption[optionIds[i]][ll]][0]){546 this.v[valsByOption[optionIds[i]][ll]].image = new Image();547 this.v[valsByOption[optionIds[i]][ll]].image.src = this.imageDirUrl + this.config[1][valsByOption[optionIds[i]][ll]][4]; 548 this.v[valsByOption[optionIds[i]][ll]].image.onload = function(){549 this.loaded++;550 if (this.loaded == this.toload)551 this.onDataReady();552 }.bind(this);553 this.toload++;554 } 555 } 556 }557 } 558 if (this.toload == 0)559 this.onDataReady(); 560 },561 562 preloadPopupImages : function(optionIds, valsByOption){563 var l = optionIds.length; 564 for (var i=0;i<l;i++){565 if (this.config[0][optionIds[i]][2]){ 566 var ll = valsByOption[optionIds[i]].length;567 while (ll--){568 if (this.config[1][valsByOption[optionIds[i]][ll]][0]){569 this.v[valsByOption[optionIds[i]][ll]].image = new Image();570 this.v[valsByOption[optionIds[i]][ll]].image.src = this.imageDirUrl + this.config[1][valsByOption[optionIds[i]][ll]][4]; 571 } 572 } 573 }574 } 575 }, 576 577 resetImage : function(optionId, valueId, type){578 if (this.config[0][optionId][1] == 'pickerswap'){ 579 this.unhighlightPickerImage(valueId); 580 this.hideImage(optionId, valueId, type); 581 this.hideDescription(optionId);582 } else if (this.config[0][optionId][1] == 'picker'){583 this.unhighlightPickerImage(valueId);584 this.hideDescription(optionId);585 } else {586 this.hideImage(optionId, valueId, type); 587 if ((this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below') && (type == 'select-one' || type == 'radio')){588 this.hideDescription(optionId); 589 } else if (this.config[0][optionId][1] == 'before' && type == 'select-one' ){ 590 this.hideDescriptionIcon(optionId); 591 }592 if (type == 'select-multiple')593 this.v[valueId].selected = false; 594 }595 if (this.config[0][optionId][1] == 'gridcompact'){596 this.oldV[valueId].element.previous().removeClassName('ox-selected');597 } 598 }, 599 600 resetZoom : function(){601 if ($('track') && $('handle') && $('zoom_in') && $('zoom_out') && $('track_hint')){602 Event.stopObserving(this.mainImage,'dblclick');603 Event.stopObserving('zoom_in');604 Event.stopObserving('zoom_out');605 var parent = this.mainImage.parentNode;606 if (!Element.hasClassName(parent,'product-image-zoom')){607 $('track').up().show();608 $('track_hint').show();609 parent.addClassName('product-image-zoom'); 610 }611 this.mainImage.style.width = 'auto';612 this.mainImage.style.height = 'auto'; 613 new Product.Zoom(this.mainImage, 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');614 } else if (window.ProductMediaManager && window.jQuery){615 ProductMediaManager.swapImage(this.mainImage);616 }617 },618 619 620 makeImage : function(optionId, valueId, type){621 var element,className,onclick,src,popupSrc,style,title,id; 622 switch (this.config[0][optionId][1]){623 case 'above' :624 case 'below' : 625 id = type == 'one' ? 'optionextended_image_' + optionId : 'optionextended_v_image_' + valueId; 626 className = 'ox-image';627 style = 'display:none;'; 628 if (valueId && this.config[1][valueId][0]){629 src = this.thumbnailDirUrl + this.config[1][valueId][0];630 if (this.config[0][optionId][2]){631 style += 'cursor:pointer;'; 632 title = this.imageTitle;633 popupSrc = this.imageDirUrl + this.config[1][valueId][4]; 634 }635 } else if (valueId){636 src = this.placeholderUrl; 637 } else {638 src = this.spacer; 639 } 640 break; 641 case 'grid' :642 case 'gridcompact' : 643 case 'list' :644 className = 'ox-image';645 if (valueId && this.config[1][valueId][0]){646 src = this.thumbnailDirUrl + this.config[1][valueId][0];647 if (this.config[0][optionId][2]){648 style = 'cursor:pointer;'; 649 title = this.imageTitle;650 popupSrc = this.imageDirUrl + this.config[1][valueId][4]; 651 }652 } else if (valueId){653 src = this.placeholderUrl; 654 } else {655 src = this.spacer; 656 }657 658 if (!this.config[0][optionId][2] || this.config[0][optionId][1] != 'list') 659 onclick = 'optionExtended.actAsLabel(' + optionId + ', ' + valueId + ')'; 660 661 if (valueId && this.config[0][optionId][1] == 'gridcompact'){662 id = 'optionextended_v_image_' + valueId; 663 if (this.config[1][valueId][1]) 664 className +=' ox-tooltip-icon'; 665 } 666 break;667 case 'before' : 668 id = 'optionextended_image_' + optionId;669 className = 'ox-image'; 670 src = !valueId ? this.spacer : (!this.config[1][valueId][0] ? this.placeholderUrl : this.thumbnailDirUrl + this.config[1][valueId][0]);671 break;672 case 'pickerswap' : 673 case 'picker' : 674 id = 'optionextended_v_image_' + valueId;675 className = 'ox-picker-image ox-tooltip';676 src = this.pickerImageDirUrl + this.config[1][valueId][0]; 677 onclick = 'optionExtended.reloadSelect(' + optionId + ', ' + valueId + ')';678 if (this.config[0][optionId][2]){679 title = "<img class="ox-hover-image" src=""+this.hoverImageDirUrl + this.config[1][valueId][4]+""/>";680 } 681 break;682 } 683 684 element = '<img src="'+src+'" class="'+className+'"' + (id ? ' id="'+id+'"' : '') + (style ? ' style="'+style+'"' : '') + (title ? ' title="'+title+'"' : '') + (onclick ? ' onclick="'+onclick+'"' : '') + (popupSrc ? ' ox-data-popup="'+popupSrc+'"' : '') +'/>'; 685 return element;686 },687 688 actAsLabel : function(optonId, valueId){ 689 element = valueId ? this.oldV[valueId].element : $('options_'+optonId);690 if (element.type == 'radio'){691 element.checked |= true;692 this.observeRadio(optonId, element.value);693 } else {694 element.checked = !element.checked; 695 this.observeCheckbox(element, optonId, element.value); 696 }697 opConfig.reloadPrice();698 } ...
optionextended_images.js
Source:optionextended_images.js
1var OptionExtended = {};2OptionExtended.Images = Class.create({3 v : [], 4 o : [], 5 imageLayerIds : [], 6 templatePattern : /(^|.|\r|\n)({{(\w+)}})/, 7 initialize : function(){8 9 this.v = []; 10 this.o = []; 11 this.imageLayerIds = []; 12 this.templatePattern = /(^|.|\r|\n)({{(\w+)}})/; 13 14 Object.extend(this, OptionExtended.Config);15 this.mainImage = {};//$(this.mainImageId);16 this.mainImageSrc = null;//this.mainImage.src;17 18 }, 19 load : function(element, optionId){20 if (!this.o[optionId]){21 this.o[optionId] = {};22 this.isNewOption = true; 23 this.dd = element.up('dd');24 this.prepareOption(optionId, element);25 }26 if (element.type == 'radio' || element.type == 'checkbox') { 27 if (element.value){28 var valueId = parseInt(element.value); 29 this.v[valueId] = {}; 30 }31 this.prepareValue(optionId, element, element.value); 32 } else if ((element.type == 'select-one' && !Element.hasClassName(element,'datetime-picker')) || element.type == 'select-multiple') { 33 var options = $A(element.options);34 for (var i = 0, len = options.length; i < len; ++i){35 if (options[i].value){36 var valueId = parseInt(options[i].value);37 this.v[valueId] = {}; 38 }39 this.prepareValue(optionId, element, options[i].value); 40 } 41 }42 },43 44 45 46 prepareOption : function(optionId, element){47 48 switch (this.config[0][optionId][1]){49 case 'above' : 50 if (element.type == 'radio' || element.type == 'select-one') {51 this.dd.className ='ox-above'; 52 Element.insert(this.dd, {'top': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 53 Element.insert(this.dd, {'top': this.makeImage(optionId, null, 'one')}); 54 Element.insert(this.dd, {'top': new Element('div').addClassName('spacer').update(' ')}); 55 Element.insert(this.dd.down('.description'), {'after': new Element('div').addClassName('spacer').update(' ')}); 56 } else {57 this.dd.className ='ox-above-checkbox'; 58 }59 break;60 case 'before' : 61 if (element.type == 'select-one'){ 62 this.dd.className ='ox-before-select'; 63 Element.wrap(element, 'div', {'class': 'ox-table'});64 Element.wrap(element, 'div', {'class': 'ox-table-cell'}); 65 Element.insert(element.up('.ox-table-cell'), {'before': this.makeImage(optionId, null, null)});66 Element.wrap($('optionextended_image_' + optionId), 'div', {'class': 'ox-table-cell-img'}); 67 Element.insert(element, {'after': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : '', id:'optionextended_description_'+ optionId, 'style' : 'display:none;'})}); 68 } else if (element.type == 'radio'){ 69 this.dd.className ='ox-before-radio'; 70 Element.wrap(this.dd.down('.input-box'), 'div', {'class': 'ox-table'}); 71 Element.wrap(this.dd.down('.input-box'), 'div', {'class': 'ox-table-cell'}); 72 Element.insert(this.dd.down('.input-box').up('.ox-table-cell'), {'before': this.makeImage(optionId, null, null)});73 Element.wrap($('optionextended_image_' + optionId), 'div', {'class': 'ox-table-cell-img'}); 74 } 75 break;76 case 'below' : 77 if (element.type == 'radio' || element.type == 'select-one') { 78 this.dd.className ='ox-below'; 79 Element.insert(this.dd, {'bottom': this.makeImage(optionId, null, 'one')}); 80 Element.insert(this.dd, {'bottom': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 81 Element.insert(this.dd.down('img'), {'before': new Element('div').addClassName('spacer').update(' ')}); 82 Element.insert(this.dd, {'bottom': new Element('div').addClassName('spacer').update(' ')}); 83 } else {84 this.dd.className ='ox-below-checkbox'; 85 }86 break;87 case 'swap' : 88 if (element.type == 'select-one'){ 89 this.dd.className ='ox-swap-select'; 90 Element.insert(element, {'after': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 91 } else if(element.type == 'radio'){ 92 this.dd.className ='ox-swap-radio'; 93 } 94 break;95 case 'pickerswap' : 96 case 'picker' : 97 this.dd.className ='ox-picker'; 98 Element.insert(element, {'after': new Element('div', {'id' : 'optionextended_description_' + optionId, 'style' : 'display:none;'}).addClassName('description')}); 99 break;100 case 'grid' :101 case 'gridcompact' : 102 this.dd.className = this.config[0][optionId][1] == 'grid' ? 'ox-grid' : 'ox-gridcompact';103 var ul = this.dd.down('ul');104 Element.insert(ul, {'top': new Element('div').addClassName('spacer').update(' ')});105 Element.insert(ul, {'bottom': new Element('div').addClassName('spacer').update(' ')});106 break;107 case 'list' : 108 this.dd.className ='ox-list'; 109 break; 110 } 111 112 Element.insert(this.dd, {'bottom': new Element('div').addClassName('ox-note').update(this.config[0][optionId][0])});113 },114 115 116 117 118 prepareValue : function(optionId, element, value){119 120 var valueId = value ? parseInt(value) : null;121 122 if (value)123 var imageUrl = this.thumbnailDirUrl + this.config[1][valueId][0];124 125 switch (this.config[0][optionId][1]){126 127 case 'above' : 128 129 if (value){130 if (this.config[1][valueId][0]){131 if (element.type == 'radio' || element.type == 'select-one'){ 132 this.v[valueId].thumbnail = new Image();133 this.v[valueId].thumbnail.src = imageUrl;134 } else {135 if (this.isNewOption){136 Element.insert(this.dd, {'top': this.makeImage(optionId, valueId, null)}); 137 this.isNewOption = false; 138 } else { 139 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 140 }141 previousImage = $('optionextended_v_image_' + valueId);142 if (element.type == 'select-multiple')143 this.v[valueId].selected = false; 144 }145 }146 if (this.config[1][valueId][1] && element.type == 'checkbox'){147 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 148 } 149 } 150 151 break;152 case 'before' : 153 154 if (value){155 if (this.config[1][valueId][0]){ 156 this.v[valueId].thumbnail = new Image();157 this.v[valueId].thumbnail.src = imageUrl;158 }159 if (this.config[1][valueId][1] && element.type == 'radio'){160 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 161 } 162 } 163 164 break;165 case 'below' : 166 167 if (value){168 if (this.config[1][valueId][0]){169 if (element.type == 'radio' || element.type == 'select-one'){ 170 this.v[valueId].thumbnail = new Image();171 this.v[valueId].thumbnail.src = imageUrl;172 } else {173 if (this.isNewOption){174 Element.insert(this.dd.down('.ox-note'), {'before': this.makeImage(optionId, valueId, null)}); 175 this.isNewOption = false; 176 } else { 177 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 178 }179 previousImage = $('optionextended_v_image_' + valueId);180 if (element.type == 'select-multiple')181 this.v[valueId].selected = false; 182 }183 }184 if (this.config[1][valueId][1] && element.type == 'checkbox'){ 185 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 186 } 187 } 188 189 break;190 case 'swap' : 191 192 if (value){193 if (this.config[1][valueId][0]){ 194 this.v[valueId].thumbnail = new Image();195 this.v[valueId].thumbnail.src = imageUrl;196 }197 if (this.config[1][valueId][1] && element.type == 'radio'){198 Element.insert(element.up('li').down('.label'), {'bottom': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 199 } 200 } 201 202 break;203 case 'pickerswap' :204 205 if (value && this.config[1][valueId][0]){ 206 this.v[valueId].thumbnail = new Image();207 this.v[valueId].thumbnail.src = imageUrl;208 } 209 210 case 'picker' : 211 212 if (value && this.config[1][valueId][0]) {213 if (this.isNewOption){214 Element.insert(this.dd, {'top': this.makeImage(optionId, valueId, null)}); 215 this.isNewOption = false; 216 } else { 217 Element.insert(previousImage, {'after': this.makeImage(optionId, valueId, null)}); 218 }219 previousImage = $('optionextended_v_image_' + valueId);220 } 221 222 break;223 case 'grid' : 224 225 Element.insert(element, {'before': this.makeImage(optionId, valueId, null)});226 if (value && this.config[1][valueId][1])227 Element.insert(element, {'after': new Element('img', {'src' : this.infoIcon, 'class' : 'ox-tooltip-icon', 'title' : this.config[1][valueId][1]})}); 228 229 break;230 case 'gridcompact' : 231 232 Element.insert(element, {'before': this.makeImage(optionId, valueId, null)});233 if (value){234 var img = $('optionextended_v_image_' + valueId);235 Element.insert(img, {'after': new Element('img', {'src' : this.checkIcon, 'class' : 'ox-check-icon'})}); 236 if (this.config[1][valueId][1])237 img.title = this.config[1][valueId][1]; 238 } 239 break; 240 case 'list' : 241 242/* 243---------------The folowing javascript code changes html structure from:-------------------244<li>245 <input class="radio product-custom-option" onclick="opConfig.reloadPrice()" name="options[88]" id="options_88_3" value="192" type="radio">246 <span class="label">247 <label for="options_88_3">248 TITLE HERE ...249 <span class="price-notice">+<span class="price">PRICE HERE ...</span></span>250 </label>251 </span>252</li>253-------------------------to:254<li>255 <label for="options_88_3">256 <img class="ox-image" src="http://...jpg">257 </label>258 <span class="content">259 <label for="options_88_3">260 TITLE HERE ...261 <div class="description">DESCRIPTION HERE ...</div>262 <span class="price-notice">+<span class="price">PRICE HERE ...</span></span>263 <input class="radio product-custom-option" onclick="opConfig.reloadPrice()" name="options[88]" id="options_88_3" value="192" type="radio"> 264 </label> 265 </span>266 <div class="spacer"> </div>267</li>268------------------------------269*/ 270 var li = element.up('li');271 Element.insert(li, {'top': this.makeImage(optionId, valueId, null)}); 272 273 var content = li.down('span.label');274 275 content.className = 'content';276 277 if (value){ 278 var description = new Element('div').addClassName('description').update(this.config[1][valueId][1]);279 var price = content.down('span.price-notice');280 if (price)281 Element.insert(price, {'before': description}); 282 else283 Element.insert(content.down('label'), {'bottom': description}); 284 } else {285 li.addClassName('none'); 286 } 287 288 Element.insert(content.down('label'), {'bottom': element});289 290 Element.insert(li, {'bottom': new Element('div').addClassName('spacer').update(" ")}); 291 break; 292 } 293 },294 295 observeRadio : function(optionId, valueId){296 if (this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below'){ 297 this.reloadDescription(optionId, valueId);298 } 299 this.reloadImage(optionId, valueId, 'radio', null); 300 this.o[optionId].value = valueId; 301 },302 303 observeCheckbox : function(element, optionId, valueId){ 304 this.reloadImage(optionId, valueId, 'checkbox', element.checked); 305 },306 307 observeSelectOne : function(element, optionId){308 var valueId = element.value; 309 if (this.config[0][optionId][1] == 'pickerswap'){310 this.reloadPickerImage(optionId, valueId); 311 this.reloadImage(optionId, valueId, 'select-one', null); 312 } else if (this.config[0][optionId][1] == 'picker'){313 this.reloadPickerImage(optionId, valueId);314 } else {315 this.reloadImage(optionId, valueId, 'select-one', null); 316 }317 318 if (this.config[0][optionId][1] == 'before')319 this.reloadDescriptionIcon(optionId, valueId); 320 else321 this.reloadDescription(optionId, valueId); 322 323 this.o[optionId].value = valueId; 324 },325 326 observeSelectMultiple : function(element, optionId){327 var options = $A(element.options); 328 var l = options.length;329 while (l--){ 330 if (this.config[1][options[l].value][0] && this.v[options[l].value].selected !== options[l].selected){ 331 this.reloadImage(optionId, options[l].value, 'select-multiple', options[l].selected); 332 this.v[options[l].value].selected = options[l].selected; 333 } 334 } 335 }, 336 337 338 339 340 reloadImage : function(optionId, valueId, type, checked){341 if (type == 'radio' || type == 'select-one') {342 if (valueId && this.config[1][valueId][0]){ 343 this.showImage(optionId, valueId, type);344 } else {345 if (valueId && (this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below') && this.config[1][valueId][1]){346 this.hideImage(optionId, valueId, type); 347 } else if(valueId && this.config[0][optionId][1] == 'before'){348 this.setPlaceholder(optionId); 349 } else {350 this.hideImage(optionId, valueId, type);351 }352 }353 } else {354 if (checked && valueId && this.config[1][valueId][0]) 355 this.showImage(optionId, valueId, type);356 else357 this.hideImage(optionId, valueId, type); 358 }359 360 if (this.config[0][optionId][1] == 'gridcompact'){361 var el;362 var l = this.valsByOption[optionId].length;363 while (l--){364 el = this.oldV[this.valsByOption[optionId][l]].element; 365 if (el.checked){366 el.previous('.ox-image').addClassName('ox-selected');367 } else {368 el.previous('.ox-image').removeClassName('ox-selected');369 } 370 }371 } 372 },373 374 showImage : function(optionId, valueId, type){375 if (this.config[0][optionId][1] != 'grid' && this.config[0][optionId][1] != 'gridcompact' && this.config[0][optionId][1] != 'list'){376 if (type == 'radio' || type == 'select-one') {377 if (this.config[0][optionId][1] == 'swap' || this.config[0][optionId][1] == 'pickerswap'){ 378 this.mainImage.src = this.v[valueId].image.src; 379 this.resetZoom(); 380 if (this.imageLayerIds.indexOf(optionId) == -1)381 this.imageLayerIds.push(optionId);382 } else { 383 var image = $('optionextended_image_' + optionId);384 if (this.config[0][optionId][2]){ 385 image.style.cursor = 'pointer';386 image.title = this.imageTitle;387 image.setAttribute('ox-data-popup', this.imageDirUrl + this.config[1][valueId][0]);388 }389 image.src = this.v[valueId].thumbnail.src;390 image.show(); 391 } 392 } else {393 $('optionextended_v_image_' + valueId).show();394 }395 }396 }, 397 398 hideImage : function(optionId, valueId, type){399 if (this.config[0][optionId][1] != 'grid' && this.config[0][optionId][1] != 'gridcompact' && this.config[0][optionId][1] != 'list'){400 if (type == 'radio' || type == 'select-one') {401 if (this.config[0][optionId][1] == 'swap' || this.config[0][optionId][1] == 'pickerswap'){ 402 this.imageLayerIds = this.imageLayerIds.without(optionId);403 var src = this.imageLayerIds.last() ? this.v[this.o[this.imageLayerIds.last()].value].image.src : this.mainImageSrc; 404 if (this.mainImage.src != src){ 405 this.mainImage.src = src; 406 this.resetZoom(); 407 }408 } else if (this.config[0][optionId][1] == 'before'){409 var image = $('optionextended_image_' + optionId);410 if (image){411 if (this.config[0][optionId][2] && image.style.cursor == 'pointer'){ 412 image.style.cursor = null;413 image.title = '';414 image.setAttribute('ox-data-popup', "");415 } 416 image.src = this.spacer; 417 }418 } else {419 var image = $('optionextended_image_' + optionId);420 if (image){421 image.src = this.spacer;422 image.hide();423 }424 } 425 } else if(this.config[1][valueId][0]){426 $('optionextended_v_image_' + valueId).hide(); 427 }428 }429 },430 431 setPlaceholder : function(optionId){432 var image = $('optionextended_image_' + optionId); 433 if (this.config[0][optionId][2] && image.style.cursor == 'pointer'){ 434 image.style.cursor = null;435 image.title = '';436 image.setAttribute('ox-data-popup', "");437 } 438 image.src = this.placeholderUrl; 439 image.show();440 },441 442 443 444 445 reloadDescription : function(optionId, valueId){ 446 if (valueId && this.config[1][valueId][1])447 this.showDescription(optionId, valueId);448 else449 this.hideDescription(optionId);450 },451 452 showDescription : function(optionId, valueId){ 453 var description = $('optionextended_description_' + optionId);454 description.update(this.config[1][valueId][1]);455 description.show(); 456 },457 458 hideDescription : function(optionId){ 459 var description = $('optionextended_description_' + optionId);460 if (description) 461 description.hide(); 462 },463 464 465 466 467 reloadDescriptionIcon : function(optionId, valueId){ 468 if (valueId && this.config[1][valueId][1])469 this.showDescriptionIcon(optionId, valueId);470 else471 this.hideDescriptionIcon(optionId);472 },473 474 showDescriptionIcon : function(optionId, valueId){475 if (window.jQuery && jQuery.fn.tooltipster){476 jQuery('#optionextended_description_' + optionId).tooltipster('content', this.config[1][valueId][1]).show(); 477 } 478 },479 480 hideDescriptionIcon : function(optionId){481 var container = $('optionextended_description_' + optionId);482 if (container)483 container.hide(); 484 },485 reloadPickerImage : function(optionId, valueId){486 if (valueId && this.config[1][valueId][0])487 this.highlightPickerImage(valueId);488 if (this.o[optionId].value && this.o[optionId].value != valueId && this.config[1][this.o[optionId].value][0])489 this.unhighlightPickerImage(this.o[optionId].value); 490 },491 492 highlightPickerImage : function(valueId){493 $('optionextended_v_image_' + valueId).addClassName('ox-selected');494 },495 496 unhighlightPickerImage : function(valueId){497 if (this.config[1][valueId][0]) 498 $('optionextended_v_image_' + valueId).removeClassName('ox-selected');499 },500 501 showPickerImage : function(optionId, valueId){502 if ((this.config[0][optionId][1] == 'picker' || this.config[0][optionId][1] == 'pickerswap') && this.config[1][valueId][0]) 503 $('optionextended_v_image_' + valueId).show();504 }, 505 506 hidePickerImage : function(optionId, valueId){507 if ((this.config[0][optionId][1] == 'picker' || this.config[0][optionId][1] == 'pickerswap') && this.config[1][valueId][0]){ 508 $('optionextended_v_image_' + valueId).hide();509 }510 }, 511 512 513 514 reloadSelect : function(optionId, valueId){515 var select = $('select_' + optionId);516 for (var i=0; i < select.options.length; i++) {517 if (select.options[i].value == valueId) {518 select.options[i].selected = true;519 break;520 }521 } 522 optionExtendedInstances[optionExtendedInstanceId].observeSelectOne(select, optionId);523 },524 525 526 preloadSwapImages : function(optionIds, valsByOption){527 this.toload = 0; 528 this.loaded = 0;529 this.ss = '';530 var l = optionIds.length; 531 for (var i=0;i<l;i++){532 if (this.config[0][optionIds[i]][1] == 'swap' || this.config[0][optionIds[i]][1] == 'pickerswap'){533 var ll = valsByOption[optionIds[i]].length;534 while (ll--){535 if (this.config[1][valsByOption[optionIds[i]][ll]][0]){536 this.v[valsByOption[optionIds[i]][ll]].image = new Image();537 this.v[valsByOption[optionIds[i]][ll]].image.src = this.imageDirUrl + this.config[1][valsByOption[optionIds[i]][ll]][0]; 538 this.v[valsByOption[optionIds[i]][ll]].image.onload = function(){539 this.loaded++;540 if (this.loaded == this.toload)541 this.onDataReady();542 }.bind(this);543 this.toload++;544 } 545 } 546 }547 } 548 if (this.toload == 0)549 this.onDataReady(); 550 },551 552 preloadPopupImages : function(optionIds, valsByOption){553 var l = optionIds.length; 554 for (var i=0;i<l;i++){555 if (this.config[0][optionIds[i]][2]){ 556 var ll = valsByOption[optionIds[i]].length;557 while (ll--){558 if (this.config[1][valsByOption[optionIds[i]][ll]][0]){559 this.v[valsByOption[optionIds[i]][ll]].image = new Image();560 this.v[valsByOption[optionIds[i]][ll]].image.src = this.imageDirUrl + this.config[1][valsByOption[optionIds[i]][ll]][0]; 561 } 562 } 563 }564 } 565 }, 566 567 resetImage : function(optionId, valueId, type){568 if (this.config[0][optionId][1] == 'pickerswap'){ 569 this.unhighlightPickerImage(valueId); 570 this.hideImage(optionId, valueId, type); 571 this.hideDescription(optionId);572 } else if (this.config[0][optionId][1] == 'picker'){573 this.unhighlightPickerImage(valueId);574 this.hideDescription(optionId);575 } else {576 this.hideImage(optionId, valueId, type); 577 if ((this.config[0][optionId][1] == 'above' || this.config[0][optionId][1] == 'below') && (type == 'select-one' || type == 'radio')){578 this.hideDescription(optionId); 579 } else if (this.config[0][optionId][1] == 'before' && type == 'select-one' ){ 580 this.hideDescriptionIcon(optionId); 581 }582 if (type == 'select-multiple')583 this.v[valueId].selected = false; 584 }585 if (this.config[0][optionId][1] == 'gridcompact'){586 this.oldV[valueId].element.previous().removeClassName('ox-selected');587 } 588 }, 589 590 resetZoom : function(){591 if ($('track') && $('handle') && $('zoom_in') && $('zoom_out') && $('track_hint')){592 Event.stopObserving(this.mainImage,'dblclick');593 Event.stopObserving('zoom_in');594 Event.stopObserving('zoom_out');595 var parent = this.mainImage.parentNode;596 if (!Element.hasClassName(parent,'product-image-zoom')){597 $('track').up().show();598 $('track_hint').show();599 parent.addClassName('product-image-zoom'); 600 }601 this.mainImage.style.width = 'auto';602 this.mainImage.style.height = 'auto'; 603 new Product.Zoom(this.mainImage, 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');604 } else if (window.ProductMediaManager && window.jQuery){605 ProductMediaManager.swapImage(this.mainImage);606 }607 },608 609 610 makeImage : function(optionId, valueId, type){611 var element,className,onclick,src,popupSrc,style,title,id; 612 switch (this.config[0][optionId][1]){613 case 'above' :614 case 'below' : 615 id = type == 'one' ? 'optionextended_image_' + optionId : 'optionextended_v_image_' + valueId; 616 className = 'ox-image';617 style = 'display:none;'; 618 if (valueId && this.config[1][valueId][0]){619 src = this.thumbnailDirUrl + this.config[1][valueId][0];620 if (this.config[0][optionId][2]){621 style += 'cursor:pointer;'; 622 title = this.imageTitle;623 popupSrc = this.imageDirUrl + this.config[1][valueId][0]; 624 }625 } else if (valueId){626 src = this.placeholderUrl; 627 } else {628 src = this.spacer; 629 } 630 break; 631 case 'grid' :632 case 'gridcompact' : 633 case 'list' :634 className = 'ox-image';635 if (valueId && this.config[1][valueId][0]){636 src = this.thumbnailDirUrl + this.config[1][valueId][0];637 if (this.config[0][optionId][2]){638 style = 'cursor:pointer;'; 639 title = this.imageTitle;640 popupSrc = this.imageDirUrl + this.config[1][valueId][0]; 641 }642 } else if (valueId){643 src = this.placeholderUrl; 644 } else {645 src = this.spacer; 646 } 647 if (!this.config[0][optionId][2])648 onclick = 'optionExtendedInstances[optionExtendedInstanceId].actAsLabel(' + optionId + ', ' + valueId + ')'; 649 650 if (valueId && this.config[0][optionId][1] == 'gridcompact'){651 id = 'optionextended_v_image_' + valueId; 652 if (this.config[1][valueId][1]) 653 className +=' ox-tooltip-icon'; 654 } 655 break;656 case 'before' : 657 id = 'optionextended_image_' + optionId;658 className = 'ox-image'; 659 src = !valueId ? this.spacer : (!this.config[1][valueId][0] ? this.placeholderUrl : this.thumbnailDirUrl + this.config[1][valueId][0]);660 break;661 case 'pickerswap' : 662 case 'picker' : 663 id = 'optionextended_v_image_' + valueId;664 className = 'ox-picker-image ox-tooltip';665 src = this.pickerImageDirUrl + this.config[1][valueId][0]; 666 onclick = 'optionExtendedInstances[optionExtendedInstanceId].reloadSelect(' + optionId + ', ' + valueId + ')';667 if (this.config[0][optionId][2]){668 title = "<img src=""+this.thumbnailDirUrl + this.config[1][valueId][0]+""/>";669 } 670 break;671 } 672 673 element = '<img src="'+src+'" class="'+className+'"' + (id ? ' id="'+id+'"' : '') + (style ? ' style="'+style+'"' : '') + (title ? ' title="'+title+'"' : '') + (onclick ? ' onclick="'+onclick+'"' : '') + (popupSrc ? ' ox-data-popup="'+popupSrc+'"' : '') +'/>'; 674 return element;675 },676 677 actAsLabel : function(optonId, valueId){ 678 element = valueId ? this.oldV[valueId].element : $('options_'+optonId);679 if (element.type == 'radio'){680 element.checked |= true;681 this.observeRadio(optonId, element.value);682 } else {683 element.checked = !element.checked; 684 this.observeCheckbox(element, optonId, element.value); 685 }686 } ...
comment.js
Source:comment.js
1const Base = require('./base.js');2module.exports = class extends Base {3 /**4 * è¯è®ºç±»å说æï¼5 * 0 åå6 * 1 ä¸é¢7 */8 /**9 * å表è¯è®º10 * @returns {Promise.<*|PreventPromise|void|Promise>}11 */12 async postAction() {13 const typeId = this.post('typeId');14 const valueId = this.post('valueId');15 const content = this.post('content');16 const buffer = Buffer.from(content);17 const insertId = await this.model('comment').add({18 type_id: typeId,19 value_id: valueId,20 content: buffer.toString('base64'),21 add_time: this.getTime(),22 user_id: this.getLoginUserId()23 });24 if (insertId) {25 return this.success('è¯è®ºæ·»å æå');26 } else {27 return this.fail('è¯è®ºä¿å失败');28 }29 }30 async countAction() {31 const typeId = this.get('typeId');32 const valueId = this.get('valueId');33 const allCount = await this.model('comment').where({type_id: typeId, value_id: valueId}).count('id');34 const hasPicCount = await this.model('comment').alias('comment')35 .join({36 table: 'comment_picture',37 join: 'right',38 alias: 'comment_picture',39 on: ['id', 'comment_id']40 }).where({'comment.type_id': typeId, 'comment.value_id': valueId}).count('comment.id');41 return this.success({42 allCount: allCount,43 hasPicCount: hasPicCount44 });45 }46 async listAction() {47 const typeId = this.get('typeId');48 const valueId = this.get('valueId');49 const showType = this.get('showType'); // éæ©è¯è®ºçç±»å 0 å
¨é¨ï¼ 1 åªæ¾ç¤ºå¾ç50 const page = this.get('page');51 const size = this.get('size');52 let comments = [];53 if (showType !== 1) {54 comments = await this.model('comment').where({55 type_id: typeId,56 value_id: valueId57 }).page(page, size).countSelect();58 } else {59 comments = await this.model('comment').alias('comment')60 .field(['comment.*'])61 .join({62 table: 'comment_picture',63 join: 'right',64 alias: 'comment_picture',65 on: ['id', 'comment_id']66 }).page(page, size).where({'comment.type_id': typeId, 'comment.value_id': valueId}).countSelect();67 }68 const commentList = [];69 for (const commentItem of comments.data) {70 const comment = {};71 comment.content = Buffer.from(commentItem.content, 'base64').toString();72 comment.type_id = commentItem.type_id;73 comment.value_id = commentItem.value_id;74 comment.id = commentItem.id;75 comment.add_time = think.datetime(new Date(commentItem.add_time * 1000));76 comment.user_info = await this.model('user').field(['username', 'avatar', 'nickname']).where({id: commentItem.user_id}).find();77 comment.pic_list = await this.model('comment_picture').where({comment_id: commentItem.id}).select();78 commentList.push(comment);79 }80 comments.data = commentList;81 return this.success(comments);82 }...
Using AI Code Generation
1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3wpt.getTesters(function(err, data) {4 if (err) return console.error(err);5 console.log('testers: %j', data);6});7var wpt = require('webpagetest');8var wpt = new WebPageTest('www.webpagetest.org');9wpt.getTester('ec2-54-201-26-65.us-west-2.compute.amazonaws.com', function(err, data) {10 if (err) return console.error(err);11 console.log('tester: %j', data);12});13var wpt = require('webpagetest');14var wpt = new WebPageTest('www.webpagetest.org');15wpt.getLocations(function(err, data) {16 if (err) return console.error(err);17 console.log('locations: %j', data);18});19var wpt = require('webpagetest');20var wpt = new WebPageTest('www.webpagetest.org');21wpt.getLocation('ec2-54-201-26-65.us-west-2.compute.amazonaws.com', function(err, data) {22 if (err) return console.error(err);23 console.log('location: %j', data);24});25var wpt = require('webpagetest');26var wpt = new WebPageTest('www.webpagetest.org');27wpt.getTest('ec2-54-201-26-65.us-west-2.compute.amazonaws.com', function(err, data) {28 if (err) return console.error(err);29 console.log('test: %j', data);30});31var wpt = require('webpagetest');32var wpt = new WebPageTest('www.webpagetest.org');33wpt.getTestStatus('ec2-54-201-26-65.us-west-2.compute.amazonaws.com', function(err, data) {34 if (err) return console.error(err
Using AI Code Generation
1var wpt = require('webpagetest');2var test = new wpt('API_KEY');3 if (err) {4 console.log(err);5 } else {6 test.getTestResults(data.data.testId, function(err, data) {7 if (err) {8 console.log(err);9 } else {10 console.log(data);11 }12 });13 }14});
Using AI Code Generation
1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org');3 if (err) return console.log(err);4 wpt.getTestStatus(data.data.testId, function(err, data) {5 if (err) return console.log(err);6 console.log(data);7 });8});9{ statusCode: 200,10 { statusCode: 200,11 data: { testId: '140709_7R_1e5', ownerKey: '1e5' } } }12var wpt = require('wpt');13var wpt = new WebPageTest('www.webpagetest.org');14 if (err) return console.log(err);15 wpt.getTestStatus(data.data.testId, function(err, data) {16 if (err) return console.log(err);17 console.log(data);18 });19});20{ statusCode: 200,21 { statusCode: 200,22 data: { testId: '140709_7R_1e5', ownerKey: '1e5' } } }23var wpt = require('wpt');24var wpt = new WebPageTest('www.webpagetest.org');25 if (err) return console.log(err);26 wpt.getTestStatus(data.data.testId, function(err, data) {27 if (err) return console.log(err);28 console.log(data);29 });30});31{ statusCode: 200,32 { statusCode: 200,33 data: { testId: '
Using AI Code Generation
1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org');3var options = {4};5 if (err) {6 console.log('Error: ' + err);7 } else {8 console.log('Test completed');9 console.log('Test ID: ' + data.data.testId);10 console.log('Test URL: ' + data.data.summary);11 console.log('View results: ' + data.data.userUrl);12 wpt.getTestResults(data.data.testId, function(err, data) {13 if (err) {14 console.log('Error: ' + err);15 } else {16 console.log('Test results: ' + data.data.median.firstView.TTFB);17 }18 });19 }20});21I am trying to use wpt.getTestResults() method but it is not working for me. I am getting the following error:
Using AI Code Generation
1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3 if (err) {4 console.log('Error: ' + err);5 } else {6 console.log('ValueId: ' + data);7 }8});9var wpt = require('webpagetest');10var wpt = new WebPageTest('www.webpagetest.org');11 if (err) {12 console.log('Error: ' + err);13 } else {14 console.log('Results: ' + data);15 }16});17var wpt = require('webpagetest');18var wpt = new WebPageTest('www.webpagetest.org');19 if (err) {20 console.log('Error: ' + err);21 } else {22 console.log('Status: ' + data);23 }24});25var wpt = require('webpagetest');26var wpt = new WebPageTest('www.webpagetest.org');27wpt.getLocations(function(err, data) {28 if (err) {29 console.log('Error: ' + err);30 } else {31 console.log('Locations: ' + data);32 }33});34var wpt = require('webpagetest');35var wpt = new WebPageTest('www.webpagetest.org');36wpt.getTesters(function(err, data) {37 if (err) {38 console.log('Error: ' + err);39 } else {40 console.log('Testers: ' + data);41 }42});
Using AI Code Generation
1var wpt = require('wpt');2wpt.valueId('test', function(err, data){3 if(err){console.log(err);}4 else{console.log(data);}5});6{ id: 'test' }7var wpt = require('wpt');8wpt.valueId('test', function(err, data){9 if(err){console.log(err);}10 else{11 console.log(data);12 wpt.setValueId('test', 50, function(err, data){13 if(err){console.log(err);}14 else{console.log(data);}15 });16 }17});18{ id: 'test' }19{ id: 'test' }20var wpt = require('wpt');21wpt.valueName('test', function(err, data){22 if(err){console.log(err);}23 else{24 console.log(data);25 wpt.setValueName('test', 50, function(err, data){26 if(err){console.log(err);}27 else{console.log(data);}28 });29 }30});31{ name: 'test' }32{ name: 'test' }
Using AI Code Generation
1var valueId = require('./wptb-valueId');2var value = valueId.valueId(10);3console.log(value);4exports.valueId = function (value) {5 return value;6}7var valueId = require('./wptb-valueId');8var value = valueId.valueId(10);9console.log(value);10module.exports = {11 valueId: function (value) {12 return value;13 }14}15var valueId = require('./wptb-valueId');16var value = valueId(10);17console.log(value);18module.exports = function (value) {19 return value;20}
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 wpt 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?
