diff --git a/ajax_list.js b/ajax_list.js index 0f1508c..3217d92 100644 --- a/ajax_list.js +++ b/ajax_list.js @@ -191,6 +191,14 @@ $=jQuery; }); + if(options.hasOwnProperty("after_list")) { + + after_list=options.after_list; + + after_list(); + + } + }, error: function (data) { diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..0c40e78 --- /dev/null +++ b/css/popup.css @@ -0,0 +1,96 @@ +#layer_popup { + + z-index:50000; + /*background-color:rgba(0,0,0,0.4);*/ + /*opacity:0.5;*/ + position:absolute; + width:100%; + height:100%; + overflow:auto; + + +} + +#container_popup { + + z-index:50001; + overflow:auto; + /* border: solid #fbfbfb 4px;*/ + position:absolute; + overflow:visible; + width:100%; + height:100%; + display: flex; + align-items: center; + justify-content: center; + +} + +.content_popup { + + /*position:absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0%);*/ + position: absolute; + /*top: 50%; + left: 50%; + transform: translate(-50%, -50%);*/ + z-index:50005; + margin-top:0px; + box-sizing: border-box; + -webkit-box-sizing:border-box; + -moz-box-sizing: border-box; + opacity:1; + /*-webkit-box-shadow: 0px 0px 160px 0px rgba(80,80,80,1); + -moz-box-shadow: 0px 0px 160px 0px rgba(80,80,80,1); + box-shadow: 0px 0px 160px 0px rgba(80,80,80,1);*/ + box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.33); + -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.33); + -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.33); + position:absolute; +} + +/* Css for animation loading */ +/* Use this html tag */ +/* Get from https://loading.io/css/ */ +/*
*/ + +.lds-facebook { + display: inline-block; + position: absolute; + left:50%; + top:50%; + width: 80px; + height: 80px; +} +.lds-facebook div { + display: inline-block; + position: absolute; + left: 8px; + width: 16px; + background: #000; + animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; +} +.lds-facebook div:nth-child(1) { + left: 8px; + animation-delay: -0.24s; +} +.lds-facebook div:nth-child(2) { + left: 32px; + animation-delay: -0.12s; +} +.lds-facebook div:nth-child(3) { + left: 56px; + animation-delay: 0; +} +@keyframes lds-facebook { + 0% { + top: 8px; + height: 64px; + } + 50%, 100% { + top: 24px; + height: 32px; + } +} diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..16a187d --- /dev/null +++ b/popup.js @@ -0,0 +1,422 @@ +$=jQuery; + +(function( $ ){ + + $.fn.popUp = function (popup, width, pre_callback, post_callback, options) { + + var popup_container='body'; + + var after_show=false; + + var after_click=false; + + if(options!=undefined) + { + + if(options.hasOwnProperty("popup_container")) + { + + popup_container=options.popup_container; + + } + + if(options.hasOwnProperty("after_show")) + { + + after_show=options.after_show; + + } + + if(options.hasOwnProperty("after_click")) + { + + after_click=options.after_click; + + } + + + } + + //If scroll put in center scroll, if not scroll, put in simple center + + $(popup).hide(); + + $(this).on('click', function (e) { + + + body_height=$("body").height(); + + $('#layer_popup').height(body_height); + + $('body').prepend('
'); + + $('body').css('overflow', 'hidden'); + + content_popup=$(popup_container).prepend('
'); + + $('.lds-facebook').show(); + + $(popup).appendTo('.content_popup'); + + if(width==undefined) + { + + $('.content_popup').width('80%'); + + } + else + { + + $('.content_popup').width(width); + + } + + popup_height=parseInt($(popup).height())+40; + + window_height=$(window).height(); + + $('.content_popup').wrap('
'); + + $('#container_popup').css('height', window_height); + + $('#container_popup').addClass('click_popup'); + $('#layer_popup').addClass('click_popup'); + + pos_scroll=$(document).scrollTop(); + + new_top=Math.round((window_height-popup_height)/2)+pos_scroll; + + $('#container_popup').css('top', pos_scroll); + + if (popup_height>window_height) + { + + $('.content_popup').css('margin-top', 0); + + } + + $('#error_insert_name').html('') + + $('.close_popup').click(function () { + + $('#container_popup').click(); + + if(after_click) + { + + after_click(); + + } + + return false; + + }); + + $('.click_popup').click(function (data) { + + if (data.target == this) { + + $(popup).hide(); + + $(popup).appendTo('body'); + + $('#layer_popup').remove(); + + $('#container_popup').remove(); + + //$("body > #height-helper").contents().unwrap(); + + $('#height-helper').remove(); + + $('body').css('height', '100%'); + + $('body').css('overflow', 'auto'); + + if(post_callback!=undefined) + { + + post_callback(); + + } + + $('.close_popup').unbind('click'); + + if(after_click) + { + + after_click(); + + } + + + } + else { + + return true; + + } + + return false; + + }); + + if(pre_callback!=undefined) + { + + r=pre_callback(popup, this); + + if(r!=undefined) + { + + if(r===false) + { + + return false; + + } + + } + + } + + if(!after_show) + { + + $(popup).fadeIn(); + + } + else + { + + $(popup).fadeIn({'done': after_show(popup)}); + + } + + $('.lds-facebook').hide(); + + + return false; + + }); + + } + +})( jQuery ); + +$=jQuery; + +(function( $ ){ + + $.fn.simplePopUp=function (popup, width, pre_callback, post_callback, options) { + + var after_show=false; + + var after_click=false; + + if(options!=undefined) + { + + if(options.hasOwnProperty("popup_container")) + { + + popup_container=options.popup_container; + + } + + if(options.hasOwnProperty("after_show")) + { + + after_show=options.after_show; + + } + + if(options.hasOwnProperty("after_click")) + { + + after_click=options.after_click; + + } + + + } + + $(this).on('click', function (e) { + + //Show layer_popup + + body_height=$("body").height(); + + $('#layer_popup').height(body_height); + + $('body').prepend('
'); + + //$('body').css('overflow', 'hidden'); + + //Show popup + + $(popup).css('position', 'absolute'); + + $(popup).css('width', width); + + $(popup).addClass('content_popup'); + + /*var position=$(popup).offset(); + + var left=position.left; + var top=position.top; + + console.log($(popup).css('left'));*/ + + scr_width=$(window).width(); + + scr_height=$(window).height(); + + center_left=parseInt(scr_width/2)-parseInt(width/2); + + center_top=parseInt(scr_height/2)-parseInt($(popup).height()/2); + + $(popup).css('left', center_left); + $(popup).css('top', center_top); + + if(!after_show) + { + + $(popup).fadeIn(); + + } + else + { + + $(popup).fadeIn({'done': after_show(popup)}); + + } + + }); + + $('.close_popup').click(function () { + + if(after_click) + { + + after_click(); + + } + + $('#layer_popup').remove(); + + $(popup).hide(); + + return false; + + }); + + } + +})( jQuery ); + +//From https://www.w3schools.com/howto/howto_js_draggable.asp + +function dragElement(draggable, header) { + + elmnt=document.getElementById(draggable); + + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + if (document.getElementById(header)) { + // if present, the header is where you move the DIV from: + document.getElementById(header).onmousedown = dragMouseDown; + } else { + // otherwise, move the DIV from anywhere inside the DIV: + elmnt.onmousedown = dragMouseDown; + } + + function dragMouseDown(e) { + e = e || window.event; + e.preventDefault(); + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + // call a function whenever the cursor moves: + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + e = e || window.event; + e.preventDefault(); + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; + elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + } + + function closeDragElement() { + // stop moving when mouse button is released: + document.onmouseup = null; + document.onmousemove = null; + } +} + +(function( $ ){ + + $.fn.draggable = function (header) { + + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + + var popup=this; + + $(header).on('mousedown', function (e) { + + e = e || window.event; + + e.preventDefault(); + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + + document.onmouseup = closeDragElement; + + // call a function whenever the cursor moves: + document.onmousemove = elementDrag; + + console.log('Moving...'); + + }); + + function elementDrag(e) { + + console.log('Moving windows...'); + + e = e || window.event; + e.preventDefault(); + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + /*elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; + elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";*/ + + offset=$(popup).offset(); + + offset_top=parseInt(offset.top); + offset_left=parseInt(offset.left); + + $(popup).css('top', (offset_top - pos2) + "px"); + $(popup).css('left', (offset_left - pos1) + "px"); + + } + + function closeDragElement() { + // stop moving when mouse button is released: + document.onmouseup = null; + document.onmousemove = null; + } + + } + +})( jQuery ); diff --git a/posting2.js b/posting2.js index 7d5c89f..2403a0c 100644 --- a/posting2.js +++ b/posting2.js @@ -4,7 +4,7 @@ /* Add csrf token */ - /* options: url: url to post, loading: dom id, success: func, pre_callback, separated_data:boolean */ + /* options: url: url to post, loading: dom id, success: func, error_data: func, pre_callback, separated_data:boolean, upload: {progressbar: '#progressbar', 'total_loader': '#total_loader', 'status': '#status'} */ $.fn.sendPost = function (options) { @@ -23,6 +23,40 @@ } + var xhr=false; + + if(options.hasOwnProperty("upload")) { + + xhr=function() { + var myXhr = $.ajaxSettings.xhr(); + if(myXhr.upload){ + + var progressbar=options.upload.progressbar; + var total_loader=options.upload.total_loader; + var status=options.upload.status; + + $(total_loader).html(''); + $(progressbar).attr('value', 0); + $(status).html(''); + + myXhr.upload.addEventListener('progress',function (event) { + + $(total_loader).html("Uploaded "+event.loaded+" bytes of "+event.total); + var percent = (event.loaded / event.total) * 100; + $(progressbar).attr('value', (Math.round(percent))); + $(status).html(Math.round(percent)+"% uploaded... please wait"); + + }, false); + + myXhr.addEventListener("load", function(event) { + + $(status).html("File loaded successfully!!"); + + }, false); + } + return myXhr; + } + } $(this).on('submit', function (e) { @@ -30,50 +64,20 @@ form=this; - /*if($(this).attr('enctype')) - {*/ - if(options.separated_data) - { - - data[options.separated_data]=new FormData($(this)[0]); - - } - else - { - - data=new FormData($(this)[0]); - - } - - - xhrFields={ - withCredentials: true - }; - - /*} + if(options.separated_data) + { + data[options.separated_data]=new FormData($(this)[0]); + } else { - - if(options.separated_data) - { + data=new FormData($(this)[0]); + } + + + xhrFields={ + withCredentials: true + }; - data[options.separated_data]=$(this).serializeArray(); - - } - else - { - - data=$(this).serializeArray().reduce(function(obj, item) { - obj[item.name] = item.value; - return obj; - }, {}); - - } - - xhrFields={ - }; - - }*/ if(!data.hasOwnProperty("csrf_token")) { @@ -84,11 +88,8 @@ //Hide form and show the time icon $(this).find('.error').hide(); - //$(this).hide(); - $(options.loading).show(); - /*$(this).find('input').prop("disabled", true); - $(this).find('select').prop("disabled", true);*/ + $(options.loading).show(); if(options.hasOwnProperty("pre_callback")) { @@ -98,20 +99,19 @@ //Ajax - $.ajax({ + ajax_post={ type: "POST", url: options.url, data: data, encoding: "UTF-8", xhrFields: xhrFields, cache:false, - contentType: false, + contentType:false, processData: false, success: function (data) { $(options.loading).hide(); - - + if(data.error) { if(!data.hasOwnProperty("error_csrf")) @@ -131,7 +131,7 @@ if(data.hasOwnProperty('error_form')) { for(i in data.error_form) { - + $(i).html(data.error_form[i]); $(i).show(); @@ -169,8 +169,6 @@ else { - - // If ok then post successful task. if(options.hasOwnProperty("success")) { @@ -197,7 +195,17 @@ }, dataType: 'json' - }); + }; + + //console.log(xhr); + + if(xhr!=false) { + + ajax_post.xhr=xhr; + + } + + $.ajax(ajax_post); return false;