Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history 
* fixing #265, a known issue left unchecked
* documentation updates to reflect the improvement
  • Loading branch information
@thednp
thednp committed Jan 14, 2019
1 parent 63302c3 commit 3efc867
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 72 deletions.
4 changes: 2 additions & 2 deletions assets/js/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var myModal = document.getElementById('myModal'); // we need a blank modal to fill up and target our object function
myModal.addEventListener('show.bs.modal', function(e) {
console.log('show.bs.modal triggered for #'+e.target.id);
console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
e.target && console.log('show.bs.modal triggered for #'+e.target.id);
e.relatedTarget && console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
}, false);


Expand Down
34 changes: 18 additions & 16 deletions dist/bootstrap-native-v4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -961,19 +961,18 @@
// the modal (both JavaScript / DATA API init) / triggering button element (DATA API)
element = queryElement(element);

// determine modal, triggering element
var btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,'modal') ? element : checkModal,
overlayDelay,

// strings
component = 'modal',
staticString = 'static',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop';

if ( hasClass(element,'modal') ) { element = null; } // modal is now independent of it's triggering element
var component = 'modal',
staticString = 'static',
modalTrigger = 'modalTrigger',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop',
// determine modal, triggering element
btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,component) ? element : checkModal;

if ( hasClass(element, component) ) { element = null; } // modal is now independent of it's triggering element

if ( !modal ) { return; } // invalidate

Expand All @@ -987,7 +986,7 @@

// bind, constants, event targets and other vars
var self = this, relatedTarget = null,
bodyIsOverflowing, scrollBarWidth, overlay,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay,

// also find fixed-top / fixed-bottom items
fixedItems = getElementsByClassName(HTML,fixedTop).concat(getElementsByClassName(HTML,fixedBottom)),
Expand Down Expand Up @@ -1103,7 +1102,6 @@
var clickTarget = e[target];
clickTarget = clickTarget[hasAttribute](dataTarget) || clickTarget[hasAttribute]('href') ? clickTarget : clickTarget[parentNode];
if ( clickTarget === element && !hasClass(modal,showClass) ) {
modal.modalTrigger = element;
relatedTarget = element;
self.show();
e[preventDefault]();
Expand Down Expand Up @@ -1133,7 +1131,10 @@

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' '+showClass)[0];
currentOpen && currentOpen !== modal && currentOpen.modalTrigger[stringModal].hide();
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}

if ( this[backdrop] ) {
!modalOverlay && createOverlay();
Expand Down Expand Up @@ -1187,7 +1188,8 @@
on(element, clickEvent, clickHandler);
}
if ( !!self[content] ) { self.setContent( self[content] ); }
!!element && (element[stringModal] = self);
if (element) { element[stringModal] = self; modal[modalTrigger] = element; }
else { modal[stringModal] = self; }
};

// DATA API
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native-v4.min.js
View file

Large diffs are not rendered by default.

36 changes: 19 additions & 17 deletions dist/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1108,19 +1108,18 @@
// the modal (both JavaScript / DATA API init) / triggering button element (DATA API)
element = queryElement(element);

// determine modal, triggering element
var btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,'modal') ? element : checkModal,
overlayDelay,

// strings
component = 'modal',
staticString = 'static',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop';

if ( hasClass(element,'modal') ) { element = null; } // modal is now independent of it's triggering element
var component = 'modal',
staticString = 'static',
modalTrigger = 'modalTrigger',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop',
// determine modal, triggering element
btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,component) ? element : checkModal;

if ( hasClass(element, component) ) { element = null; } // modal is now independent of it's triggering element

if ( !modal ) { return; } // invalidate

Expand All @@ -1134,7 +1133,7 @@

// bind, constants, event targets and other vars
var self = this, relatedTarget = null,
bodyIsOverflowing, scrollBarWidth, overlay,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay,

// also find fixed-top / fixed-bottom items
fixedItems = getElementsByClassName(HTML,fixedTop).concat(getElementsByClassName(HTML,fixedBottom)),
Expand Down Expand Up @@ -1173,7 +1172,7 @@
DOC[body][appendChild](scrollDiv);
widthValue = scrollDiv[offsetWidth] - scrollDiv[clientWidth];
DOC[body].removeChild(scrollDiv);
return widthValue;
return widthValue;
},
checkScrollbar = function () {
bodyIsOverflowing = DOC[body][clientWidth] < getWindowWidth();
Expand Down Expand Up @@ -1250,7 +1249,6 @@
var clickTarget = e[target];
clickTarget = clickTarget[hasAttribute](dataTarget) || clickTarget[hasAttribute]('href') ? clickTarget : clickTarget[parentNode];
if ( clickTarget === element && !hasClass(modal,inClass) ) {
modal.modalTrigger = element;
relatedTarget = element;
self.show();
e[preventDefault]();
Expand Down Expand Up @@ -1281,7 +1279,10 @@

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' in')[0];
currentOpen && currentOpen !== modal && currentOpen.modalTrigger[stringModal].hide();
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}

if ( this[backdrop] ) {
!modalOverlay && createOverlay();
Expand Down Expand Up @@ -1335,7 +1336,8 @@
on(element, clickEvent, clickHandler);
}
if ( !!self[content] ) { self.setContent( self[content] ); }
!!element && (element[stringModal] = self);
if (element) { element[stringModal] = self; modal[modalTrigger] = element; }
else { modal[stringModal] = self; }
};

// DATA API
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native.min.js
View file

Large diffs are not rendered by default.

13 changes: 11 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,21 +555,26 @@ <h5>Via JavaScript</h5>
});

// OR initialize with no options provided
// the options obect is optional
// the options object is optional
var modalInitJS = new Modal(myModal);

// when we click btnModal, open the modal
btnModal.addEventListener('click', function(e){
modalInitJS.show();
}, false)

// BONUS
// since there is no triggering element, you might need
// access to the initialization object from another application
var findModalInitJS = myModal.Modal;
</code></pre>

<p>Here is what the above code does:</p>
<p><button id="openModalViaJS" type="button" class="btn btn-default btn-lg">Open Modal</button></p>

<p>Next we will initialize another triggering button, and attach a handler to it to change content of the modal when clicked.</p>

<pre><code class="language-javascript">// the reiggering element
<pre><code class="language-javascript">// the triggering element
var btnModal2 = document.getElementById('openModalViaJS2');

// set some custom content or get if from external sources
Expand All @@ -596,6 +601,10 @@ <h5>Via JavaScript</h5>
// initialize Modal for this triggering element
var modalInitJS2 = new Modal(btnModal2, { backdrop: 'static' });

// because we initialized the component for this button
// this becomes the triggering element to hold the initialization object
var modalInitJSInit2 = btnModal2.Modal;

