Skip to content

Commit

Permalink
Offcanvas without triggerButton #40
Browse files Browse the repository at this point in the history
  • Loading branch information
Vasileios Mitsaras committed Mar 6, 2019
1 parent a25e3c2 commit 57cd483
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 63 deletions.
29 changes: 19 additions & 10 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,62 +11,68 @@
<script src="../dist/_js/js-offcanvas.pkgd.js"></script>
<script>
$( function(){

$( document ).on( "beforecreate.offcanvas", function( e ){
var dataOffcanvas = $( e.target ).data('offcanvas-component');
console.log(dataOffcanvas);
dataOffcanvas.onInit = function() {
console.log(this);
};
} );

$( document ).on( "create.offcanvas", function( e ){
var dataOffcanvas = $( e.target ).data('offcanvas-component');
console.log(dataOffcanvas);
console.log(dataOffcanvas.options);
dataOffcanvas.onOpen = function() {
console.log('Callback onOpen');
};
dataOffcanvas.onClose = function() {
console.log('Callback onClose');
};

} );

$( document ).on( "clicked.offcanvas-trigger clicked.offcanvas", function( e ){
var dataBtnText = $( e.target ).text();
console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
} );

$( document ).on( "open.offcanvas", function( e ){
var dataOffcanvasID = $( e.target ).attr('id');
console.log(e.type + ': #' + dataOffcanvasID);
} );

$( document ).on( "resizing.offcanvas", function( e ){
var dataOffcanvasID = $( e.target ).attr('id');
console.log(e.type + ': #' + dataOffcanvasID);
} );

$( document ).on( "close.offcanvas", function( e ){
var dataOffcanvasID = $( e.target ).attr('id');
console.log(e.type + ': #' + dataOffcanvasID);
} );

$( document ).on( "destroy.offcanvas", function( e ){
var dataOffcanvasID = $( e.target ).attr('id');
console.log(e.type + ': #' + dataOffcanvasID);
} );
$( '#top' ).on( "create.offcanvas", function( e ){

$( '#bottom' ).on( "create.offcanvas", function( e ){
var api = $(this).data('offcanvas-component');

console.log(api);
console.log(api);
$('.js-destroy').on('click', function () {
api.destroy();
//$( '#top' ).data('offcanvas-component').destroy();
//$( '#top' ).data('offcanvas-component').destroy();
console.log(api);
console.log( $( '#top' ).data() );
});
} );

$( '#left' ).offcanvas( {
modifiers: "left,overlay",
triggerButton: '.js-left'
triggerButton: '.js-offcanvas-trigger-left'
} );


$('.js-enhance').on('click', function () {
console.log('enhance');
$( document ).trigger( "enhance" );
Expand Down Expand Up @@ -131,7 +137,7 @@

<main class="c-offcanvas-content-wrap" role="main">
<div class="o-wrapper">
<a class="js-left" href="#left" data-button-options='{"wrapText":false}'>Left</a>
<a class="js-offcanvas-trigger-left" href="#left" id="#test">Left</a>
<a class="js-offcanvas-trigger" data-offcanvas-trigger="right" href="#right">Right</a>
<a class="js-offcanvas-trigger" data-offcanvas-trigger="top" href="#top">Top</a>
<a class="js-offcanvas-trigger" data-offcanvas-trigger="bottom" href="#bottom">Bottom</a>
Expand All @@ -140,9 +146,12 @@
</div>
</main>

<aside class=".js-offcanvas" id="left" role="complementary"></aside>
<aside id="left" role="complementary">
<input>
<button class="js-offcanvas-close">Close</button>
</aside>

<aside class="js-offcanvas" data-offcanvas-options='{"modifiers":"right, reveal","modal":false,"resize":false}' id="right" role="complementary">
<aside class="js-offcanvas" data-offcanvas-options='{"modifiers":"right,overlay"}' id="right" role="complementary">
<input>
<button class="js-offcanvas-close" data-button-options='{"modifiers":"m1,m2"}'>Close</button>
</aside>
Expand Down
89 changes: 89 additions & 0 deletions demo/no-trigger-button.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html class="support-no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js-Offcanvas without triggerButton</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link rel="stylesheet" href="../dist/_css/prefixed/js-offcanvas.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="../vendor/modernizr.js"></script>
<script src="../dist/_js/js-offcanvas.pkgd.js"></script>
<script>
$( function(){


$( document ).on( "create.offcanvas", function( e ){
var dataOffcanvas = $( e.target ).data('offcanvas-component');
console.log(dataOffcanvas);
dataOffcanvas.onOpen = function() {
console.log('Callback onOpen');
};
dataOffcanvas.onClose = function() {
console.log('Callback onClose');
};

} );

var leftOffcanvas;
function openOffcanvas () {
leftOffcanvas.open();
}
window.openOffcanvas = openOffcanvas;

$( '#left' ).on( "create.offcanvas", function( e ){
leftOffcanvas = $(this).data('offcanvas-component');
console.log(leftOffcanvas);
} );

$('.js-open-offcanvas').on('click', function () {
openOffcanvas();
});

$( document ).trigger( "enhance" );
});
</script>
<style>
.o-wrapper {
max-width:960px;
margin: auto;
}
*:focus {
outline: 2px dotted;
outline-offset: 2px;
}
</style>
</head>
<body>

<main class="c-offcanvas-content-wrap" role="main">
<div class="o-wrapper">
<h1>Offcanvas without triggerButton</h1>
<button class="js-open-offcanvas">offcanvas.open();</button>
<button class="js-open-offcanvas">offcanvas.open();</button>
<pre>
<code>

var leftOffcanvas;

$( '#left' ).on( "create.offcanvas", function( e ){
leftOffcanvas = $(this).data('offcanvas-component');
console.log(leftOffcanvas);
} );

function openOffcanvas () {
leftOffcanvas.open();
}
</code>
</pre>
</div>
</main>


<aside class="js-offcanvas" data-offcanvas-options='{"modifiers":"left, overlay"}' id="left" role="complementary">
<input>
<button class="js-offcanvas-close">Close</button>
</aside>

</body>
</html>
2 changes: 1 addition & 1 deletion dist/_css/js-offcanvas.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 4 additions & 16 deletions dist/_js/js-offcanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,6 @@
if (options.resize) {
this.resize();
}
if( !this.$trigger ){
this.$trigger = this.$element.data( componentName + "-trigger" );
}
if( doc.activeElement ){
this.lastFocus = doc.activeElement;
}
Expand Down Expand Up @@ -294,17 +291,12 @@
Offcanvas.prototype._initTrigger = function() {
var self = this,
options = self.options,
offcanvasID = this.$element.attr('id'),
att = "data-offcanvas-trigger";
// $triggerButton;
offcanvasID = this.$element.attr('id');

if (!options.triggerButton) {
this.$triggerBtn = $( "["+ att +"='" + offcanvasID + "']" );
} else {
if (options.triggerButton ) {
this.$triggerBtn = $(options.triggerButton);
new window.componentNamespace.OffcanvasTrigger(this.$triggerBtn[0], {"offcanvas": offcanvasID}).init();
}
new window.componentNamespace.OffcanvasTrigger( this.$triggerBtn[0], { "offcanvas": offcanvasID } ).init();

};

Offcanvas.prototype.setButton = function(trigger){
Expand All @@ -319,11 +311,7 @@
this.close();
}

if (this.options.modal) {
this.$modal.remove();
}

this.$element
this.$element
.removeData()
.removeClass( this._panelClasses.join( " " ) )
.removeAttr('tabindex')
Expand Down

0 comments on commit 57cd483

Please sign in to comment.