Mini Kabibi Habibi
(function (wa, $) {
var ui = wa.UI = wa.UI || {};
var _window = wa.Core.Window;
var _external = wa.Utils.External;
var _instrument = wa.Utils.Instrument;
var _settings = wa.Utils.Settings;
const TOGGLE_COUNT = "toggle_count";
ui.accept_extension = function () {
var $el = {
version1: $(".version1"),
cardContent: $("#card-content"), // different css for different versions
cardImage: $("#card-image"), // different css for different versions
featureDisabledSection: $("#feature-disabled"),
progressPic: $("#progress"),
contentInfoTitle: $("#info-title"),
contentInfoText: $("#info-text"),
feature1Label: $("#feature-1-label"),
feature1Name: $("#feature-1-name"),
freeLabel1: $("#free-label-1"),
feature1Desc: $("#feature-1-desc"),
feature2Name: $("#feature-2-name"),
freeLabel2: $("#free-label-2"),
feature2Desc: $("#feature-2-desc"),
checkboxContainer: $("#switch-set-secure-search"),
checkboxInput: $("#set-secure-search-checkbox"),
featureEnabledLabelContainerSS: $("#feature-enabled-label-container-ss"),
doneButton: $("#done"),
toast: $("#toast"),
closeIcon: $("#close-icon"),
squareCheckbox: $("#set-secure-search-square-checkbox"),
squareCheckboxChecked: $("#checkbox-checked"),
squareCheckboxUnchecked: $("#checkbox-unchecked"),
};
function adjustVersionUI() {
// different css styling for same html elements
_window.setWidth("800");
_window.setHeight("565");
$el.checkboxInput.attr("checked", true);
$el.version1.attr('class', 'hide');
$el.doneButton.removeClass('button__fixed__width1');
$el.doneButton.addClass('button__fixed__width2_3');
$el.cardContent.removeClass('card__content1');
$el.cardContent.addClass('card__content2_3');
$el.cardImage.removeClass('card__image1');
$el.cardImage.addClass('card__image2_3');
$el.contentInfoText.removeClass('info__text1');
$el.contentInfoText.addClass('info__text2_3');
$el.toast.removeClass('toast1');
$el.toast.addClass('toast2_3');
$el.featureDisabledSection.addClass('feature__disabled__wider');
$el.feature2Desc.addClass('feature__2__desc__wider');
}
function isCheckboxChecked(showCheckbox) {
return (showCheckbox && $el.squareCheckboxChecked.is(':visible')) || (!showCheckbox && $el.checkboxInput.is(":checked"));
}
function checkboxUncheckedActions(content, lang) {
$el.progressPic.attr("src", content.ProgressPicChangable.Unchecked);
$el.contentInfoTitle.text(lang(content.header.unchecked));
$el.contentInfoText.text(lang(content.info.unchecked));
}
function checkboxCheckedActions(content, lang) {
$el.progressPic.attr("src", content.ProgressPicChangable.Checked);
$el.contentInfoTitle.text(lang(content.header.checked));
$el.contentInfoText.text(lang(content.info.checked));
}
function getToggleCount() {
var tc = _settings.getSettingScopedWithDefault(-1, "0", TOGGLE_COUNT);
return tc.toString();
}
function initComponents(content, lang, showCloseBtn, showCheckbox, toggleInitiallyOff) {
if (!content || !lang) {
return;
}
adjustVersionUI(content);
if (showCheckbox) {
//Hide the toggle
$el.checkboxContainer.attr("class", "invisible");
//Hide the checked or unchecked checkbox
toggleInitiallyOff ? $el.squareCheckboxChecked.attr("class", "invisible") : $el.squareCheckboxUnchecked.attr("class", "invisible");
$el.squareCheckbox.click(function () {
_settings.increment_setting(TOGGLE_COUNT, "0");
//Switch the checkbox
if (isCheckboxChecked(showCheckbox)) {
$el.squareCheckboxChecked.attr("class", "invisible");
$el.squareCheckboxUnchecked.attr("class", "visible");
checkboxUncheckedActions(content, lang);
}
else {
$el.squareCheckboxChecked.attr("class", "visible");
$el.squareCheckboxUnchecked.attr("class", "invisible");
checkboxCheckedActions(content, lang);
}
});
}
else {
//Hide the checkbox completely
$el.squareCheckbox.attr("class", "invisible");
$el.checkboxInput.prop("checked", !toggleInitiallyOff);
$el.checkboxContainer.removeClass("hide");
}
//Initial progress img should match with initial toggle off
if (toggleInitiallyOff) {
$el.progressPic.attr("src", content.ProgressPicChangable.Unchecked);
}
//Toggle listener
$el.checkboxInput.click(function () {
_settings.increment_setting(TOGGLE_COUNT, "0");
isCheckboxChecked(showCheckbox) ? checkboxCheckedActions(content, lang) : checkboxUncheckedActions(content, lang);
});
//Done button listener
$el.doneButton.click(function () {
var isChecked = isCheckboxChecked(showCheckbox);
var telemetryActionType = isChecked ? "Accepted" : "Declined";
var analyticsEvent = {
_event_name: "wa_secure_search_toast_interaction",
action_type: telemetryActionType,
browser: _instrument.getBrowserTypeCode(),
provider: _instrument.getSecureSearchProvider(),
toast_type: "ClawBack",
toggle_count: getToggleCount(),
meta_data: "close_btn=" + Number(showCloseBtn)
};
_instrument.sendAnalyticsEvent(analyticsEvent);
if (isChecked) {
wa.Core.SecureSearch.enable();
}
else {
wa.Core.SecureSearch.disable();
}
_window.close();
});
//Close icon listener
if (showCloseBtn) {
$el.closeIcon.removeClass("not_visible");
_window.setDraggableOffset(0, 40);
$el.closeIcon.click(function () {
var analyticsEvent = {
_event_name: "wa_secure_search_toast_interaction",
action_type: "Closed_Explicit",
browser: _instrument.getBrowserTypeCode(),
provider: _instrument.getSecureSearchProvider(),
toast_type: "ClawBack",
toggle_count: getToggleCount(),
meta_data: "close_btn=1"
};
_instrument.sendAnalyticsEvent(analyticsEvent);
_window.close();
});
}
}
function fillText(content, lang, toggleInitiallyOff) {
if (toggleInitiallyOff) {
$el.contentInfoTitle.text(lang(content.header.unchecked));
$el.contentInfoText.text(lang(content.info.unchecked));
}
else {
$el.contentInfoTitle.text(lang(content.header.checked));
$el.contentInfoText.text(lang(content.info.checked));
}
$el.feature2Name.text(lang(content.Feature2Name));
$el.feature2Desc.text(lang(content.Feature2Desc));
$el.freeLabel2.text(lang(content.FreeLabel2));
$el.doneButton.val(lang(content.ButtonWant));
const alternateBtnText = _settings.getSettingScopedWithDefault(false, "1", "alternate_btn_text_enabled");
if (alternateBtnText) {
$el.doneButton.val(lang("SEARCH_TOAST_ALTERNATIVE_TO_TOGGLE_APPLY"));
}
$el.feature1Label.text(lang(content.Feature1Label));
$el.feature1Name.text(lang(content.Feature1Name));
$el.feature1Desc.text(lang(content.Feature1Desc));
$el.freeLabel1.text(lang(content.FreeLabel1));
const toast_copy_override_enabled = _settings.getSettingScopedWithDefault(false, "1", "toast_copy_override_enabled");
const toast_copy_override_variant = _settings.getSettingScopedWithDefault(0, "1", "toast_copy_override_variant");
if (toast_copy_override_enabled && toast_copy_override_variant >= 1 && toast_copy_override_variant <= 4) {
var text = "SEARCH_TOAST_TOAST_COPY_VARIANT_" + String(toast_copy_override_variant);
window.external.log("Inside Toast Copy Override Block and the text formed is " + text);
$el.feature2Desc.text(lang(text));
$el.feature2Desc.css("width", "92%");
}
}
show = function () {
window.external.log("Show start");
_window.ready(function () {
window.external.log("Before parse");
var payload = JSON.parse(_external.getArgument("toast_data"));
window.external.log("Before init");
init(payload);
window.external.log("Before increment");
_settings.increment_setting("toast_variation_phase_2_show_count", "0");
window.external.log("Before show");
_window.show();
});
}
init = function (payload) {
var lang = wa.Utils.Lang(wa.Utils.Lang.ResType.SSTOAST).get;
var content = { // Common L10Ns among all variations
Feature1Label: "SEARCH_TOAST_TOGGLE_FEATURE_1_ON",
Feature1Name: "SEARCH_TOAST_TOGGLE_FEATURE_1_NAME",
Feature1Desc: "SEARCH_TOAST_TOGGLE_FEATURE_1_DESC",
FreeLabel1: "SEARCH_TOAST_TOGGLE_FREE_LABEL",
Feature2Name: "SEARCH_TOAST_TOGGLE_FEATURE_2_NAME",
Feature2Desc: "SEARCH_TOAST_TOGGLE_FEATURE_2_DESC",
FreeLabel2: "SEARCH_TOAST_TOGGLE_FREE_LABEL",
ButtonWant: "SEARCH_TOAST_TOGGLE_BUTTON_SS_PROTECTED",
ButtonDontWant: "SEARCH_TOAST_TOGGLE_BUTTON_SS_UNPROTECTED",
ProgressPicChangable: {
Checked: "wacore:mfw\\packages\\builtin\\wa-oem-ss-toast-variants-step2.png",
Unchecked: "wacore:mfw\\packages\\builtin\\wa-oem-ss-toast-variants-step1.png",
},
header: {
checked: "SEARCH_TOAST_TOGGLE_VARIANT_4_CHECKED_HEADER",
unchecked: "SEARCH_TOAST_TOGGLE_VARIANT_4_UNCHECKED_HEADER"
},
info: {
checked: "SEARCH_TOAST_TOGGLE_VARIANT_4_CHECKED_INFO",
unchecked: "SEARCH_TOAST_TOGGLE_VARIANT_4_UNCHECKED_INFO"
}
};
if (!content) {
_window.close();
return;
}
//Check if close button should be shown
const showCloseBtn = _settings.getSettingScopedWithDefault(false, "1", "ss_toast_close_btn_enable");
//Check if checkbox should be shown instead of toggle
const showCheckbox = _settings.getSettingScopedWithDefault(false, "1", "ss_toast_checkbox_enabled");
//Check if toggle should initially be switched off
const toggleInitiallyOff = _settings.getSettingScopedWithDefault(false, "1", "toggle_initially_off_enabled");
initComponents(content, lang, showCloseBtn, showCheckbox, toggleInitiallyOff);
fillText(content, lang, toggleInitiallyOff);
//Clear toggle count
window.external.SetSetting("0", TOGGLE_COUNT, 0);
// Impression telemetry
const metadata = "close_btn=" + Number(showCloseBtn);
var analyticsEvent = {
_event_name: "wa_secure_search_toast_impression",
action_type: "Impression",
browser: _instrument.getBrowserTypeCode(),
provider: _instrument.getSecureSearchProvider(),
toast_type: "ClawBack",
meta_data: metadata
};
//Capturing metadata in a setting for c++ Alt+F4 case.
const metadata_setting_name = "ss_toast_telemetry_metadata_" + _instrument.getBrowserTypeCode().toLowerCase();
window.external.SetSetting("1", metadata_setting_name, metadata);
_instrument.sendAnalyticsEvent(analyticsEvent);
}
return {
show: show
}
};
}(window.WebAdvisor = window.WebAdvisor || {}, jQuery));
// Show secure search toggle toast
$(function () {
window.external.log("the very start");
var toast = new WebAdvisor.UI.accept_extension();
toast.show();
});
//D9141DD40D7A2455CE8F80F4FC35A440042C87A73286BFECBEA8CDAFF021C3DDD54B61E8BFA7A0AF83AD79C94ABBB97EA6A24481E92D1A9AF8046F39E0CE4D48++