| 1 |
'use strict'; |
| 2 |
(function ($) { |
| 3 |
|
| 4 |
$.fn.wowFloatMenuLiveBuilder = function () { |
| 5 |
this.each(function (index, element) { |
| 6 |
const labelText = $(this).find('[data-field="menu_1-item_tooltip"]').val(); |
| 7 |
const typeText = $(this).find('[data-field="menu_1-item_type"] option:selected').text(); |
| 8 |
const subItem = $(this).find('[data-field="menu_1-item_sub"]'); |
| 9 |
const iconValue = getIcon(this); |
| 10 |
|
| 11 |
|
| 12 |
const icon = $(this).find('.wpie-item_heading_icon'); |
| 13 |
const label = $(this).find('.wpie-item_heading_label'); |
| 14 |
const type = $(this).find('.wpie-item_heading_type'); |
| 15 |
const sub = $(this).find('.wpie-item_heading_sub'); |
| 16 |
|
| 17 |
const color = $(this).find('[data-field="menu_1-color"]').val(); |
| 18 |
const hcolor = $(this).find('[data-field="menu_1-hcolor"]').val(); |
| 19 |
const bcolor = $(this).find('[data-field="menu_1-bcolor"]').val(); |
| 20 |
const hbcolor = $(this).find('[data-field="menu_1-hbcolor"]').val(); |
| 21 |
const font = $(this).find('[data-field="menu_1-item_tooltip_font"]').val(); |
| 22 |
const style = $(this).find('[data-field="menu_1-item_tooltip_style"]').val(); |
| 23 |
const weight = $(this).find('[data-field="menu_1-item_tooltip_weight"]').val(); |
| 24 |
|
| 25 |
icon.css({'color': color, 'background': bcolor}); |
| 26 |
label.css({ |
| 27 |
'color': color, |
| 28 |
'background': bcolor, |
| 29 |
'font-family': font, |
| 30 |
'font-style': style, |
| 31 |
'font-weight': weight |
| 32 |
}); |
| 33 |
|
| 34 |
icon.add(label).hover( |
| 35 |
function () { // This runs when the mouse enters either the icon or label |
| 36 |
icon.css({'color': hcolor, 'background': hbcolor}); |
| 37 |
label.css({'color': hcolor, 'background': hbcolor}); |
| 38 |
}, |
| 39 |
function () { // This runs when the mouse leaves either the icon or label |
| 40 |
icon.css({'color': color, 'background': bcolor}); |
| 41 |
label.css({'color': color, 'background': bcolor}); |
| 42 |
} |
| 43 |
); |
| 44 |
|
| 45 |
|
| 46 |
label.text(labelText); |
| 47 |
type.text(typeText); |
| 48 |
if (subItem.is(':checked')) { |
| 49 |
sub.html('<em>sub item</em>'); |
| 50 |
} else { |
| 51 |
sub.html(''); |
| 52 |
} |
| 53 |
icon.html(iconValue); |
| 54 |
|
| 55 |
|
| 56 |
}); |
| 57 |
|
| 58 |
function getIcon(element) { |
| 59 |
|
| 60 |
const custom_text = $(element).find('[data-field="menu_1-item_custom_text_check"]'); |
| 61 |
const item_custom = $(element).find('[data-field="menu_1-item_custom"]'); |
| 62 |
if ($(custom_text).is(':checked')) { |
| 63 |
return $(element).find('[data-field="menu_1-item_custom_text"]').val(); |
| 64 |
} |
| 65 |
|
| 66 |
if ($(item_custom).is(':checked')) { |
| 67 |
const icon_custom = $(element).find('[data-field="menu_1-item_custom_link"]').val(); |
| 68 |
if (isValidURL(icon_custom)) { |
| 69 |
return `<img src="${icon_custom}">`; |
| 70 |
} else { |
| 71 |
return `<span class="dashicons dashicons-camera-alt"></span>`; |
| 72 |
} |
| 73 |
} |
| 74 |
let icon = $(element).find('[data-field="menu_1-item_icon"]').val(); |
| 75 |
return `<span class="${icon}"></span>`; |
| 76 |
|
| 77 |
} |
| 78 |
|
| 79 |
function isValidURL(string) { |
| 80 |
var regex = new RegExp( |
| 81 |
'^(https?:\\/\\/)?' + // protocol |
| 82 |
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name |
| 83 |
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address |
| 84 |
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path |
| 85 |
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string |
| 86 |
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator |
| 87 |
return !!regex.test(string); |
| 88 |
} |
| 89 |
} |
| 90 |
|
| 91 |
}(jQuery)); |
