Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/gsw/features_showcase.tmpl
[% INCLUDE gsw/header.tmpl %]
[% USE Whostmgr; %]
<script type="text/javascript" src="[% MagicRevision('/yui/cookie/cookie-min.js') %]"></script>
<div id="content">
<div class="showcaseFeatures">
<form id="showcaseFeaturesForm" action="feature_showcase_do" method="POST">
<h1 id="newFeaturesTitle">[% locale.maketext("Feature Showcase") %]</h1>
<div class="whatsNew">
<p>
[% locale.maketext("The system added new features during this [asis,cPanel amp() WHM] upgrade. You can enable some of these features directly in this interface.") %]
[% locale.maketext("Select “[_1]” next to the features that you wish to use and, then click “[_2]” at the bottom of the interface.", locale.maketext('Enable'), locale.maketext('Save Settings')) %]
</p>
</div>
[% IF data.feature_collection.0.size -%]
<div id="spotlightFeatures" class="releaseTypeContainer">
<div class="spotlightFeatureContainer">
<div class="recommendedFeatureTitle spotlightFeatureTitle">
<h2>[% locale.maketext("Feature Spotlight") %]</h2>
</div>
[% FOREACH feature IN data.feature_collection.0 -%]
<div id="[% feature.driver -%]" class="feature spotlight[% IF !loop.next.spotlight_feature -%] last[% END -%]">
<fieldset>
<div class="titleContainer">
<h3>[% feature.name -%]</h3>
[% IF feature.helpurl -%]
<div class="featureUrl">
<a href="[% feature.helpurl -%]" target="_blank">[% locale.maketext("More Information") %]</a>
</div>
[% END -%]
</div>
[% IF feature.forced || feature.readonly %]
<div class="featureBlurbNoFields">
[% ELSE %]
<div class="featureBlurb">
[% END %]
<p>[% feature.blurb_html -%]</p>
</div>
[% IF !feature.forced && !feature.readonly %]
<div class="fields">
<div class="inputContainer">
<label class="fancyRadio checked enable" title="[% locale.maketext('Enable') %]">
<!-- pre-select 'Enabled' for recommended features -->
<input id="[% feature.driver -%]_enable" type="radio" name="[% feature.driver -%]" value="enabled" checked="checked"/>
<span class="fancyText">[% locale.maketext("Enable") %]</span>
</label>
<label class="unchecked" title="[% locale.maketext('No, thank you') %]">
<input id="[% feature.driver -%]_disable" type="radio" name="[% feature.driver -%]" value="disabled" />
<span class="noThanksText">[% locale.maketext("No, thank you") %]</span>
</label>
</div>
</div>
[% END %]
</fieldset>
</div>
[% END -%]
</div>
</div>
[% END -%]
[% IF data.feature_collection.1.size -%]
<div id="newRecommended" class="releaseTypeContainer">
<div class="recommendedFeatureContainer">
<div class="recommendedFeatureTitle">
<h2>[% locale.maketext("Recommended [numerate,_1,Feature,Features]", data.feature_collection.1.size) %]</h2>
</div>
[% FOREACH feature IN data.feature_collection.1 -%]
<div id="[% feature.driver -%]" class="feature recommended [% IF !loop.next.recommended -%]last[% END -%]">
<fieldset>
<div class="titleContainer">
<h3>[% feature.name -%]</h3>
[% IF feature.helpurl -%]
<div class="featureUrl">
<a href="[% feature.helpurl -%]" target="_blank">[% locale.maketext("More Information") %]</a>
</div>
[% END -%]
</div>
[% IF feature.forced || feature.readonly %]
<div class="featureBlurbNoFields">
[% ELSE %]
<div class="featureBlurb">
[% END %]
<p>[% feature.blurb_html -%]</p>
</div>
[% IF !feature.forced && !feature.readonly %]
<div class="fields">
<div class="inputContainer">
<label class="fancyRadio checked enable" title="[% locale.maketext('Enable') %]">
<!-- pre-select 'Enabled' for recommended features -->
<input id="[% feature.driver -%]_enable" type="radio" name="[% feature.driver -%]" value="enabled" checked="checked"/>
<span class="fancyText">[% locale.maketext("Enable") %]</span>
</label>
<label class="unchecked" title="[% locale.maketext('No, thank you') %]">
<input id="[% feature.driver -%]_disable" type="radio" name="[% feature.driver -%]" value="disabled" />
<span class="noThanksText">[% locale.maketext("No, thank you") %]</span>
</label>
</div>
</div>
[% END %]
</fieldset>
</div>
[% END -%]
</div>
</div>
[% END -%]
[% IF data.feature_collection.2.size -%]
<h2>[% locale.maketext("New [numerate,_1,Feature,Features]", data.feature_collection.2.size) %]</h2>
<div id="newGeneral" class="releaseTypeContainer">
<div class="generalFeatureContainer">
[% FOREACH feature IN data.feature_collection.2 -%]
<div id="[% feature.driver -%]" class="feature general [% IF !data.feature_collection.0.size -%]generalOnly[% END -%]">
<fieldset>
<div class="titleContainer">
<h3>[% feature.name -%]</h3>
[% IF feature.helpurl -%]
<div class="featureUrl">
<a href="[% feature.helpurl -%]" target="_blank">[% locale.maketext("More Information") %]</a>
</div>
[% END -%]
</div>
[% IF feature.forced || feature.readonly %]
<div class="featureBlurbNoFields">
[% ELSE %]
<div class="featureBlurb">
[% END %]
<p>[% feature.blurb_html -%]</p>
</div>
[% IF !feature.forced && !feature.readonly %]
<div class="fields">
<div class="inputContainer">
<label class="[% IF feature.defaultvalue -%]checked[% ELSE -%]unchecked[% END -%] enable" title="[% locale.maketext('Enable') %]">
<input id="[% feature.driver -%]_enable" type="radio" name="[% feature.driver -%]" value="enabled" [% IF feature.defaultvalue -%] checked="checked"[% END -%]/>
<span class="radioText">[% locale.maketext("Enable") %]</span>
</label>
<label class="[% IF !feature.defaultvalue -%]checked[% ELSE -%]unchecked[% END -%]" title="[% locale.maketext('No, thank you') %]">
<input id="[% feature.driver -%]_disable" type="radio" name="[% feature.driver -%]" value="disabled" [% IF ! feature.defaultvalue -%] checked="checked"[% END -%]>
<span class="noThanksText">[% locale.maketext("No, thank you") %]</span>
</label>
</div>
</div>
[% END %]
</fieldset>
</div>
[% END -%]
</div>
</div>
[% END -%]
[% IF data.feature_collection.3.size -%]
<h2 id="additionalFeaturesTitle">[% locale.maketext("Previously Configured [numerate,_1,Feature,Features]", data.feature_collection.3.size) %]</h2>
<div id="modified" class="releaseTypeContainer">
[% FOREACH feature IN data.feature_collection.3 -%]
<div id="[% feature.driver -%]" class="feature [% IF feature.recommended -%] recommended [% ELSIF feature.spotlight_feature -%] spotlight [% ELSE -%] general [% END -%]">
<fieldset>
<div class="titleContainer">
<h3>[% feature.name -%]</h3>
[% IF feature.helpurl -%]
<div class="featureUrl">
<a href="[% feature.helpurl -%]" target="_blank">[% locale.maketext("More Information") %]</a>
</div>
[% END -%]
</div>
[% IF feature.forced || feature.readonly %]
<div class="featureBlurbNoFields">
[% ELSE %]
<div class="featureBlurb">
[% END %]
<p>[% feature.blurb -%]</p>
</div>
[% IF !feature.forced && !feature.readonly %]
<div class="fields">
<div class="inputContainer">
<label class="[% IF feature.defaultvalue -%]checked[% ELSE -%]unchecked[% END -%] enable" title="[% locale.maketext('Enable') %]">
<input id="[% feature.driver -%]_enable" type="radio" name="[% feature.driver -%]" value="enabled" [% IF feature.defaultvalue -%] checked="checked"[% END -%]/>
<span class="radioText">[% locale.maketext("Enable") %]</span>
<span class="currentState hide">([% locale.maketext("current state") %])</span>
</label>
<label class="[% IF !feature.defaultvalue -%]checked[% ELSE -%]unchecked[% END -%]" title="[% locale.maketext('Disable') %]">
<input id="[% feature.driver -%]_disable" type="radio" name="[% feature.driver -%]" value="disabled" [% IF ! feature.defaultvalue -%] checked="checked"[% END -%]/>
<span class="radioText">[% locale.maketext("Disable") %]</span>
<span class="currentState hide">([% locale.maketext("current state") %])</span>
</label>
</div>
</div>
[% END %]
</fieldset>
</div>
[% END -%]
</div>
[% END -%]
<div id="controls" class="featureControls">
<input type="hidden" name="continue"/>
<a id="cancel" class="cancel" href="javascript:void(0);" title="[% locale.maketext('Exit to WHM') %]">[% locale.maketext('Exit to WHM')%]</a>
<button type="submit" id="submitShowcaseFeatures" name="submitShowcase" title="[% locale.maketext('Save Settings') %]" class="btn-primary" >[% locale.maketext('Save Settings') %]</button>
</div>
</form>
</div><!-- End main -->
<div id="confirmationModal" class="modalPopup" style="visibility: hidden;">
<div class="hd">
<h1>[% locale.maketext("Updated Features Summary") %]</h1>
</div>
<div class="bd">
<div class="confirmationLoader"> </div>
<ul id="featureStates" class="summaryList"></ul>
</div>
<div class="ft">
<p><i>[% locale.maketext("This window will close automatically.") %]</i></p>
</div>
</div>
<div id="exitModal" class="modalPopup" style="visibility: hidden;">
<div class="hd">
<h1>[% locale.maketext("No Features Were Updated") %]</h1>
<a id="exitModalClose" class="close" href="javascript:void(0);" title="[% locale.maketext('Close') %]">[% locale.maketext('Close')%]</a>
</div>
<div class="bd">
<p>[% locale.maketext("The Feature Showcase will appear again at the next WHM login.") %]</p>
</div>
<div class="ft">
<p><i>[% locale.maketext("This window will close automatically.") %]</i></p>
</div>
</div>
</div><!-- End content -->
<script type="text/javascript">
var featureForm = DOM.get('showcaseFeaturesForm');
var inputs = featureForm.getElementsByTagName('input');
//Stripe the features
var featureContainers = ['spotlightFeatures', 'newRecommended', 'newGeneral', 'modified'];//id's
var stripeFeatures = function() {
for (var i = 0; i < featureContainers.length; i++) {
var features = YAHOO.util.Selector.query('.feature', featureContainers[i])
for (var k = 1, len = features.length; k < len; k+=2) {
DOM.addClass(features[k], 'even');
}
}
return true;
}
stripeFeatures();
//We want to keep the expected state of our radio buttons
//Some browsers will keep the changed radio button state on refresh
DOM.batch(inputs, function() {
if (this.type == 'radio' && this.getAttribute('checked') == 'checked' ) {
this.checked = true;
var parentLabel = DOM.getAncestorByTagName(this, 'label');
if(parentLabel){
var currStateElArray = DOM.getChildrenBy(
parentLabel,
function(el){
return DOM.hasClass(el, 'currentState');
});
if(currStateElArray && currStateElArray.length>0){
var currStateEl = currStateElArray[0];
DOM.setStyle(currStateEl, 'display', 'inline-block');
}
}
}
});
//Label state toggles for radio buttons
function toggleLabelState() {
var inputParent = this.parentNode;
if (DOM.hasClass(inputParent, 'unchecked')) {
DOM.replaceClass(inputParent, 'unchecked', 'checked');
var sibling = (DOM.getPreviousSibling(inputParent) != null )
? DOM.getPreviousSibling(inputParent)
: DOM.getNextSibling(inputParent);
DOM.replaceClass(sibling, 'checked', 'unchecked');
if (DOM.hasClass(sibling, 'fancyRadio')) {
//make sure that the other action is unchecked
this.checked = true;
DOM.getFirstChild(sibling).checked = false;
}
} else {
return false;
}
}
//get the current feature state
//takes a node object
var getFeatureState = function(feature) {
var checkedInput = DOM.getElementsByClassName('checked', 'label', feature);
if(checkedInput !== null && checkedInput.length !== 0) {
if (DOM.hasClass(checkedInput, 'enable')[0]) {
return "Enabled";
} else {
return "Disabled";
}
}
return null;
}
//Build the list of features and their states from form values.
var buildConfirmationData = function() {
var featureList = DOM.get('featureStates');
var features = YAHOO.util.Selector.query('.feature.general, .feature.recommended, .feature.spotlight');
DOM.batch(features, function() {
var featureTitle = YAHOO.util.Selector.query('.titleContainer h3', this, true).innerHTML;
var li = document.createElement('li');
var span = document.createElement('span');
DOM.addClass(span, 'status');
var title = document.createElement('span');
title.innerHTML = featureTitle;
var state = document.createElement('span');
if(getFeatureState(this) !== null) {
if (getFeatureState(this) === "Enabled") {
DOM.addClass(span, 'enabled');
state.innerHTML = "[% locale.maketext('Saved') %]";
} else {
DOM.addClass(span, 'disabled');
state.innerHTML = "[% locale.maketext('Saved') %]";
}
} else {
// Assuming its a forced feature
DOM.addClass(span, 'enabled');
state.innerHTML = "[% locale.maketext('Saved') %]";
}
span.appendChild(state);
li.appendChild(title);
li.appendChild(span);
featureList.appendChild(li);
});
//Stripe the list items.
var listChildren = DOM.getChildren(featureList);
for (var i = 0; i < listChildren.length; i++) {
if (i % 2) {
DOM.addClass(listChildren[i], 'even');
}
}
}
// Send mixpanel tracking data
const sendMixpanelEvents = () => {
const form = document.getElementById('showcaseFeaturesForm');
// disable hidden inputs to not interfere with actual features
const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
hiddenInputs?.forEach(input => input.disabled = true);
// get the form data
const formData = new FormData(form);
// send mixpanel events
for (let [name, value] of formData?.entries()) {
const driverName = getFeatureDriverName(name);
if (!driverName) return;
window["mixpanel"]?.track("WHM-FeatureShowcase-submit", {
"driver-name": driverName,
"option-name": name,
"option-value": value,
});
}
// re-enable hidden inputs to cleanup
hiddenInputs?.forEach(input => input.disabled = false);
}
// find the feature driver name to pass to the mixpanel event
const getFeatureDriverName = (inputName) => {
let element = document.getElementsByName(inputName)[0];
while (element && element !== document.body) { // traverse up until you hit the document body
if (element.tagName === "DIV" && element.classList.contains("feature")) {
return element.id; // found the ".feature" div
}
element = element.parentElement;
}
return null;
}
//Confirmation modal
var confirmation = new YAHOO.widget.Panel("confirmationModal", {
fixedcenter: true,
close: false,
draggable: false,
modal: true,
width: '600px',
visible: false
});
confirmation.render();
var showConfirmationModal = function(e) {
EVENT.preventDefault(e);
buildConfirmationData();
sendMixpanelEvents();
confirmation.show();
window.setTimeout(function(){
featureForm['continue'].value = "[% locale.maketext('Save Settings') %]";
featureForm.submit();
}, 3000, true);
}
//Confirmation modal
var exitModalPopup = new YAHOO.widget.Panel("exitModal", {
fixedcenter: true,
close: false,
draggable: false,
modal: true,
width: '600px',
visible: false
});
exitModalPopup.render();
var showExitModal = function(e) {
EVENT.preventDefault(e);
exitModalPopup.show();
setFeatureShowcaseCookie();
window.setTimeout(function(){
exitToWHM();
}, 3000, true);
}
//Load event listeners
EVENT.on(inputs, 'click', toggleLabelState);
EVENT.on(featureForm, 'submit', showConfirmationModal);
EVENT.on('cancel', 'click', showExitModal);
EVENT.on('exitModalClose', 'click',
function(e) {
EVENT.preventDefault(e);
exitToWHM(e);
});
/**
* isSet: This variable allows to set FeatureShowcase Cookie only once. We need this since
* 'setFeatureShowcaseCookie' method is triggered by timeout handler in 'showExitModal' and close link click
* handler
*/
var isSet=0;
var exitToWHM = function(e){
if(!isSet){
setFeatureShowcaseCookie();
window.location = "[% cp_security_token %]/?gswdone=1";
isSet=1;
}
}
function setFeatureShowcaseCookie(){
YAHOO.util.Cookie.set("whostmgr_feature_showcase_[% data.loggedin_user %]", "[% data.whmversion %]", {
path:"/"
});
}
</script>
[% INCLUDE gsw/gsw_step_end.tmpl %]
[% INCLUDE gsw/footer.tmpl %]
Back to Directory
File Manager