var themeURL, defaultThemeURL; // setup event handlers for theme chooser fields function scThemeChooserSetup() { // This handles changing visibility of theme chooser in theme nav block, for demo mode var themeShowLink = $('theme_nav_show'); if (themeShowLink) themeShowLink.addEvent('click', function() {scThemeNavShow(this); return false}); // for when they click "change" link on an already assigned file option $$('.theme_chooser select').addEvent('change', function() {scThemeChooserChange(this); return false;}); $$('.theme_chooser .themeSetButton').addEvent('click', function() {scThemeSetStartPoint(this); return false;}); $$('.theme_chooser .themeSaveButton').addEvent('click', function() {scThemeSave(this); return false;}); // toggle visibility of some variants based on values of others $$('.theme_var').each( function(themeVar) { scThemeChooserHide(themeVar,true); } ) // hide variants after "custom" $$('.theme_chooser .hide').getParent('li').each(function(li){if (!li) return; li.setStyle('display','none');}); // if the starting point already chosen does not match the current theme if ($('starting_point_mismatch')) { var themeSaveFld = $('Custom_Variants'); // don't ask if in demo mode, or if the theme record does not have any saved customizations var noPrompt = $$('body')[0].hasClass('demo_mode') || (themeSaveFld && !themeSaveFld.value); // reset starting point if needed, either automatically or via a prompt if (noPrompt || confirm("This theme has a starting point for customization that does not match your current theme setting.\r\nWould you like to use your current theme as a starting point?\r\n\r\nTo start with your current theme setting, click OK. To start with the previously saved starting point, click CANCEL.")) { // this sets the chosen theme on the record equal to the current theme themeSaveFld.value = $('starting_point_mismatch').value; // set that current theme to the starting point scThemeSetStartPoint($$('.theme_chooser .themeSetButton'), noPrompt); } } // If on the theme record in the control panel, and Custom_Variants has no value // we need to set Custom_Variants for the first time by calling scThemeChooserChange() if ($('record_form') && $$('.theme_chooser') && $('Custom_Variants') && !$('Custom_Variants').value) { scThemeChooserChange(); // set that current theme to the starting point scThemeSetStartPoint($$('.theme_chooser .themeSetButton'), 1); } // If default theme chooser, we need to call scThemeChooserChange() once to make hidden fields appear properly :( if ($('default_theme_chooser')) scThemeChooserChange(); } // called when any field inside the theme_chooser div is changed function scThemeChooserChange(fld) { // this can be called without fld being set, which just triggers setting Custom_Variants field if (!fld) fld = $$('.theme_var1')[0]; // above setting of fld may fail if theme has no variants. Code below accounts for that var themeFld = fld != undefined ? fld.getParent('.theme_chooser').getElement('.theme_name') : $$('.theme_name')[0]; // in case there are more than one theme chooser fields, we need to grab the changed field's parent var themeChooser = themeFld.getParent('.theme_chooser'); // this tells us if the theme chooser is being used to change default theme var isDefaultThemeChooser = $('default_theme_chooser'); // if using default theme chooser and the theme field changed, reload window to load variants for that theme if (fld != undefined && isDefaultThemeChooser && fld.hasClass('theme_name')) { toggleWait('on','Loading variants...'); window.location = "SC_CP_PAGE_HTTP?table=Themes&ctv=" + fld.value; } // if using theme chooser on customer record (or some other record in the future), this will be set var recordForm = themeChooser.getParent('#record_form'); // grab variant fields (may or may not be present) var themeVar1 = themeChooser.getElement('.theme_var1'); var themeVar2 = themeChooser.getElement('.theme_var2'); var themeVar3 = themeChooser.getElement('.theme_var3'); var themeVar4 = themeChooser.getElement('.theme_var4'); var themeVar5 = themeChooser.getElement('.theme_var5'); var themeVar6 = themeChooser.getElement('.theme_var6'); var themeVar7 = themeChooser.getElement('.theme_var7'); var themeVar8 = themeChooser.getElement('.theme_var8'); var themeVar9 = themeChooser.getElement('.theme_var9'); var themeVar10 = themeChooser.getElement('.theme_var10'); var themeVar11 = themeChooser.getElement('.theme_var11'); var themeVar12 = themeChooser.getElement('.theme_var12'); var themeVar13 = themeChooser.getElement('.theme_var13'); var themeVar14 = themeChooser.getElement('.theme_var14'); var themeVar15 = themeChooser.getElement('.theme_var15'); var themeVar16 = themeChooser.getElement('.theme_var16'); var themeVar17 = themeChooser.getElement('.theme_var17'); var themeVar18 = themeChooser.getElement('.theme_var18'); var themeVar19 = themeChooser.getElement('.theme_var19'); var themeVar20 = themeChooser.getElement('.theme_var20'); // we can't change the theme without at least the main theme choice if (!themeFld || !themeFld.value) return; var themeFlds = $$('.theme_var'); // need to first show all fields, in case any were hidden previously themeFlds.getParent('li').setStyle('display', 'inline-block'); themeFlds.setStyle('display', 'inline'); // hide other fields based on the value of this one and all others, if needed themeFlds.each( function(themeFld) {scThemeChooserHide(themeFld)} ); // in the control panel, changing any of the theme fields on the theme record's Starting Point // will cause all the INI setting fieldsets to be hidden, and will make a button appear to set // that starting point var iniFieldSets = $$('fieldset.theme_ini_settings'); if (iniFieldSets.length) { iniFieldSets.setStyle('display','none'); var setBtn = themeChooser.getElement('.themeSetButton'); setBtn.set('html','Set Starting Point'); } var themeSetting; // if changing actual theme field and there is no variants for it if (fld == undefined) { themeSetting = themeFld.value; // if changing actual theme rather than its variant OR // when changing variant1 to special custom INI value } else if ($(fld).value.contains('^^')) { // hide the variant fields scThemeChooserHide(fld); themeSetting = fld.value; // append current values for variants, ONLY if not changing actual theme } else { var defaultValPieces = themeFld.value.split('^^'); var themeRn = defaultValPieces[0]; themeSetting = themeRn; if (themeVar1) themeSetting += '^^' + themeVar1.value; if (themeVar2) themeSetting += '^^' + themeVar2.value; if (themeVar3) themeSetting += '^^' + themeVar3.value; if (themeVar4) themeSetting += '^^' + themeVar4.value; if (themeVar5) themeSetting += '^^' + themeVar5.value; if (themeVar6) themeSetting += '^^' + themeVar6.value; if (themeVar7) themeSetting += '^^' + themeVar7.value; if (themeVar8) themeSetting += '^^' + themeVar8.value; if (themeVar9) themeSetting += '^^' + themeVar9.value; if (themeVar10) themeSetting += '^^' + themeVar10.value; if (themeVar11) themeSetting += '^^' + themeVar11.value; if (themeVar12) themeSetting += '^^' + themeVar12.value; if (themeVar13) themeSetting += '^^' + themeVar13.value; if (themeVar14) themeSetting += '^^' + themeVar14.value; if (themeVar15) themeSetting += '^^' + themeVar15.value; if (themeVar16) themeSetting += '^^' + themeVar16.value; if (themeVar17) themeSetting += '^^' + themeVar17.value; if (themeVar18) themeSetting += '^^' + themeVar18.value; if (themeVar19) themeSetting += '^^' + themeVar19.value; if (themeVar20) themeSetting += '^^' + themeVar20.value; } themeURL = "SC_STORE_PAGE_DYN?theme_current=" + themeSetting; defaultThemeURL = "SC_CP_PAGE_HTTP?theme_default=" + themeSetting + ""; // if changing current theme in storefront if (themeChooser.hasClass('themeCurrent')) { window.location = themeURL; scThemeLoading(themeChooser); } else if (themeChooser.hasClass('themeSave')) { var themeSaveFld = $('Custom_Variants'); // if no field with that ID found, try by class name instead if (!themeSaveFld) { themeSaveFld = $$('.Custom_Variants'); if (themeSaveFld) themeSaveFld = themeSaveFld[0]; } if (themeSaveFld) themeSaveFld.value = themeSetting; // changing customer's theme setting on their record in control panel to a different theme name // we need to reload the page to load the variants for chosen theme if (recordForm && fld.hasClass('theme_name')) { toggleWait('on','Loading theme variants...'); recordForm.submit(); } } } // called to make the theme chooser appear to be loading function scThemeLoading(themeChooser) { var wait = themeChooser.getElement('.wait'); wait.removeClass('sc_hide'); wait.removeClass('hide'); wait.setStyle('display','inline'); $$('.theme_chooser li').setStyle('display','none'); var cog = themeChooser.getElement('.cog'); if (cog) cog.setStyle('display','none'); } // Purpose of this function is to hide theme variants based on the values for others, // using embedded CSS classes containing rules. // setupRun should be set to true when this function is called for initial setup of the page function scThemeChooserHide(srcField, setupRun) { // srcField is a variant field that's value will trigger hiding another variant field if (!srcField) return; // if srcField is the first variant and it is set to "custom" we need to hide all other variants // actual value will be like 13c^^blah^^yada^^soforth if ( == 'theme_var1' && srcField.value.indexOf('^^') != -1) { $$('.theme_var').each(function(fld) {if ( != 'theme_var1') fld.getParent('li').setStyle('display','none');}); return; } // hide fields that should be hidden when srcField's value is what it currently is $$('.hideWhen' + + 'xxx' + srcField.value).getParent('li').setStyle('display','none'); // hide fields that only have one choice if (srcField.options.length == 1) srcField.getParent('li').setStyle('display','none'); } // called to handle showing and hiding the theme chooser nav block content function scThemeNavShow(showLink) { var themeNav = $('theme_nav'); if (themeNav) { if (themeNav.hasClass('sc_show')) { fadeOut(themeNav); themeNav.removeClass('sc_show'); } else { fadeIn(themeNav); themeNav.addClass('sc_show'); } } } function scThemeSave(btn) { if (!defaultThemeURL) defaultThemeURL = 'index.php?Themes'; toggleWait('on','Setting Default Theme...'); window.location = defaultThemeURL; } function scThemeSetStartPoint(btn, noPrompt) { var recordForm = $('record_form'); var confirmMsg, resetValue; if (btn.hasClass('themeUpdateButton')) { confirmMsg = 'Click OK to continue, which will merge your custom styles with any "Starting Point" settings that have been changed. You will then be able to customize them further. \r\n\r\nWhen done, don\'t forget to save your changes.'; resetValue = 2; } else { confirmMsg = 'When setting the starting point for the custom variant of this theme, any custom styles you specified in this section will be reset to defaults.\r\n\r\nClick OK to continue, which will load the default settings for this starting point which you will then be able to customize. \r\n\r\nWhen done, don\'t forget to save your changes.'; resetValue = 1; } if ($$('body')[0].hasClass('demo_mode') || noPrompt || confirm(confirmMsg)) { toggleWait('on','Loading settings...'); // this tells us to (1) reload the INI settings from the default ini files in the theme folder // OR to (2) merge starting point changes with custom INI settings from DB $('themeIniReset').value = resetValue; recordForm.submit(); } else { toggleWait('off'); } }