[opencms-dev] ADE - reinitialize javascript

[Tobias Karrer]

Sounds good.

To deal with this problem at the moment we wrote a jquery plugin, which listens to dom changes:

var domUpdateChecker = (function($) {

	var ops, checkInterval, parentElement;

	init = function(options) {
		var defaults = {
			parentSelector: document,
			elementToObserveSelector: null,
			interval: 500,
			ignoreInitialElements: true,
			changeCallback: function() {}
		}
		ops = $.extend(defaults, options);
		parentElement = $(ops.parentSelector);

		if(ops.elementToObserveSelector == null) {
			return;
		}

		if(ops.ignoreInitialElements === true) {
			markInitialElements();
		}

		checkInterval = window.setInterval(function() {
			checkForChanges();
		}, ops.interval);

	}

	markInitialElements = function() {
		parentElement.closest(ops.elementToObserveSelector).data('domChangeKnown', true);
	}

	checkForChanges = function() {
		parentElement.closest(ops.elementToObserveSelector).each(function(i, el) {
			if($(el).data('domChangeKnown') == undefined) {
				$(el).data('domChangeKnown', true);
				ops.changeCallback(el);
			}
		});
	}

	destroy = function() {
		parentElement.closest(ops.elementToObserveSelector).removeData('domChangeKnown');
		window.clearInterval(checkInterval);
	}

	return {
		init:init,
		destroy:destroy
	}
}(jQuery));


This call inits the dom checker:

// set <script>cmsEditorMode = true;</script> in your html head if openCms is in editor-mode
if(typeof cmsEditorMode !== 'undefined' && cmsEditorMode === true) {

	domUpdateChecker.init({
		parentSelector: '#content', // optional parent selector
		elementToObserveSelector: '.c-article', // selector of elements to observe
		changeCallback: function(el) { // callback is fired after new element with selector elementToObserveSelector is inserted into the DOM
			// --------------------------------------------- //
			// re-initialize your javascript here
			// ----------------------------------------------//
		}
	});
}


The flag cmsEditorMode is used to disable the checker when not in edit mode.
May be included like:

<c:if test="${not cms.requestContext.currentProject.onlineProject}">
	<script>
		var cmsEditorMode = true; 
	</script>
</c:if>


Greets,
Tobias


virtual identity AG
Grünwälderstraße 10-14 
79098 Freiburg 

t +49 761 20758-406 
f +49 761 20758-01
tobias.karrer at virtual-identity.com
http://www.virtual-identity.com 

Berlin | Freiburg | München | Wien 



-----Ursprüngliche Nachricht-----
Von: opencms-dev-bounces at opencms.org [mailto:opencms-dev-bounces at opencms.org] Im Auftrag von Tobias Herrmann
Gesendet: Donnerstag, 8. März 2012 09:02
An: The OpenCms mailing list
Betreff: Re: [opencms-dev] ADE - reinitialize javascript

Hi Tobias,

you have a valid point there. We will consider to implement a feature like that for the upcoming versions.

Greetings, Tobias

--

Alkacon Software GmbH - The OpenCms Experts

http://www.alkacon.com  --  http://www.opencms.org



Am 07.03.2012 15:16, schrieb Tobias Karrer:
> Hi!
>
> is there / will there be a posibility to re-initialise JavaScript 
> after editing via ADE?
>
> We use a lot of jacascript initialisation for galleries, slider, 
> videoplayer, which are all "broken" after editing the page.
>
> Fine would be a javascript callback function, which is called when the 
> editor in modal layer will be closed.
>
> Best,
> Tobias
>
>
>
> _______________________________________________
> This mail is sent to you from the opencms-dev mailing list To change 
> your list options, or to unsubscribe from the list, please visit 
> http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev
>
>
>
_______________________________________________
This mail is sent to you from the opencms-dev mailing list To change your list options, or to unsubscribe from the list, please visit http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev