| 1 |
alertify.defaults.maintainFocus = false; |
| 2 |
alertify.defaults.glossary.title = ' '; |
| 3 |
alertify.defaults.transition = 'zoom'; |
| 4 |
//alertify.defaults.preventBodyShift = true; |
| 5 |
|
| 6 |
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog', function () |
| 7 |
{ |
| 8 |
var iframe; |
| 9 |
return { |
| 10 |
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId) |
| 11 |
main: function (videoId) |
| 12 |
{ |
| 13 |
//set the videoId setting and return current instance for chaining. |
| 14 |
return this.set({ |
| 15 |
'videoId': videoId |
| 16 |
}); |
| 17 |
}, |
| 18 |
// we only want to override two options (padding and overflow). |
| 19 |
setup: function () |
| 20 |
{ |
| 21 |
return { |
| 22 |
options: { |
| 23 |
//disable both padding and overflow control. |
| 24 |
padding: !1, |
| 25 |
overflow: !1, |
| 26 |
} |
| 27 |
}; |
| 28 |
}, |
| 29 |
// This will be called once the DOM is ready and will never be invoked again. |
| 30 |
// Here we create the iframe to embed the video. |
| 31 |
build: function () |
| 32 |
{ |
| 33 |
// create the iframe element |
| 34 |
iframe = document.createElement('iframe'); |
| 35 |
iframe.frameBorder = "no"; |
| 36 |
iframe.width = "100%"; |
| 37 |
iframe.height = "100%"; |
| 38 |
// add it to the dialog |
| 39 |
this.elements.content.appendChild(iframe); |
| 40 |
|
| 41 |
//give the dialog initial height (half the screen height). |
| 42 |
this.elements.body.style.minHeight = screen.height * .5 + 'px'; |
| 43 |
}, |
| 44 |
// dialog custom settings |
| 45 |
settings: { |
| 46 |
videoId: undefined |
| 47 |
}, |
| 48 |
// listen and respond to changes in dialog settings. |
| 49 |
settingUpdated: function (key, oldValue, newValue) |
| 50 |
{ |
| 51 |
switch (key) |
| 52 |
{ |
| 53 |
case 'videoId': |
| 54 |
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1"; |
| 55 |
break; |
| 56 |
} |
| 57 |
}, |
| 58 |
// listen to internal dialog events. |
| 59 |
hooks: { |
| 60 |
// triggered when the dialog is closed, this is seperate from user defined onclose |
| 61 |
onclose: function () |
| 62 |
{ |
| 63 |
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); |
| 64 |
}, |
| 65 |
// triggered when a dialog option gets update. |
| 66 |
// warning! this will not be triggered for settings updates. |
| 67 |
onupdate: function (option, oldValue, newValue) |
| 68 |
{ |
| 69 |
switch (option) |
| 70 |
{ |
| 71 |
case 'resizable': |
| 72 |
if (newValue) |
| 73 |
{ |
| 74 |
this.elements.content.removeAttribute('style'); |
| 75 |
iframe && iframe.removeAttribute('style'); |
| 76 |
} |
| 77 |
else |
| 78 |
{ |
| 79 |
this.elements.content.style.minHeight = 'inherit'; |
| 80 |
iframe && (iframe.style.minHeight = 'inherit'); |
| 81 |
} |
| 82 |
break; |
| 83 |
} |
| 84 |
} |
| 85 |
} |
| 86 |
}; |
| 87 |
}); |
| 88 |
|
