booblegum
9 years ago
parent
41039288d9
commit
65682128bc
19 changed files with 414 additions and 62 deletions
@ -1,7 +1,13 @@ |
|||||||
import {fileUploadInit} from './seeds/file_upload' |
import {fileUploadInit} from './seeds/file_upload' |
||||||
import {imageUploadInit} from './seeds/image_upload' |
import {imageUploadInit} from './seeds/image_upload' |
||||||
|
import {scrollOnRequiredInit} from './seeds/scroll_on_required' |
||||||
|
import {showPopupsInit, addMessage} from './seeds/popups' |
||||||
|
|
||||||
$(function () { |
$(function () { |
||||||
// fileUploadInit();
|
// fileUploadInit();
|
||||||
|
// previewImg();
|
||||||
imageUploadInit(); |
imageUploadInit(); |
||||||
|
scrollOnRequiredInit(); |
||||||
|
showPopupsInit(); |
||||||
|
window.addMessage = addMessage; |
||||||
}); |
}); |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
function showMessage(container, template, message, type) { |
||||||
|
let $popup = $(template); |
||||||
|
$popup.hide(); |
||||||
|
$popup.find('.message').html(message); |
||||||
|
$popup.addClass(type); |
||||||
|
container.append($popup); |
||||||
|
$popup.fadeIn(1000, function () { |
||||||
|
setTimeout(function (el) { |
||||||
|
$(el).fadeOut(1000); |
||||||
|
}, 2000, this) |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function addMessage(message, type) { |
||||||
|
const $popups_storage = $('#popups-storage'); |
||||||
|
let li = `<li class="${type}">${message}</li>`; |
||||||
|
$popups_storage.append(li); |
||||||
|
} |
||||||
|
|
||||||
|
function showPopupsInit() { |
||||||
|
const $popups_storage = $('#popups-storage'); |
||||||
|
const $popups_container = $('#popups-container'); |
||||||
|
let $popup = $popups_container.find(".popup"); |
||||||
|
let popup_html = $popup[0].outerHTML; |
||||||
|
$popup.remove(); |
||||||
|
if (!$popups_storage.length) return; |
||||||
|
$.each($popups_storage.find("li"), function (key, value) { |
||||||
|
let message = $(value).html(); |
||||||
|
let type = $(value).attr('class'); |
||||||
|
showMessage($popups_container, popup_html, message, type); |
||||||
|
$(value).remove(); |
||||||
|
}); |
||||||
|
$popups_storage.bind("DOMNodeInserted", function () { |
||||||
|
let $li = $(this).find('li'); |
||||||
|
let message = $li.html(); |
||||||
|
let type = $li.attr('class'); |
||||||
|
$li.remove(); |
||||||
|
showMessage($popups_container, popup_html, message, type); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export {showPopupsInit, addMessage} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
function scrollOnRequiredInit() { |
||||||
|
let $required = $('.required.error'); |
||||||
|
// console.log($required);
|
||||||
|
if (!$required.length) return; |
||||||
|
$('html, body').animate({ |
||||||
|
scrollTop: $required.offset().top - 25 |
||||||
|
}, 1000); |
||||||
|
} |
||||||
|
|
||||||
|
export {scrollOnRequiredInit} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
{% load sass_tags %} |
||||||
|
<link rel='stylesheet' href='{% sass_src "partials/sass/popups.sass" %}'> |
||||||
|
<div class="popups-container" id="popups-container"> |
||||||
|
<div style="display: none" class="popup"> |
||||||
|
<div class="message"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.popups-container |
||||||
|
width: 100% |
||||||
|
position: fixed |
||||||
|
top: 0 |
||||||
|
left: 0 |
||||||
|
opacity: 0.8 |
||||||
|
.popup |
||||||
|
width: 100% |
||||||
|
min-height: 50px |
||||||
|
background-color: #7a8529 |
||||||
|
border-radius: 20px |
||||||
|
border: 1px solid #ffffff |
||||||
|
display: flex |
||||||
|
-ms-flex-align: center |
||||||
|
-webkit-align-items: center |
||||||
|
-webkit-box-align: center |
||||||
|
align-items: center |
||||||
|
//text-align: center |
||||||
|
.message |
||||||
|
color: white |
||||||
|
width: 100% |
||||||
|
text-align: center |
||||||
|
&.warning |
||||||
|
background-color: #ffc649 |
||||||
|
&.error |
||||||
|
background-color: #ff4146 |
||||||
|
&.info |
||||||
|
background-color: #4e58ff |
||||||
Loading…
Reference in new issue