How to use the maquette.createProjector function in maquette

To help you get started, we’ve selected a few maquette examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dojo / framework / src / widget-core / projector.ts View on Github external
function initialize(instance: Projector, { cssTransitions = false, autoAttach = false, root = document.body }: ProjectorOptions = {}) {
		const options: { transitions?: any } = {};
		if (cssTransitions) {
			if (global.cssTransitions) {
				options.transitions = global.cssTransitions;
			}
			else {
				throw new Error('Unable to create projector with css transitions enabled. Is the \'css-transition.js\' script loaded in the page?');
			}
		}
		const projector = createMaquetteProjector(options);
		projectorDataMap.set(instance, {
			attachHandle: noopHandle,
			boundRender: noopVNode,
			projector,
			root,
			state: ProjectorState.Detached,
			tagName: 'div'
		});
		if (autoAttach === true) {
			instance.attach({ type: 'merge' });
		}
		else if (typeof autoAttach === 'string') {
			instance.attach({ type: autoAttach });
		}
	})
	.mixin({
github dojo / framework / src / widget-core / mixins / createProjectorMixin.ts View on Github external
const { root = document.body, cssTransitions = false } = options;
		const maquetteProjectorOptions: { transitions?: any } = {};

		if (cssTransitions) {
			if (global.cssTransitions) {
				maquetteProjectorOptions.transitions = global.cssTransitions;
			}
			else {
				throw new Error('Unable to create projector with css transitions enabled. Is the \'css-transition.js\' script loaded in the page?');
			}
		}

		instance.own(instance.on('widget:children', instance.invalidate));
		instance.own(instance.on('invalidated', scheduleRender));

		const projector = createMaquetteProjector(maquetteProjectorOptions);

		projectorDataMap.set(instance, {
			projector,
			root,
			state: ProjectorState.Detached
		});
	}
});
github dojo / framework / src / widget-core / examples / scratch.ts View on Github external
: h('li', { classes: { active: !closed }, key: panel4 }, [ h('div.tab-label', [ 'tab 4' ]), h('div.tab-close', [ 'X' ]) ])
		]),
		h('div.panels', [
			undefined,
			closed
				? h('dojo-panel', { classes: { visible: true }, key: panel2 }, [ h('div#bar', [ 'tab 2' ]) ])
				: undefined,
			undefined,
			closed
				? undefined
				: h('dojo-panel', { classes: { visible: true }, key: panel4 }, [ h('div#bar', [ 'tab 4' ]) ])
		])
	]);
}

const projector = createProjector({});

projector.append(document.body, render);

const next = document.getElementById('next');
if (next) {
	next.addEventListener('click', (event) => {
		closed = true;
		projector.scheduleRender();
	});
}

maquette

Minimalistic Virtual DOM implementation with support for animated transitions.

MIT
Latest version published 9 months ago

Package Health Score

65 / 100
Full package analysis