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 {imageUploadInit} from './seeds/image_upload' |
||||
import {scrollOnRequiredInit} from './seeds/scroll_on_required' |
||||
import {showPopupsInit, addMessage} from './seeds/popups' |
||||
|
||||
$(function () { |
||||
// fileUploadInit();
|
||||
// previewImg();
|
||||
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