2015-11-13 19:10:23 +00:00
|
|
|
window.common = (function({ $, common = { init: [] }}) {
|
|
|
|
const stepClass = '.challenge-step';
|
|
|
|
const prevBtnClass = '.challenge-step-btn-prev';
|
|
|
|
const nextBtnClass = '.challenge-step-btn-next';
|
|
|
|
const actionBtnClass = '.challenge-step-btn-action';
|
|
|
|
const finishBtnClass = '.challenge-step-btn-finish';
|
|
|
|
const submitBtnId = '#challenge-step-btn-submit';
|
|
|
|
const submitModalId = '#challenge-step-modal';
|
|
|
|
|
|
|
|
function getPreviousStep($challengeSteps) {
|
|
|
|
var $prevStep = false;
|
|
|
|
var prevStepIndex = 0;
|
|
|
|
$challengeSteps.each(function(index) {
|
|
|
|
var $step = $(this);
|
2015-11-18 05:25:16 +00:00
|
|
|
if (!$step.hasClass('hidden')) {
|
2015-11-13 19:10:23 +00:00
|
|
|
prevStepIndex = index - 1;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$prevStep = $challengeSteps[prevStepIndex];
|
|
|
|
|
|
|
|
return $prevStep;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getNextStep($challengeSteps) {
|
|
|
|
var length = $challengeSteps.length;
|
|
|
|
var $nextStep = false;
|
|
|
|
var nextStepIndex = 0;
|
|
|
|
$challengeSteps.each(function(index) {
|
|
|
|
var $step = $(this);
|
|
|
|
if (
|
|
|
|
!$step.hasClass('hidden') &&
|
|
|
|
index + 1 !== length
|
|
|
|
) {
|
|
|
|
nextStepIndex = index + 1;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$nextStep = $challengeSteps[nextStepIndex];
|
|
|
|
|
|
|
|
return $nextStep;
|
|
|
|
}
|
|
|
|
|
|
|
|
function handlePrevStepClick(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
var prevStep = getPreviousStep($(stepClass));
|
|
|
|
$(this)
|
|
|
|
.parent()
|
2015-11-18 05:25:16 +00:00
|
|
|
.parent()
|
|
|
|
.removeClass('slideInLeft slideInRight')
|
2015-11-13 19:10:23 +00:00
|
|
|
.addClass('animated fadeOutRight fast-animation')
|
|
|
|
.delay(250)
|
|
|
|
.queue(function(prev) {
|
|
|
|
$(this).addClass('hidden');
|
|
|
|
if (prevStep) {
|
|
|
|
$(prevStep)
|
|
|
|
.removeClass('hidden')
|
2015-11-18 05:25:16 +00:00
|
|
|
.removeClass('fadeOutLeft fadeOutRight')
|
2015-11-13 19:10:23 +00:00
|
|
|
.addClass('animated slideInLeft fast-animation')
|
|
|
|
.delay(500)
|
|
|
|
.queue(function(prev) {
|
|
|
|
prev();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
prev();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleNextStepClick(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
var nextStep = getNextStep($(stepClass));
|
|
|
|
$(this)
|
|
|
|
.parent()
|
2015-11-18 05:25:16 +00:00
|
|
|
.parent()
|
|
|
|
.removeClass('slideInRight slideInLeft')
|
2015-11-13 19:10:23 +00:00
|
|
|
.addClass('animated fadeOutLeft fast-animation')
|
|
|
|
.delay(250)
|
|
|
|
.queue(function(next) {
|
|
|
|
$(this).addClass('hidden');
|
|
|
|
if (nextStep) {
|
|
|
|
$(nextStep)
|
|
|
|
.removeClass('hidden')
|
2015-11-18 05:25:16 +00:00
|
|
|
.removeClass('fadeOutRight fadeOutLeft')
|
2015-11-13 19:10:23 +00:00
|
|
|
.addClass('animated slideInRight fast-animation')
|
|
|
|
.delay(500)
|
|
|
|
.queue(function(next) {
|
|
|
|
next();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
next();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleActionClick(e) {
|
2016-03-03 04:54:14 +00:00
|
|
|
var props = common.challengeSeed[0] || { stepIndex: [] };
|
2015-11-13 19:10:23 +00:00
|
|
|
|
|
|
|
var $el = $(this);
|
|
|
|
var index = +$el.attr('id');
|
|
|
|
var propIndex = props.stepIndex.indexOf(index);
|
|
|
|
|
|
|
|
if (propIndex === -1) {
|
2016-03-03 04:54:14 +00:00
|
|
|
return $el.parent()
|
|
|
|
.find('.disabled')
|
|
|
|
.removeClass('disabled');
|
2015-11-13 19:10:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// an API action
|
|
|
|
// prevent link from opening
|
|
|
|
e.preventDefault();
|
|
|
|
var prop = props.properties[propIndex];
|
|
|
|
var api = props.apis[propIndex];
|
|
|
|
if (common[prop]) {
|
2016-03-03 04:54:14 +00:00
|
|
|
return $el.parent()
|
2015-11-13 19:10:23 +00:00
|
|
|
.find('.disabled')
|
|
|
|
.removeClass('disabled');
|
2016-03-03 04:54:14 +00:00
|
|
|
}
|
|
|
|
return $.post(api)
|
|
|
|
.done(function(data) {
|
|
|
|
// assume a boolean indicates passing
|
|
|
|
if (typeof data === 'boolean') {
|
|
|
|
return $el.parent()
|
|
|
|
.find('.disabled')
|
|
|
|
.removeClass('disabled');
|
|
|
|
}
|
|
|
|
// assume api returns string when fails
|
|
|
|
return $el.parent()
|
|
|
|
.find('.disabled')
|
2016-05-09 14:31:29 +00:00
|
|
|
.replaceWith('<p class="col-sm-4 col-xs-12">' + data + '</p>');
|
2016-03-03 04:54:14 +00:00
|
|
|
})
|
|
|
|
.fail(function() {
|
|
|
|
console.log('failed');
|
|
|
|
});
|
2015-11-13 19:10:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function handleFinishClick(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
$(submitModalId).modal('show');
|
|
|
|
$(submitModalId + '.modal-header').click();
|
|
|
|
$(submitBtnId).click(handleSubmitClick);
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleSubmitClick(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
$('#submit-challenge')
|
2016-02-11 06:10:06 +00:00
|
|
|
.attr('disabled', 'true')
|
|
|
|
.removeClass('btn-primary')
|
|
|
|
.addClass('btn-warning disabled');
|
2015-11-13 19:10:23 +00:00
|
|
|
|
|
|
|
var $checkmarkContainer = $('#checkmark-container');
|
|
|
|
$checkmarkContainer.css({ height: $checkmarkContainer.innerHeight() });
|
|
|
|
|
|
|
|
$('#challenge-checkmark')
|
2016-02-11 06:10:06 +00:00
|
|
|
.addClass('zoomOutUp')
|
|
|
|
.delay(1000)
|
|
|
|
.queue(function(next) {
|
|
|
|
$(this).replaceWith(
|
|
|
|
'<div id="challenge-spinner" ' +
|
|
|
|
'class="animated zoomInUp inner-circles-loader">' +
|
|
|
|
'submitting...</div>'
|
|
|
|
);
|
|
|
|
next();
|
|
|
|
});
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
url: '/completed-challenge/',
|
|
|
|
type: 'POST',
|
|
|
|
data: JSON.stringify({
|
2015-12-08 21:52:03 +00:00
|
|
|
id: common.challengeId,
|
|
|
|
name: common.challengeName,
|
2016-02-11 06:10:06 +00:00
|
|
|
challengeType: +common.challengeType
|
|
|
|
}),
|
|
|
|
contentType: 'application/json',
|
|
|
|
dataType: 'json'
|
|
|
|
})
|
|
|
|
.success(function(res) {
|
2015-11-13 19:10:23 +00:00
|
|
|
if (res) {
|
|
|
|
window.location =
|
|
|
|
'/challenges/next-challenge?id=' + common.challengeId;
|
|
|
|
}
|
2016-02-11 06:10:06 +00:00
|
|
|
})
|
|
|
|
.fail(function() {
|
|
|
|
window.location.replace(window.location.href);
|
|
|
|
});
|
2015-11-13 19:10:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
common.init.push(function($) {
|
2015-11-24 22:32:28 +00:00
|
|
|
if (common.challengeType !== '7') {
|
2015-11-13 19:10:23 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
$(prevBtnClass).click(handlePrevStepClick);
|
|
|
|
$(nextBtnClass).click(handleNextStepClick);
|
|
|
|
$(actionBtnClass).click(handleActionClick);
|
|
|
|
$(finishBtnClass).click(handleFinishClick);
|
2016-03-03 04:54:14 +00:00
|
|
|
return null;
|
2015-11-13 19:10:23 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return common;
|
|
|
|
}(window));
|