| 1 |
const $ = window.jQuery; |
| 2 |
const MessageBox = { |
| 3 |
$block: null, |
| 4 |
$window: null, |
| 5 |
events: {}, |
| 6 |
instances: [], |
| 7 |
instance: null, |
| 8 |
quickConfirm( elem, args ) { |
| 9 |
const $e = $( elem ); |
| 10 |
$( '[learn-press-quick-confirm]' ).each( function() { |
| 11 |
let $ins; |
| 12 |
( $ins = $( this ).data( 'quick-confirm' ) ) && ( console.log( $ins ), $ins.destroy() ); |
| 13 |
} ); |
| 14 |
! $e.attr( 'learn-press-quick-confirm' ) && $e.attr( 'learn-press-quick-confirm', 'true' ).data( 'quick-confirm', |
| 15 |
new ( function( elem, args ) { |
| 16 |
var $elem = $( elem ), |
| 17 |
$div = $( '<span class="learn-press-quick-confirm"></span>' ).insertAfter( $elem ), //($(document.body)), |
| 18 |
offset = $( elem ).position() || { left: 0, top: 0 }, |
| 19 |
timerOut = null, |
| 20 |
timerHide = null, |
| 21 |
n = 3, |
| 22 |
hide = function() { |
| 23 |
$div.fadeOut( 'fast', function() { |
| 24 |
$( this ).remove(); |
| 25 |
$div.parent().css( 'position', '' ); |
| 26 |
} ); |
| 27 |
$elem.removeAttr( 'learn-press-quick-confirm' ).data( 'quick-confirm', undefined ); |
| 28 |
stop(); |
| 29 |
}, |
| 30 |
stop = function() { |
| 31 |
timerHide && clearInterval( timerHide ); |
| 32 |
timerOut && clearInterval( timerOut ); |
| 33 |
}, |
| 34 |
start = function() { |
| 35 |
timerOut = setInterval( function() { |
| 36 |
if ( --n == 0 ) { |
| 37 |
hide.call( $div[ 0 ] ); |
| 38 |
typeof ( args.onCancel ) === 'function' && args.onCancel( args.data ); |
| 39 |
stop(); |
| 40 |
} |
| 41 |
$div.find( 'span' ).html( ' (' + n + ')' ); |
| 42 |
}, 1000 ); |
| 43 |
|
| 44 |
timerHide = setInterval( function() { |
| 45 |
if ( ! $elem.is( ':visible' ) || $elem.css( 'visibility' ) == 'hidden' ) { |
| 46 |
stop(); |
| 47 |
$div.remove(); |
| 48 |
$div.parent().css( 'position', '' ); |
| 49 |
typeof ( args.onCancel ) === 'function' && args.onCancel( args.data ); |
| 50 |
} |
| 51 |
}, 350 ); |
| 52 |
}; |
| 53 |
args = $.extend( { |
| 54 |
message: '', |
| 55 |
data: null, |
| 56 |
onOk: null, |
| 57 |
onCancel: null, |
| 58 |
offset: { top: 0, left: 0 }, |
| 59 |
}, args || {} ); |
| 60 |
$div.html( args.message || $elem.attr( 'data-confirm-remove' ) || 'Are you sure?' ).append( '<span> (' + n + ')</span>' ).css( {} ); |
| 61 |
$div.click( function() { |
| 62 |
typeof ( args.onOk ) === 'function' && args.onOk( args.data ); |
| 63 |
hide(); |
| 64 |
} ).hover( function() { |
| 65 |
stop(); |
| 66 |
}, function() { |
| 67 |
start(); |
| 68 |
} ); |
| 69 |
//$div.parent().css('position', 'relative'); |
| 70 |
$div.css( { |
| 71 |
left: ( ( offset.left + $elem.outerWidth() ) - $div.outerWidth() ) + args.offset.left, |
| 72 |
top: offset.top + $elem.outerHeight() + args.offset.top + 5, |
| 73 |
} ).hide().fadeIn( 'fast' ); |
| 74 |
start(); |
| 75 |
|
| 76 |
this.destroy = function() { |
| 77 |
$div.remove(); |
| 78 |
$elem.removeAttr( 'learn-press-quick-confirm' ).data( 'quick-confirm', undefined ); |
| 79 |
stop(); |
| 80 |
}; |
| 81 |
} )( elem, args ) |
| 82 |
); |
| 83 |
}, |
| 84 |
show( message, args ) { |
| 85 |
//this.hide(); |
| 86 |
$.proxy( function() { |
| 87 |
args = $.extend( { |
| 88 |
title: '', |
| 89 |
buttons: '', |
| 90 |
events: false, |
| 91 |
autohide: false, |
| 92 |
message, |
| 93 |
data: false, |
| 94 |
id: LP.uniqueId(), |
| 95 |
onHide: null, |
| 96 |
}, args || {} ); |
| 97 |
|
| 98 |
this.instances.push( args ); |
| 99 |
this.instance = args; |
| 100 |
|
| 101 |
const $doc = $( document ), |
| 102 |
$body = $( document.body ); |
| 103 |
if ( ! this.$block ) { |
| 104 |
this.$block = $( '<div id="learn-press-message-box-block"></div>' ).appendTo( $body ); |
| 105 |
} |
| 106 |
if ( ! this.$window ) { |
| 107 |
this.$window = $( '<div id="learn-press-message-box-window"><div id="message-box-wrap"></div> </div>' ).insertAfter( this.$block ); |
| 108 |
this.$window.click( function() { |
| 109 |
} ); |
| 110 |
} |
| 111 |
//this.events = args.events || {}; |
| 112 |
this._createWindow( message, args.title, args.buttons ); |
| 113 |
this.$block.show(); |
| 114 |
this.$window.show().attr( 'instance', args.id ); |
| 115 |
$( window ) |
| 116 |
.bind( 'resize.message-box', $.proxy( this.update, this ) ) |
| 117 |
.bind( 'scroll.message-box', $.proxy( this.update, this ) ); |
| 118 |
this.update( true ); |
| 119 |
if ( args.autohide ) { |
| 120 |
setTimeout( function() { |
| 121 |
LP.MessageBox.hide(); |
| 122 |
typeof ( args.onHide ) === 'function' && args.onHide.call( LP.MessageBox, args ); |
| 123 |
}, args.autohide ); |
| 124 |
} |
| 125 |
}, this )(); |
| 126 |
}, |
| 127 |
blockUI( message ) { |
| 128 |
message = ( message !== false ? ( message ? message : 'Wait a moment' ) : '' ) + '<div class="message-box-animation"></div>'; |
| 129 |
this.show( message ); |
| 130 |
}, |
| 131 |
hide( delay, instance ) { |
| 132 |
if ( instance ) { |
| 133 |
this._removeInstance( instance.id ); |
| 134 |
} else if ( this.instance ) { |
| 135 |
this._removeInstance( this.instance.id ); |
| 136 |
} |
| 137 |
if ( this.instances.length === 0 ) { |
| 138 |
if ( this.$block ) { |
| 139 |
this.$block.hide(); |
| 140 |
} |
| 141 |
if ( this.$window ) { |
| 142 |
this.$window.hide(); |
| 143 |
} |
| 144 |
$( window ) |
| 145 |
.unbind( 'resize.message-box', this.update ) |
| 146 |
.unbind( 'scroll.message-box', this.update ); |
| 147 |
} else if ( this.instance ) { |
| 148 |
this._createWindow( this.instance.message, this.instance.title, this.instance.buttons ); |
| 149 |
} |
| 150 |
}, |
| 151 |
update( force ) { |
| 152 |
let that = this, |
| 153 |
$wrap = this.$window.find( '#message-box-wrap' ), |
| 154 |
timer = $wrap.data( 'timer' ), |
| 155 |
_update = function() { |
| 156 |
LP.Hook.doAction( 'learn_press_message_box_before_resize', that ); |
| 157 |
let $content = $wrap.find( '.message-box-content' ).css( 'height', '' ).css( 'overflow', 'hidden' ), |
| 158 |
width = $wrap.outerWidth(), |
| 159 |
height = $wrap.outerHeight(), |
| 160 |
contentHeight = $content.height(), |
| 161 |
windowHeight = $( window ).height(), |
| 162 |
top = $wrap.offset().top; |
| 163 |
if ( contentHeight > windowHeight - 50 ) { |
| 164 |
$content.css( { |
| 165 |
height: windowHeight - 25, |
| 166 |
} ); |
| 167 |
height = $wrap.outerHeight(); |
| 168 |
} else { |
| 169 |
$content.css( 'height', '' ).css( 'overflow', '' ); |
| 170 |
} |
| 171 |
$wrap.css( { |
| 172 |
marginTop: ( $( window ).height() - height ) / 2, |
| 173 |
} ); |
| 174 |
LP.Hook.doAction( 'learn_press_message_box_resize', height, that ); |
| 175 |
}; |
| 176 |
if ( force ) { |
| 177 |
_update(); |
| 178 |
} |
| 179 |
timer && clearTimeout( timer ); |
| 180 |
timer = setTimeout( _update, 250 ); |
| 181 |
}, |
| 182 |
_removeInstance( id ) { |
| 183 |
for ( let i = 0; i < this.instances.length; i++ ) { |
| 184 |
if ( this.instances[ i ].id === id ) { |
| 185 |
this.instances.splice( i, 1 ); |
| 186 |
|
| 187 |
const len = this.instances.length; |
| 188 |
if ( len ) { |
| 189 |
this.instance = this.instances[ len - 1 ]; |
| 190 |
this.$window.attr( 'instance', this.instance.id ); |
| 191 |
} else { |
| 192 |
this.instance = false; |
| 193 |
this.$window.removeAttr( 'instance' ); |
| 194 |
} |
| 195 |
break; |
| 196 |
} |
| 197 |
} |
| 198 |
}, |
| 199 |
_getInstance( id ) { |
| 200 |
for ( let i = 0; i < this.instances.length; i++ ) { |
| 201 |
if ( this.instances[ i ].id === id ) { |
| 202 |
return this.instances[ i ]; |
| 203 |
} |
| 204 |
} |
| 205 |
}, |
| 206 |
_createWindow( message, title, buttons ) { |
| 207 |
const $wrap = this.$window.find( '#message-box-wrap' ).html( '' ); |
| 208 |
if ( title ) { |
| 209 |
$wrap.append( '<h3 class="message-box-title">' + title + '</h3>' ); |
| 210 |
} |
| 211 |
$wrap.append( $( '<div class="message-box-content"></div>' ).html( message ) ); |
| 212 |
if ( buttons ) { |
| 213 |
const $buttons = $( '<div class="message-box-buttons"></div>' ); |
| 214 |
switch ( buttons ) { |
| 215 |
case 'yesNo': |
| 216 |
$buttons.append( this._createButton( LP_Settings.localize.button_yes, 'yes' ) ); |
| 217 |
$buttons.append( this._createButton( LP_Settings.localize.button_no, 'no' ) ); |
| 218 |
break; |
| 219 |
case 'okCancel': |
| 220 |
$buttons.append( this._createButton( LP_Settings.localize.button_ok, 'ok' ) ); |
| 221 |
$buttons.append( this._createButton( LP_Settings.localize.button_cancel, 'cancel' ) ); |
| 222 |
break; |
| 223 |
default: |
| 224 |
$buttons.append( this._createButton( LP_Settings.localize.button_ok, 'ok' ) ); |
| 225 |
} |
| 226 |
$wrap.append( $buttons ); |
| 227 |
} |
| 228 |
}, |
| 229 |
_createButton( title, type ) { |
| 230 |
const $button = $( '<button type="button" class="button message-box-button message-box-button-' + type + '">' + title + '</button>' ), |
| 231 |
callback = 'on' + ( type.substr( 0, 1 ).toUpperCase() + type.substr( 1 ) ); |
| 232 |
$button.data( 'callback', callback ).click( function() { |
| 233 |
const instance = $( this ).data( 'instance' ), |
| 234 |
callback = instance.events[ $( this ).data( 'callback' ) ]; |
| 235 |
if ( $.type( callback ) === 'function' ) { |
| 236 |
if ( callback.apply( LP.MessageBox, [ instance ] ) === false ) { |
| 237 |
// return; |
| 238 |
} else { |
| 239 |
LP.MessageBox.hide( null, instance ); |
| 240 |
} |
| 241 |
} else { |
| 242 |
LP.MessageBox.hide( null, instance ); |
| 243 |
} |
| 244 |
} ).data( 'instance', this.instance ); |
| 245 |
return $button; |
| 246 |
}, |
| 247 |
}; |
| 248 |
|
| 249 |
export default MessageBox; |
| 250 |
|