// now when we click this modal triggering element, we change the modal content
btnModal2.addEventListener('click', function() {
modalInitJS2.setContent(secondModalContent);
Expand Down
36 changes: 19 additions & 17 deletions lib/V3/modal-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,18 @@ var Modal = function(element, options) { // element can be the modal/triggering
// the modal (both JavaScript / DATA API init) / triggering button element (DATA API)
element = queryElement(element);

// determine modal, triggering element
var btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,'modal') ? element : checkModal,
overlayDelay,

// strings
component = 'modal',
staticString = 'static',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop';

if ( hasClass(element,'modal') ) { element = null; } // modal is now independent of it's triggering element
var component = 'modal',
staticString = 'static',
modalTrigger = 'modalTrigger',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop',
// determine modal, triggering element
btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,component) ? element : checkModal;

if ( hasClass(element, component) ) { element = null; } // modal is now independent of it's triggering element

if ( !modal ) { return; } // invalidate

Expand All @@ -35,7 +34,7 @@ var Modal = function(element, options) { // element can be the modal/triggering

// bind, constants, event targets and other vars
var self = this, relatedTarget = null,
bodyIsOverflowing, scrollBarWidth, overlay,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay,

// also find fixed-top / fixed-bottom items
fixedItems = getElementsByClassName(HTML,fixedTop).concat(getElementsByClassName(HTML,fixedBottom)),
Expand Down Expand Up @@ -74,7 +73,7 @@ var Modal = function(element, options) { // element can be the modal/triggering
DOC[body][appendChild](scrollDiv);
widthValue = scrollDiv[offsetWidth] - scrollDiv[clientWidth];
DOC[body].removeChild(scrollDiv);
return widthValue;
return widthValue;
},
checkScrollbar = function () {
bodyIsOverflowing = DOC[body][clientWidth] < getWindowWidth();
Expand Down Expand Up @@ -151,7 +150,6 @@ var Modal = function(element, options) { // element can be the modal/triggering
var clickTarget = e[target];
clickTarget = clickTarget[hasAttribute](dataTarget) || clickTarget[hasAttribute]('href') ? clickTarget : clickTarget[parentNode];
if ( clickTarget === element && !hasClass(modal,inClass) ) {
modal.modalTrigger = element;
relatedTarget = element;
self.show();
e[preventDefault]();
Expand Down Expand Up @@ -182,7 +180,10 @@ var Modal = function(element, options) { // element can be the modal/triggering

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' in')[0];
currentOpen && currentOpen !== modal && currentOpen.modalTrigger[stringModal].hide();
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}

if ( this[backdrop] ) {
!modalOverlay && createOverlay();
Expand Down Expand Up @@ -236,7 +237,8 @@ var Modal = function(element, options) { // element can be the modal/triggering
on(element, clickEvent, clickHandler);
}
if ( !!self[content] ) { self.setContent( self[content] ); }
!!element && (element[stringModal] = self);
if (element) { element[stringModal] = self; modal[modalTrigger] = element; }
else { modal[stringModal] = self; }
};

// DATA API
Expand Down
34 changes: 18 additions & 16 deletions lib/V4/modal-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,18 @@ var Modal = function(element, options) { // element can be the modal/triggering
// the modal (both JavaScript / DATA API init) / triggering button element (DATA API)
element = queryElement(element);

// determine modal, triggering element
var btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,'modal') ? element : checkModal,
overlayDelay,

// strings
component = 'modal',
staticString = 'static',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop';

if ( hasClass(element,'modal') ) { element = null; } // modal is now independent of it's triggering element
var component = 'modal',
staticString = 'static',
modalTrigger = 'modalTrigger',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop',
// determine modal, triggering element
btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
modal = hasClass(element,component) ? element : checkModal;

if ( hasClass(element, component) ) { element = null; } // modal is now independent of it's triggering element

if ( !modal ) { return; } // invalidate

Expand All @@ -35,7 +34,7 @@ var Modal = function(element, options) { // element can be the modal/triggering

// bind, constants, event targets and other vars
var self = this, relatedTarget = null,
bodyIsOverflowing, scrollBarWidth, overlay,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay,

// also find fixed-top / fixed-bottom items
fixedItems = getElementsByClassName(HTML,fixedTop).concat(getElementsByClassName(HTML,fixedBottom)),
Expand Down Expand Up @@ -151,7 +150,6 @@ var Modal = function(element, options) { // element can be the modal/triggering
var clickTarget = e[target];
clickTarget = clickTarget[hasAttribute](dataTarget) || clickTarget[hasAttribute]('href') ? clickTarget : clickTarget[parentNode];
if ( clickTarget === element && !hasClass(modal,showClass) ) {
modal.modalTrigger = element;
relatedTarget = element;
self.show();
e[preventDefault]();
Expand Down Expand Up @@ -181,7 +179,10 @@ var Modal = function(element, options) { // element can be the modal/triggering

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' '+showClass)[0];
currentOpen && currentOpen !== modal && currentOpen.modalTrigger[stringModal].hide();
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}

if ( this[backdrop] ) {
!modalOverlay && createOverlay();
Expand Down Expand Up @@ -235,7 +236,8 @@ var Modal = function(element, options) { // element can be the modal/triggering
on(element, clickEvent, clickHandler);
}
if ( !!self[content] ) { self.setContent( self[content] ); }
!!element && (element[stringModal] = self);
if (element) { element[stringModal] = self; modal[modalTrigger] = element; }
else { modal[stringModal] = self; }
};

// DATA API
Expand Down

0 comments on commit 3efc867

Please sign in to comment.