JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<p>
  Resize Frame
</p>

<p>
  open image = void<br>
  hide image = unbind(...).bind(...)<br>
  destory zoomAlbum = .off(...)
</p>

<div class="zoom">
  Zoom <span></span> <i></i><br>
  <button class="open">open image</button>
  <button class="hide">hide image</button>
  &nbsp;
  <button class="destory">destory zoomAlbum</button>
</div>

<p>
  independent: window:resize:mediaGallery
</p>
<div class="mediagallery">MediaGallery <span></span></div>

<p>
  independent: indow:resize:myCustomWindowResize
</p>
<div class="custom">custom <span></span></div>

CSS

p {
  padding: 10px;
  background: lightgrey;
  margin-top: 40px;
  border-top: 3px solid grey;
}

p:first-child {
  background: lightcoral;
  margin-top: 0;
}

.zoom, .mediagallery {
  margin-bottom: 20px;
}

Babel + JSX

$(window).on('thomann:newWindow:resize', (event, newCustomEvent) => {
	$(window).on('resize', () => {
  	$(window).trigger('window:resize:' + newCustomEvent);
  });
});

$(window).on('resize', () => {
	$(window).trigger('window:resize:zoomAlbum');
  $(window).trigger('window:resize:mediaGallery');
});

// Custom Test
let $custom = $('.custom');

// create new windowOnResize Handler
$(window).trigger('thomann:newWindow:resize', 'myCustomWindowResize');

$(window).on('window:resize:myCustomWindowResize', () => {
	$custom.find('span').html($(window).width());
});

// ========= Examples ========

// ZoomAlbum
let $zoom = $('.zoom');
let zoomAlbumResizeHandler = () => {
  console.log("fire");
	$zoom.find('span').html($(window).width());
};

$(window).on('window:resize:zoomAlbum', zoomAlbumResizeHandler);

$zoom.find('button.open').on('click', () => {
	$zoom.find('i').html('opened image').fadeIn();
});

$zoom.find('button.hide').on('click', () => {
	$zoom.find('i').html('closed image').fadeIn();
  
	$(window)
  	.unbind('window:resize:zoomAlbum', zoomAlbumResizeHandler)
    .bind('window:resize:zoomAlbum', zoomAlbumResizeHandler);
});

$zoom.find('button.destory').on('click', () => {
	$zoom.find('i').html('destory zoomAlbum').fadeIn();
	$(window).off('window:resize:zoomAlbum');
});

// MediaGallery
let $mediaGallery = $('.mediagallery');
$(window).on('window:resize:mediaGallery', () => {
	$mediaGallery.find('span').html($(window).width());
});