Skip to content

Commit

Permalink
jQuery events
Browse files Browse the repository at this point in the history
  • Loading branch information
@birdkiwi
birdkiwi committed Mar 13, 2019
1 parent d619422 commit 8352aa2
Show file tree
Hide file tree
Showing 7 changed files with 786 additions and 613 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
build
build-zip
43 changes: 43 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,49 @@
</a>
```

**События JS:**

События могут быть полезны, если вы пользуетесь Яндекс.Метрикой или Google Analytics. Можно отследить следующие события:

`simplecallback:beforeShow` — событие до открытия модального окна

`simplecallback:afterShow` — событие после открытия модального окна

`simplecallback:success` — событие после успешной отправки данных и получения ответа с сервера с валидными данными

`simplecallback:error` — событие в случае сетевой ошибки, либо parseError

`simplecallback:error` — событие в случае сетевой ошибки, либо parseError

Примеры использования событий:

```
$(document).on('simplecallback:beforeShow', function(event, data) {
console.log(data);
alert('Simplecallback beforeShow event triggered \nmoduleId: ' + data.moduleId + ' \ncustomData: ' + data.customData);
});
$(document).on('simplecallback:afterShow', function(event, data) {
console.log(data);
alert('Simplecallback afterShow event triggered \nmoduleId: ' + data.moduleId + ' \ncustomData: ' + data.customData);
});
$(document).on('simplecallback:success', function(event, data) {
console.log(data);
alert('Simplecallback success event triggered \nform: ' + data.form + ' \nmoduleId: ' + data.moduleId + ' \ncustomData: ' + data.customData + ' \ndata: ' + data.data);
});
$(document).on('simplecallback:error', function(event, data) {
console.log(data);
alert('Simplecallback error event triggered \nform: ' + data.form + ' \nmoduleId: ' + data.moduleId + ' \ncustomData: ' + data.customData + ' \ndata: ' + data.data + ' \njqXHR: ' + data.jqXHR + ' \ntextStatus: ' + data.textStatus + '\n errorThrown: ' + data.errorThrown);
});
$(document).on('simplecallback:complete', function(event, data) {
console.log(data);
alert('Simplecallback complete event triggered \nform: ' + data.form + ' \nmoduleId: ' + data.moduleId + ' \ncustomData: ' + data.customData + ' \ndata: ' + data.data + ' \njqXHR: ' + data.jqXHR + ' \ntextStatus: ' + data.textStatus);
});
```

**Дизайн, шаблоны и пр:**

Модуль создан без особого прицела на визуальный дизайн, т.к. дизайн каждого сайта индивидуален, поэтому вам предоставляется полная свобода для оформления и верстки.
Expand Down
112 changes: 76 additions & 36 deletions media/mod_simplecallback/js/simplecallback.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,11 +601,15 @@

var simplecallback = {
show: function(id, customData) {
$(document).trigger("simplecallback:beforeShow", {
moduleId: id,
customData: customData
});

if (id && $('#simplecallback-' + id).length) {
$('.simplecallback-overlay').addClass('active');
}
var modalWindow = (id) ? $('#simplecallback-' + id) : $('[data-simplecallback-form-overlayed]').first();
var modalWindowHeight = modalWindow.innerHeight();
var customDataField = modalWindow.find('input[name="simplecallback_custom_data"]');

if (customData) {
Expand All @@ -615,10 +619,76 @@
}

modalWindow.addClass('active');

$(document).trigger("simplecallback:afterShow", {
moduleId: id,
customData: customData
});
},
hide: function() {
$('[id^="simplecallback-"]').removeClass('active');
$('.simplecallback-overlay').removeClass('active');
},
submit: function (id) {
var form = $('#simplecallback-' + id),
actionUrl = form.attr('action'),
errorMsg = form.attr('data-simplecallback-form-error-msg'),
captcha = form.find('.simplecallback-captcha'),
submitBtn = form.find('[type="submit"]');

form.addClass('simplecallback-loading');
submitBtn.attr('disabled', true);

$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(),
dataType: 'json',
success: function(data, textStatus, jqXHR) {
if(data.error === false) {
$(document).trigger("simplecallback:success", {
form: form,
moduleId: parseInt(form.find('input[name="module_id"]').val()),
customData: form.find('input[name="simplecallback_custom_data"]').val(),
data: data
});

alert(data.message);
form[0].reset();
simplecallback.hide();
} else {
alert(data.message);
}

form.removeClass('simplecallback-loading');
submitBtn.attr('disabled', false);
},
error: function (jqXHR, textStatus, errorThrown) {
$(document).trigger("simplecallback:error", {
form: form,
moduleId: parseInt(form.find('input[name="module_id"]').val()),
customData: form.find('input[name="simplecallback_custom_data"]').val(),
jqXHR: jqXHR,
textStatus: textStatus,
errorThrown: errorThrown
});

alert(errorMsg);
form.removeClass('simplecallback-loading');
submitBtn.attr('disabled', false);
},
complete: function (jqXHR, textStatus) {
captcha.attr('src', captcha.attr('src') + '&rand=' + Math.random());

$(document).trigger("simplecallback:complete", {
form: form,
moduleId: parseInt(form.find('input[name="module_id"]').val()),
customData: form.find('input[name="simplecallback_custom_data"]').val(),
jqXHR: jqXHR,
textStatus: textStatus
});
}
});
}
};

Expand All @@ -635,36 +705,9 @@
});

$('[data-simplecallback-form]').on('submit', function() {
var form = $(this),
actionUrl = form.attr('action'),
captcha = form.find('.simplecallback-captcha'),
submitBtn = form.find('[type="submit"]');

form.addClass('simplecallback-loading');
submitBtn.attr('disabled', true);

$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(),
dataType: 'json',
success: function(data) {
if(data.error === false) {
alert(data.message);
form[0].reset();
simplecallback.hide();
} else {
alert(data.message);
//console.log(data.message);
}
var formId = parseInt($(this).find('input[name="module_id"]').val());

form.removeClass('simplecallback-loading');
submitBtn.attr('disabled', false);
},
complete: function () {
captcha.attr('src', captcha.attr('src') + '&rand=' + Math.random());
}
});
simplecallback.submit(formId);

return false;
});
Expand All @@ -679,8 +722,6 @@
overlay.append( $(this) );
});

console.log(overlay);

$(document).on('click', '[data-simplecallback-open]', function() {
var formId = $(this).data('simplecallback-open');
var customData = $(this).data('simplecallback-custom-data');
Expand All @@ -699,18 +740,17 @@
window.addEventListener("load", function (event) {
if (window.location.hash.indexOf('#simplecallback-') > -1) {
var moduleId = parseInt( window.location.hash.replace(/[^0-9\.]/g, ''), 10 );
//console.log(moduleId);
simplecallback.show(moduleId);
}
}, false);

$(document).on('click', 'a[href^="#simplecallback-"]', function() {
var moduleId = parseInt( $(this).attr('href').replace(/[^0-9\.]/g, ''), 10 );
//console.log(moduleId);
simplecallback.show(moduleId);
var customData = $(this).data('simplecallback-custom-data');

simplecallback.show(moduleId, customData);

return false;
});

});
})(jQuery);
15 changes: 9 additions & 6 deletions modules/mod_simplecallback/tmpl/default.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
$header_tag = $params->get('header_tag', 'h3');
$header_class = $params->get('header_class', '');
$show_title = $module->showtitle;
$error_msg = $params->get('simplacallback_ajax_error_msg', 'Network error...');
?>

<form
Expand All @@ -23,7 +24,9 @@
class="form-inline simplecallback<?php echo $moduleclass_sfx ?> <?php if ($overlayed == 1) { echo "simplecallback-overlayed"; } ?>"
method="post"
<?php if (!empty($phone_mask) && $phone_mask != '') { echo "data-simplecallback-phone-mask='$phone_mask'"; } ?>
data-simplecallback-form <?php if ($overlayed == 1) { echo "data-simplecallback-form-overlayed"; } ?>
data-simplecallback-form
<?php if ($overlayed == 1) { echo "data-simplecallback-form-overlayed"; } ?>
data-simplecallback-form-error-msg="<?php echo $error_msg; ?>"
>

<?php if ($overlayed == 1) :?>
Expand All @@ -39,13 +42,13 @@ class="form-inline simplecallback<?php echo $moduleclass_sfx ?> <?php if ($overl
<div class="control-group">
<label>
<?php echo $params->get('simplecallback_name_field_label'); ?>
<input type="text" name="simplecallback_name" required class="input-block-level" autocomplete="off" />
<input type="text" name="simplecallback_name" required class="input-block-level">
</label>
</div>
<div class="control-group">
<label>
<?php echo $params->get('simplecallback_phone_field_label'); ?>
<input type="text" name="simplecallback_phone" required class="input-block-level" autocomplete="off" />
<input type="text" name="simplecallback_phone" required class="input-block-level">
</label>
</div>

Expand All @@ -54,21 +57,21 @@ class="form-inline simplecallback<?php echo $moduleclass_sfx ?> <?php if ($overl
<label>
<?php echo $params->get('simplecallback_message_field_label'); ?>
</label>
<textarea name="simplecallback_message" class="input-block-level" autocomplete="off"></textarea>
<textarea name="simplecallback_message" class="input-block-level"></textarea>
</div>
<?php endif; ?>

<?php if ($captcha_enabled == 1) : ?>
<div class="control-group">
<img src="<?php echo JUri::base() . 'modules/mod_simplecallback/captcha.php?id=' . $module->id; ?>" width="150" height="40" alt="captcha" class="simplecallback-captcha">
<input type="text" name="simplecallback_captcha" required class="input-block-level" autocomplete="off" />
<input type="text" name="simplecallback_captcha" required class="input-block-level" autocomplete="off">
</div>
<?php endif; ?>

<div class="control-group">
<input type="text" name="simplecallback_username" class="simplecallback-username" maxlength="10">
<?php echo JHtml::_( 'form.token' ); ?>
<input type="hidden" name="module_id" value="<?php echo $module->id; ?>" />
<input type="hidden" name="module_id" value="<?php echo $module->id; ?>">
<input type="hidden" name="Itemid" value="<?php echo $menu; ?>">
<input type="hidden" name="simplecallback_page_title" value="<?php echo $document->getTitle(); ?>">
<input type="hidden" name="simplecallback_page_url" value="<?php echo JUri::getInstance()->toString(); ?>">
Expand Down
10 changes: 6 additions & 4 deletions modules/mod_simplecallback/tmpl/uikit.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
class="uk-form-stacked simplecallback<?php echo $moduleclass_sfx ?> <?php if ($overlayed == 1) { echo "simplecallback-overlayed"; } ?>"
method="post"
<?php if (!empty($phone_mask) && $phone_mask != '') { echo "data-simplecallback-phone-mask='$phone_mask'"; } ?>
data-simplecallback-form <?php if ($overlayed == 1) { echo "data-simplecallback-form-overlayed"; } ?>
data-simplecallback-form
<?php if ($overlayed == 1) { echo "data-simplecallback-form-overlayed"; } ?>
data-simplecallback-form-error-msg="<?php echo $error_msg; ?>"
>

<?php if ($overlayed == 1) :?>
Expand All @@ -41,15 +43,15 @@ class="uk-form-stacked simplecallback<?php echo $moduleclass_sfx ?> <?php if ($o
<?php echo $params->get('simplecallback_name_field_label'); ?>
</label>
<div class="uk-form-controls">
<input type="text" name="simplecallback_name" required class="uk-input" autocomplete="off" />
<input type="text" name="simplecallback_name" required class="uk-input">
</div>
</div>
<div class="uk-margin-bottom">
<label class="uk-form-label uk-text-left">
<?php echo $params->get('simplecallback_phone_field_label'); ?>
</label>
<div class="uk-form-controls">
<input type="text" name="simplecallback_phone" required class="uk-input" autocomplete="off" />
<input type="text" name="simplecallback_phone" required class="uk-input">
</div>
</div>

Expand All @@ -59,7 +61,7 @@ class="uk-form-stacked simplecallback<?php echo $moduleclass_sfx ?> <?php if ($o
<?php echo $params->get('simplecallback_message_field_label'); ?>
</label>
<div class="uk-form-controls">
<textarea name="simplecallback_message" class="uk-textarea" autocomplete="off" style="height: 80px; resize: vertical;"></textarea>
<textarea name="simplecallback_message" class="uk-textarea" style="height: 80px; resize: vertical;"></textarea>
</div>
</div>
<?php endif; ?>
Expand Down
Loading

0 comments on commit 8352aa2

Please sign in to comment.