Friday, 7 July 2017

Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages

In my search for modern plugins for my XPages applications I came across iziModal. iziModal is an elegant, responsive, flexible and lightweight Modal Plugin. In order to use iziModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: iziModal.
Below a basic example how iziModal can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example the Folders izimodal has been added in the WebContent Folder.
Next the JavaScript and CSS files, iziModal.js and izimodal.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="izimodal/js/iziModal.js"></script>
<link rel="stylesheet" href="izimodal/css/iziModal.css" />

AMD Loader Fix
Finally, the JavaScript file iziModal.js need to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the iziModal JavaScript file
2. Select Open With - Client/Server JS Editor


3. Removed define.amd and replace it with false


4. Save the JavaScript file iziModal.js

Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

Modal Plugin initialization
The iziModal Plugin can be initialized using a simple script. In the example below I used some options.

<script>
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal').iziModal('open');
});
$("#modal").iziModal({  // Set here modal trigger ID
title: 'Your message has been sent successfully',
subtitle: 'This message will be closed after 10 seconds',
overlayClose: true,
closeOnEscape: true,
bodyOverflow: false,
focusInput: true,
autoOpen: false,
fullscreen: true,
openFullscreen: false,
timeout: 10000, //Set a time, in miliseconds, to close automaticaly the modal
timeoutProgressbar: true, //Set here to 'true' if your enabled a timeout.
timeoutProgressbarColor: '#4183D7',
transitionInModal: 'transitionIn',
transitionOutModal: 'transitionOut',
transitionInOverlay: 'fadeIn',
transitionOutOverlay: 'fadeOut',
});
</script>

Final Result
The final result is a responsive Modal with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<link rel="stylesheet" href="izimodal/css/iziModal.css" />
<script type="text/javascript" src="izimodal/js/iziModal.js"></script>
<xp:this.resources>
<xp:styleSheet href="/izimodal.css"></xp:styleSheet>
</xp:this.resources>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<button class="trigger btn btn-default">Open Modal</button>
<div id="modal">
<div id="header">  
<div id="icon">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</div>
<p>Alert Modal in XPages.<br />
An Elegant, Responsive, Flexible and Lightweight Modal Plugin</p>
</div>    
</div>
<xp:br></xp:br>
<button class="triggerdefault btn btn-default">Open Modal 2</button>
<div id="modal-default" >
<div class="iziModal-header" style="background: rgb(136, 160, 185); padding-right: 78px;">
<i class="iziModal-header-icon icon-home"></i>
<h2 class="iziModal-header-title">Modern Models in XPages - iziModal</h2>
<p class="iziModal-header-subtitle">Elegant, responsive, flexible and lightweight modal plugin with jQuery.</p>
<div class="iziModal-header-buttons"><a href="javascript:void(0)" class="iziModal-button iziModal-button-close" data-izimodal-close=""></a>
<a href="javascript:void(0)" class="iziModal-button iziModal-button-fullscreen" data-izimodal-fullscreen=""></a></div></div>
<div class="iziModal-wrap" style="height: auto;">
<div class="iziModal-content" style="padding-left: 20px;">
<p>You have several possibilities to use the easy Modal, with options, and also data-attributes.<br />
An Elegant, Responsive, Flexible and Lightweight Modal Plugin</p>
</div>
</div>
</div>
<xp:br></xp:br>
<button class="triggeriframe btn btn-default">Open Modal 3</button>
<div id="modal-vimeo"
class="modais"
data-izimodal-transitionin="fadeInUp"
data-izimodal-title="Vimeo"
data-iziModal-subtitle="Model iFrame"
data-izimodal-iframeURL="https://player.vimeo.com/video/22439234?autoplay=1">
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
<script>
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal').iziModal('open');
});
$("#modal").iziModal({  // Set here modal trigger ID
title: 'Your message has been sent successfully',
subtitle: 'This message will be closed after 10 seconds',
overlayClose: true,
closeOnEscape: true,
bodyOverflow: false,
focusInput: true,
autoOpen: false,
fullscreen: true,
openFullscreen: false,
timeout: 10000, //Set a time, in miliseconds, to close automaticaly the modal
timeoutProgressbar: true, //Set here to 'true' if your enabled a timeout.
timeoutProgressbarColor: '#4183D7',
transitionInModal: 'transitionIn',
transitionOutModal: 'transitionOut',
transitionInOverlay: 'fadeIn',
transitionOutOverlay: 'fadeOut',
});
</script>
<script>
$(document).on('click', '.triggerdefault', function (event) {
event.preventDefault();
$('#modal-default').iziModal('open');
});
$("#modal-default").iziModal({  // Set here modal trigger ID
autoOpen: false,
});
</script>
<script>
$(document).on('click', '.triggeriframe', function (event) {
event.preventDefault();
$('#modal-vimeo').iziModal('open');
});
$("#modal-vimeo").iziModal({  // Set here modal trigger ID
history: false,
iframe : true,
fullscreen: true,
headerColor: '#000000',
loop: true
});
</script>
</xp:view>

More information and documentation: jQuery IZIMODAL v1.5.0

No comments:

Post a Comment