Stiker dipilih'; var clearSticker = document.createElement('button'); clearSticker.type = 'button'; clearSticker.textContent = 'X'; selectedPreview.appendChild(clearSticker); control.appendChild(selectedPreview); var popover = setupStickerPicker(control, stickerInput, selectedPreview); stickerButton.addEventListener('click', function () { popover.classList.toggle('is-open'); }); clearSticker.addEventListener('click', function () { if (popover.__aaSetSelected) popover.__aaSetSelected('', ''); popover.classList.remove('is-open'); }); control.appendChild(stickerButton); } else if (object.customType === 'guest-submit-button') { var submit = document.createElement('button'); submit.type = 'submit'; submit.textContent = object.buttonText || placeholder || 'Kirim Ucapan'; control.appendChild(submit); } else if (object.customType === 'guest-comment-list') { var list = document.createElement('div'); list.className = 'aa-fabric-comment-list'; list.dataset.aaCommentList = 'true'; control.appendChild(list); } layer.appendChild(control); }); layer.addEventListener('submit', function (event) { event.preventDefault(); if (!layer.action || layer.action === '#') { showCopyToast('Preview form aktif setelah halaman dipublish.'); return; } var formData = new FormData(layer); if (!formData.get('attendance')) formData.set('attendance', 'ragu'); if (!String(formData.get('guest_name') || '').trim()) { showCopyToast('Nama wajib diisi.'); return; } if (!String(formData.get('message') || '').trim()) { showCopyToast('Ucapan wajib diisi.'); return; } addGuestbookCsrf(formData); var submit = layer.querySelector('button[type="submit"]'); var originalText = submit ? submit.textContent : ''; if (submit) { submit.disabled = true; submit.textContent = 'Mengirim...'; } fetch(layer.action, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, body: formData }).then(function (response) { return response.json().then(function (data) { if (!response.ok || data.success === false) throw new Error(data.message || 'Ucapan gagal dikirim.'); return data; }); }).then(function (data) { updateGuestbookCsrf(data.csrf_hash); var comment = data.comment || {}; window.AdaAcaraGuestbookEntries = window.AdaAcaraGuestbookEntries || []; window.AdaAcaraGuestbookEntries.unshift(comment); layer.reset(); stickerInput.value = ''; layer.querySelectorAll('.aa-fabric-selected-sticker').forEach(function (preview) { preview.classList.remove('is-visible'); }); layer.querySelectorAll('.aa-fabric-sticker-popover button').forEach(function (button) { button.classList.remove('is-selected'); }); populateCommentLists(layer); showCopyToast(data.message || 'Ucapan berhasil dikirim.'); }).catch(function (error) { showCopyToast(error.message || 'Ucapan gagal dikirim.'); }).finally(function () { if (submit) { submit.disabled = false; submit.textContent = originalText; } }); }); artboard.appendChild(layer); populateCommentLists(layer); } function isInteractiveObject(object) { return object && ['music-player', 'scroll-next-button', 'countdown-timer', 'photo-gallery', 'opening-button'].indexOf(object.customType) !== -1; } function interactiveParts(object) { var children = object && object.getObjects ? object.getObjects() : []; var box = null; var text = null; children.forEach(function (child) { if (!box && (child.name === 'interactive-box' || child.type === 'rect')) box = child; if (!text && (child.name === 'interactive-text' || isTextObject(child))) text = child; }); return { box: box, text: text }; } function interactiveStyle(object, canvas) { var parts = interactiveParts(object); var rect = object.getBoundingRect(); var box = parts.box || {}; var text = parts.text || {}; return { left: (rect.left / canvas.getWidth() * 100) + '%', top: (rect.top / canvas.getHeight() * 100) + '%', width: (rect.width / canvas.getWidth() * 100) + '%', height: (rect.height / canvas.getHeight() * 100) + '%', radius: Math.max(0, Number(object.controlRadius != null ? object.controlRadius : (box.rx || box.ry || 0)) * Math.max(Math.abs(object.scaleX || 1), Math.abs(object.scaleY || 1))) + 'px', bg: object.controlBackground || box.fill || '#ffffff', border: box.stroke || '#cbd5e1', borderWidth: Math.max(0, Number(box.strokeWidth || 1)) + 'px', color: text.fill || '#0f172a', fontFamily: normalizeFontFamily(text.fontFamily), fontSize: Math.max(10, Math.min(24, Number(text.fontSize || 34) * Math.abs(object.scaleY || 1))) + 'px', fontWeight: text.fontWeight || 'bold', countdownGap: Math.max(0, Number(object.countdownGap) || 0) + 'px', }; } function applyInteractiveStyle(el, style) { el.style.left = style.left; el.style.top = style.top; el.style.width = style.width; el.style.height = style.height; el.style.borderRadius = style.radius; el.style.fontFamily = style.fontFamily; el.style.fontSize = style.fontSize; el.style.fontWeight = style.fontWeight; el.style.setProperty('--aa-control-bg', style.bg); el.style.setProperty('--aa-control-color', style.color); el.style.setProperty('--aa-control-border-color', style.border); el.style.setProperty('--aa-control-border-width', style.borderWidth); el.style.setProperty('--aa-countdown-gap', style.countdownGap || '8px'); } function setupMusicControl(wrapper, object) { var url = String(object.audioUrl || '').trim(); var button = document.createElement('button'); button.type = 'button'; button.className = 'aa-fabric-music-button'; button.setAttribute('aria-label', 'Putar musik'); button.setAttribute('title', 'Putar musik'); var icon = document.createElement('span'); icon.className = 'aa-fabric-music-icon'; icon.setAttribute('aria-hidden', 'true'); icon.textContent = '▶'; button.innerHTML = ''; button.appendChild(icon); if (object.showPlayerButton === false || object.showPlayerButton === 'false') { button.style.opacity = '0'; } var audio = document.createElement('audio'); audio.preload = 'auto'; audio.setAttribute('playsinline', 'playsinline'); audio.setAttribute('webkit-playsinline', 'webkit-playsinline'); var shouldLoop = object.loopAudio !== false && object.loopAudio !== 'false'; audio.loop = shouldLoop; if (shouldLoop) { audio.setAttribute('loop', 'loop'); } if (url) { audio.src = url; } function setPlaying(playing) { icon.textContent = playing ? '❚❚' : '▶'; button.setAttribute('aria-label', playing ? 'Jeda musik' : 'Putar musik'); button.setAttribute('title', playing ? 'Jeda musik' : 'Putar musik'); } function playAudio() { if (!url) { return Promise.reject(new Error('Audio URL kosong.')); } audio.loop = shouldLoop; if (shouldLoop) { audio.setAttribute('loop', 'loop'); } return audio.play().then(function () { setPlaying(true); }); } function pauseAudio() { audio.pause(); setPlaying(false); } button.addEventListener('click', function (event) { event.preventDefault(); event.stopPropagation(); if (!audio.paused) { pauseAudio(); return; } playAudio().catch(function (error) { console.warn('Audio play gagal:', error); if (typeof showCopyToast === 'function') { showCopyToast('Musik belum bisa diputar. Pastikan file MP3 bisa diakses publik.'); } }); }); audio.addEventListener('ended', function () { if (shouldLoop) { audio.currentTime = 0; playAudio().catch(function () {}); return; } setPlaying(false); }); if (object.autoplayAfterInteraction !== false && object.autoplayAfterInteraction !== 'false' && url) { var hasTriedAutoplay = false; function autoplayAfterUserInteraction() { if (hasTriedAutoplay) return; hasTriedAutoplay = true; playAudio().catch(function (error) { console.warn('Autoplay setelah interaksi gagal:', error); setPlaying(false); }); document.removeEventListener('click', autoplayAfterUserInteraction); document.removeEventListener('touchstart', autoplayAfterUserInteraction); window.removeEventListener('adaacara:invitation-opened', autoplayAfterUserInteraction); } document.addEventListener('click', autoplayAfterUserInteraction, { once: true }); document.addEventListener('touchstart', autoplayAfterUserInteraction, { once: true }); window.addEventListener('adaacara:invitation-opened', autoplayAfterUserInteraction, { once: true }); if (window.AdaAcaraPublicInvitationOpened) { window.setTimeout(autoplayAfterUserInteraction, 150); } } wrapper.appendChild(audio); wrapper.appendChild(button); } function setupScrollNextControl(wrapper, canvasEl, object) { var button = document.createElement('button'); button.type = 'button'; button.className = 'aa-fabric-scroll-button'; button.textContent = object.buttonText || object.label || 'Scroll Down'; if (object.lockPageScroll !== false) { var currentSection = canvasEl.closest('.aa-fabric-page-section'); if (currentSection) currentSection.classList.add('aa-scroll-step-page'); } var smoothScrollToElement = function (target) { if (!target) return; var start = window.pageYOffset || document.documentElement.scrollTop || 0; var end = target.getBoundingClientRect().top + start; var distance = end - start; var duration = 920; var startTime = null; var ease = function (t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }; var step = function (time) { if (startTime === null) startTime = time; var progress = Math.min(1, (time - startTime) / duration); window.scrollTo(0, start + distance * ease(progress)); if (progress < 1) window.requestAnimationFrame(step); }; window.requestAnimationFrame(step); }; button.addEventListener('click', function () { var section = canvasEl.closest('.aa-fabric-page-section'); var next = section ? section.nextElementSibling : null; if (next) smoothScrollToElement(next); }); wrapper.appendChild(button); } function setupCountdownControl(wrapper, object) { var box = document.createElement('div'); box.className = 'aa-fabric-countdown'; var labels = ['Hari', 'Jam', 'Menit', 'Detik']; labels.forEach(function (label) { var item = document.createElement('span'); item.innerHTML = '00' + label + ''; box.appendChild(item); }); var target = new Date(object.countdownTarget || ((object.countdownDate || '') + 'T' + (object.countdownTime || '00:00') + ':00')).getTime(); if (!Number.isFinite(target)) target = Date.now(); var tick = function () { var diff = Math.max(0, target - Date.now()); var values = [ Math.floor(diff / 86400000), Math.floor((diff % 86400000) / 3600000), Math.floor((diff % 3600000) / 60000), Math.floor((diff % 60000) / 1000), ]; box.querySelectorAll('strong').forEach(function (node, index) { node.textContent = String(values[index] || 0).padStart(2, '0'); }); }; tick(); window.setInterval(tick, 1000); wrapper.appendChild(box); } function setupGalleryControl(wrapper, object) { var items = Array.isArray(object.galleryItems) && object.galleryItems.length ? object.galleryItems : (Array.isArray(object.galleryImages) ? object.galleryImages : []).map(function (src) { return { src: src }; }); var gallery = document.createElement('div'); gallery.className = 'aa-fabric-gallery'; gallery.style.gridTemplateColumns = 'repeat(' + Math.max(1, Math.min(6, Number(object.galleryColumns) || 2)) + ', 1fr)'; gallery.style.gap = Math.max(0, Number(object.galleryGap) || 0) + 'px'; var itemRadius = Math.max(0, Number(object.galleryRadius) || 0) * Math.max(Math.abs(object.scaleX || 1), Math.abs(object.scaleY || 1)); items.filter(function (item) { return item && item.src; }).forEach(function (item) { var button = document.createElement('button'); button.type = 'button'; button.style.borderRadius = itemRadius + 'px'; if (item.aspectRatio) button.style.aspectRatio = String(item.aspectRatio); var img = document.createElement('img'); img.src = item.src; img.alt = item.name || 'Gallery'; img.loading = 'lazy'; button.appendChild(img); button.addEventListener('click', function () { openGalleryLightbox(item.src); }); gallery.appendChild(button); }); wrapper.appendChild(gallery); } function openGalleryLightbox(url) { var lightbox = document.querySelector('.aa-fabric-lightbox'); if (!lightbox) { lightbox = document.createElement('div'); lightbox.className = 'aa-fabric-lightbox'; lightbox.innerHTML = ' Preview gallery

'; document.body.appendChild(lightbox); lightbox.addEventListener('click', function (event) { if (event.target === lightbox || event.target.tagName === 'BUTTON') lightbox.classList.remove('is-open'); }); document.addEventListener('keydown', function (event) { if (event.key === 'Escape') lightbox.classList.remove('is-open'); }); } lightbox.querySelector('img').src = url; lightbox.classList.add('is-open'); } function setupInteractiveOverlay(canvasEl, canvas) { var artboard = canvasEl.closest('.aa-fabric-artboard'); if (!artboard) return; var old = artboard.querySelector('.aa-fabric-interactive-layer'); if (old) old.remove(); var objects = canvas.getObjects().filter(isInteractiveObject); if (!objects.length) return; var layer = document.createElement('div'); layer.className = 'aa-fabric-interactive-layer'; objects.forEach(function (object) { var control = document.createElement('div'); control.className = 'aa-fabric-interactive-control'; control.dataset.interactiveRole = object.customType || ''; applyInteractiveStyle(control, interactiveStyle(object, canvas)); if (object.customType === 'music-player') setupMusicControl(control, object); if (object.customType === 'scroll-next-button') setupScrollNextControl(control, canvasEl, object); if (object.customType === 'countdown-timer') setupCountdownControl(control, object); if (object.customType === 'photo-gallery') setupGalleryControl(control, object); layer.appendChild(control); }); artboard.appendChild(layer); } function setupScrollAnimations(canvasEl, canvas) { var section = canvasEl.closest('.aa-fabric-page-section') || canvasEl; var clickLayer = canvasEl.closest('.aa-fabric-artboard') ? canvasEl.closest('.aa-fabric-artboard').querySelector('.aa-fabric-click-layer') : null; if ((canvas.__aaHasScrollAnimations || canvas.__aaHasTextAnimations) && clickLayer) { clickLayer.style.display = 'none'; } var runOnce = function () { if (canvas.__aaAnimationsStarted) return; canvas.__aaAnimationsStarted = true; runObjectAnimations(canvas); runTextAnimations(canvas); if (clickLayer) clickLayer.style.display = ''; }; var runWhenOpeningReady = function () { if (window.AdaAcaraRunWhenInvitationOpened) { window.AdaAcaraRunWhenInvitationOpened(runOnce); return; } runOnce(); }; if (!(canvas.__aaHasScrollAnimations || canvas.__aaHasTextAnimations) || !('IntersectionObserver' in window)) { runWhenOpeningReady(); return; } var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (!entry.isIntersecting) return; runWhenOpeningReady(); observer.disconnect(); }); }, { threshold: 0.28, rootMargin: '0px 0px -8% 0px' }); observer.observe(section); } function getObjectAnimationName(object) { return String( (object && (object.aaAnimation || object.customAnimation || object.animationPreset || object.animation || object.animationName)) || 'none' ); } function isAnimationObject(object) { if (!object || object.visible === false) return false; if (object.__aaSkipObject === true) return false; if (object.customType === 'background') return false; if (object.excludeFromAnimation === true) return false; if (isGuestbookObject(object) || isInteractiveObject(object)) return false; if (isTextObject(object) && aaNormalizeTextAnimationConfig(object.aaTextAnimation).enabled) return false; var animationName = getObjectAnimationName(object); return Boolean(animationName && animationName !== 'none'); } function getAnimationSortedObjects(canvas) { if (!canvas || !canvas.getObjects) return []; return canvas.getObjects() .filter(isAnimationObject) .sort(function (a, b) { var rectA = a.getBoundingRect(); var rectB = b.getBoundingRect(); if (Math.abs(rectA.top - rectB.top) > 12) { return rectA.top - rectB.top; } return rectA.left - rectB.left; }); } function getAnimationObjects(canvas) { return getAnimationSortedObjects(canvas); } function prepareScrollAnimatedObjects(canvas) { canvas.__aaHasScrollAnimations = false; getAnimationObjects(canvas).forEach(function (object) { canvas.__aaHasScrollAnimations = true; if (!object.__aaAnimationOriginal) { object.__aaAnimationOriginal = objectSnapshot(object); } object.set({ opacity: 0 }); object.dirty = true; }); canvas.requestRenderAll(); } function aaNormalizeTextAnimationConfig(value) { var source = value && typeof value === 'object' ? value : {}; var allowed = ['typewriter', 'letter-fade-up', 'letter-wave', 'word-reveal', 'text-glow', 'shine-text']; var type = allowed.indexOf(source.type) !== -1 ? source.type : 'none'; var enabled = source.enabled === true && type !== 'none'; var clamp = function (number, min, max, fallback) { number = Number(number); return isFinite(number) ? Math.max(min, Math.min(max, Math.round(number))) : fallback; }; return { enabled: enabled, type: enabled ? type : 'none', delay: clamp(source.delay, 0, 5000, 0), duration: clamp(source.duration, 200, 8000, 1200), stagger: clamp(source.stagger, 0, 300, 40), loop: source.loop === true || type === 'text-glow' || type === 'shine-text' }; } function isTextAnimationObject(object) { if (!isTextObject(object) || object.visible === false || object.__aaSkipObject === true) return false; return aaNormalizeTextAnimationConfig(object.aaTextAnimation).enabled; } function getTextAnimationObjects(canvas) { if (!canvas || !canvas.getObjects) return []; return canvas.getObjects().filter(isTextAnimationObject); } function aaTextAnimationOriginal(object) { if (!object.__aaTextAnimationOriginal) { object.__aaTextAnimationOriginal = { text: object.text || '', top: object.top, opacity: object.opacity == null ? 1 : object.opacity, fill: object.fill, shadow: object.shadow || null, charSpacing: object.charSpacing || 0 }; } return object.__aaTextAnimationOriginal; } function prepareTextAnimatedObjects(canvas) { canvas.__aaHasTextAnimations = false; getTextAnimationObjects(canvas).forEach(function (object) { var config = aaNormalizeTextAnimationConfig(object.aaTextAnimation); var original = aaTextAnimationOriginal(object); canvas.__aaHasTextAnimations = true; if (['typewriter', 'letter-fade-up', 'word-reveal'].indexOf(config.type) !== -1) { object.set({ opacity: 0, text: original.text }); } object.dirty = true; }); canvas.requestRenderAll(); } function aaSetTextAnimationText(object, text) { object.set('text', text); if (typeof object.initDimensions === 'function') object.initDimensions(); object.setCoords(); object.dirty = true; } function runTextRevealAnimation(canvas, object, config, byWord) { var original = aaTextAnimationOriginal(object); var text = String(original.text || ''); var units = byWord ? text.split(/(s+)/) : Array.from(text); if (!byWord && units.length > 180) { runTextRevealAnimation(canvas, object, Object.assign({}, config, { type: 'word-reveal' }), true); return; } var duration = Math.max(200, config.duration + Math.min(units.length, 80) * config.stagger); var start = null; var render = function () { canvas.requestRenderAll(); }; object.set({ opacity: config.type === 'letter-fade-up' ? 0 : original.opacity, top: config.type === 'letter-fade-up' ? original.top + 24 : original.top }); aaSetTextAnimationText(object, ''); var step = function (time) { if (start === null) start = time; var progress = Math.min(1, (time - start) / duration); var count = Math.min(units.length, Math.ceil(progress * units.length)); aaSetTextAnimationText(object, units.slice(0, count).join('')); if (config.type === 'letter-fade-up') { object.set({ opacity: original.opacity * progress, top: original.top + (24 * (1 - progress)) }); } render(); if (progress < 1) { requestAnimationFrame(step); } else { object.set({ opacity: original.opacity, top: original.top }); aaSetTextAnimationText(object, text); render(); } }; requestAnimationFrame(step); } function runTextMotionAnimation(canvas, object, config) { var original = aaTextAnimationOriginal(object); var start = null; var render = function () { canvas.requestRenderAll(); }; object.set({ opacity: original.opacity }); var step = function (time) { if (start === null) start = time; var progress = Math.min(1, (time - start) / Math.max(200, config.duration)); var wave = Math.sin(progress * Math.PI * 4); object.set({ top: original.top + wave * 7, charSpacing: original.charSpacing + Math.round(wave * 18) }); render(); if (progress < 1) { requestAnimationFrame(step); } else { object.set({ top: original.top, charSpacing: original.charSpacing }); render(); } }; requestAnimationFrame(step); } function runTextGlowAnimation(canvas, object, config, shine) { var original = aaTextAnimationOriginal(object); var start = null; var baseFill = original.fill || object.fill || '#111827'; var glowColor = shine ? '#ffffff' : baseFill; var render = function () { canvas.requestRenderAll(); }; object.set({ opacity: original.opacity, text: original.text }); var step = function (time) { if (start === null) start = time; var duration = Math.max(400, config.duration); var progress = ((time - start) % duration) / duration; var pulse = (Math.sin(progress * Math.PI * 2 - Math.PI / 2) + 1) / 2; object.set({ fill: shine && pulse > .52 ? glowColor : baseFill, shadow: new fabric.Shadow({ color: shine ? 'rgba(255,255,255,.72)' : String(glowColor), blur: Math.round(4 + pulse * (shine ? 18 : 16)), offsetX: 0, offsetY: 0 }) }); render(); if (config.loop || time - start < duration) { requestAnimationFrame(step); } else { object.set({ fill: baseFill, shadow: original.shadow }); render(); } }; requestAnimationFrame(step); } function runTextAnimations(canvas) { getTextAnimationObjects(canvas).forEach(function (object) { var config = aaNormalizeTextAnimationConfig(object.aaTextAnimation); window.setTimeout(function () { if (config.type === 'word-reveal') runTextRevealAnimation(canvas, object, config, true); else if (config.type === 'typewriter' || config.type === 'letter-fade-up') runTextRevealAnimation(canvas, object, config, false); else if (config.type === 'letter-wave') runTextMotionAnimation(canvas, object, config); else if (config.type === 'text-glow') runTextGlowAnimation(canvas, object, config, false); else if (config.type === 'shine-text') runTextGlowAnimation(canvas, object, config, true); }, config.delay); }); } function objectSnapshot(object) { if (object.__aaAnimationOriginal) { return { left: object.__aaAnimationOriginal.left, top: object.__aaAnimationOriginal.top, opacity: object.__aaAnimationOriginal.opacity == null ? 1 : object.__aaAnimationOriginal.opacity, scaleX: object.__aaAnimationOriginal.scaleX || 1, scaleY: object.__aaAnimationOriginal.scaleY || 1, angle: object.__aaAnimationOriginal.angle || 0, shadow: object.__aaAnimationOriginal.shadow || null, clipPath: object.__aaAnimationOriginal.clipPath || null }; } return { left: object.left, top: object.top, opacity: object.opacity == null ? 1 : object.opacity, scaleX: object.scaleX || 1, scaleY: object.scaleY || 1, angle: object.angle || 0, shadow: object.shadow || null, clipPath: object.clipPath || null }; } function aaGetAnimationDuration(object, fallback) { var value = object && (object.aaAnimationDuration != null ? object.aaAnimationDuration : object.animationDuration); value = Number(value); var duration = isFinite(value) && value > 0 ? value : fallback; if (window.AdaAcaraLiteMode === true || document.documentElement.classList.contains('aa-lite-mode')) { return Math.max(140, Math.min(420, Math.round(duration * .55))); } return duration; } function runObjectAnimations(canvas) { var animatedObjects = getAnimationObjects(canvas); animatedObjects.forEach(function (object, index) { var animationName = getObjectAnimationName(object); var manualDelay = object.animationDelay != null ? object.animationDelay : object.aaAnimationDelay; var delay = Number(manualDelay); if (object.animationOrderMode !== 'manual' || !isFinite(delay)) { object.aaAnimationOrder = index; object.aaAnimationDelay = index * 120; delay = object.aaAnimationDelay; } window.setTimeout(function () { runSingleAnimation(canvas, object, animationName); }, Math.max(0, delay)); }); } function runSingleAnimation(canvas, object, animationName) { var original = objectSnapshot(object); var durationFor = function (fallback) { return aaGetAnimationDuration(object, fallback); }; var render = function () { canvas.requestRenderAll(); }; var finish = function () { object.set(original); canvas.requestRenderAll(); }; if (animationName === 'fade-in') { object.set({ opacity: 0 }); object.animate('opacity', original.opacity, { duration: durationFor(650), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: finish }); return; } if (animationName === 'rise') { object.set({ top: original.top + 70, opacity: 0 }); object.animate('top', original.top, { duration: durationFor(720), easing: fabric.util.ease.easeOutCubic, onChange: render }); object.animate('opacity', original.opacity, { duration: durationFor(650), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: finish }); return; } if (['fade-up', 'fade-down', 'fade-left', 'fade-right'].indexOf(animationName) !== -1) { var fadeOffset = 86; var fadeFrom = { opacity: 0, top: original.top, left: original.left }; if (animationName === 'fade-up') fadeFrom.top = original.top + fadeOffset; if (animationName === 'fade-down') fadeFrom.top = original.top - fadeOffset; if (animationName === 'fade-left') fadeFrom.left = original.left + fadeOffset; if (animationName === 'fade-right') fadeFrom.left = original.left - fadeOffset; object.set(fadeFrom); object.animate('left', original.left, { duration: durationFor(720), easing: fabric.util.ease.easeOutCubic, onChange: render }); object.animate('top', original.top, { duration: durationFor(720), easing: fabric.util.ease.easeOutCubic, onChange: render }); object.animate('opacity', original.opacity, { duration: durationFor(650), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: finish }); return; } if (['slide-up', 'slide-down', 'slide-left', 'slide-right'].indexOf(animationName) !== -1) { var slideOffset = 130; var slideFrom = { top: original.top, left: original.left, opacity: original.opacity }; if (animationName === 'slide-up') slideFrom.top = original.top + slideOffset; if (animationName === 'slide-down') slideFrom.top = original.top - slideOffset; if (animationName === 'slide-left') slideFrom.left = original.left + slideOffset; if (animationName === 'slide-right') slideFrom.left = original.left - slideOffset; object.set(slideFrom); object.animate('left', original.left, { duration: durationFor(760), easing: fabric.util.ease.easeOutBack, onChange: render }); object.animate('top', original.top, { duration: durationFor(760), easing: fabric.util.ease.easeOutBack, onChange: render, onComplete: finish }); return; } if (animationName === 'zoom-in') { object.set({ scaleX: original.scaleX * .72, scaleY: original.scaleY * .72, opacity: 0 }); object.animate('scaleX', original.scaleX, { duration: durationFor(680), easing: fabric.util.ease.easeOutBack, onChange: render }); object.animate('scaleY', original.scaleY, { duration: durationFor(680), easing: fabric.util.ease.easeOutBack, onChange: render }); object.animate('opacity', original.opacity, { duration: durationFor(520), onChange: render, onComplete: finish }); return; } if (animationName === 'zoom-out') { object.set({ scaleX: original.scaleX * 1.36, scaleY: original.scaleY * 1.36, opacity: 0 }); object.animate('scaleX', original.scaleX, { duration: durationFor(700), easing: fabric.util.ease.easeOutCubic, onChange: render }); object.animate('scaleY', original.scaleY, { duration: durationFor(700), easing: fabric.util.ease.easeOutCubic, onChange: render }); object.animate('opacity', original.opacity, { duration: durationFor(540), onChange: render, onComplete: finish }); return; } if (animationName === 'flip-in') { object.set({ scaleX: Math.max(.01, original.scaleX * .08), opacity: 0 }); object.animate('scaleX', original.scaleX, { duration: durationFor(720), easing: fabric.util.ease.easeOutBack, onChange: render }); object.animate('opacity', original.opacity, { duration: durationFor(520), onChange: render, onComplete: finish }); return; } if (animationName === 'bounce') { object.set({ top: original.top - 50, opacity: original.opacity }); object.animate('top', original.top, { duration: durationFor(780), easing: fabric.util.ease.easeOutBounce, onChange: render, onComplete: finish }); return; } if (animationName === 'float-loop') { object.set({ opacity: original.opacity, top: original.top }); var floatLoop = function () { object.animate('top', original.top - 34, { duration: durationFor(1300), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('top', original.top + 18, { duration: durationFor(1300), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: floatLoop }); } }); }; floatLoop(); return; } if (animationName === 'sway-loop') { object.set({ opacity: original.opacity, angle: original.angle }); var swayLoop = function () { object.animate('angle', original.angle + 8, { duration: durationFor(950), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('angle', original.angle - 8, { duration: durationFor(950), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: swayLoop }); } }); }; swayLoop(); return; } if (animationName === 'pulse-loop' || animationName === 'heartbeat-loop') { object.set({ opacity: original.opacity, scaleX: original.scaleX, scaleY: original.scaleY }); var pulseAmount = animationName === 'heartbeat-loop' ? 1.18 : 1.1; var pulseDuration = durationFor(animationName === 'heartbeat-loop' ? 360 : 780); var pulseLoop = function () { object.animate('scaleX', original.scaleX * pulseAmount, { duration: pulseDuration, easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('scaleX', original.scaleX, { duration: pulseDuration, easing: fabric.util.ease.easeInOutSine, onChange: render }); } }); object.animate('scaleY', original.scaleY * pulseAmount, { duration: pulseDuration, easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('scaleY', original.scaleY, { duration: pulseDuration, easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: pulseLoop }); } }); }; pulseLoop(); return; } if (animationName === 'drift-loop') { object.set({ opacity: original.opacity, left: original.left }); var driftLoop = function () { object.animate('left', original.left + 28, { duration: durationFor(1200), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('left', original.left - 18, { duration: durationFor(1200), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: driftLoop }); } }); }; driftLoop(); return; } if (animationName === 'spin-loop') { object.set({ opacity: original.opacity, angle: original.angle }); var spinLoop = function () { object.animate('angle', original.angle + 360, { duration: durationFor(4200), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.set({ angle: original.angle }); spinLoop(); } }); }; spinLoop(); return; } if (animationName === 'pulse') { object.set({ opacity: original.opacity, scaleX: original.scaleX, scaleY: original.scaleY }); object.animate('scaleX', original.scaleX * 1.14, { duration: durationFor(270), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: function () { object.animate('scaleX', original.scaleX, { duration: durationFor(300), easing: fabric.util.ease.easeOutCubic, onChange: render }); } }); object.animate('scaleY', original.scaleY * 1.14, { duration: durationFor(270), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: function () { object.animate('scaleY', original.scaleY, { duration: durationFor(300), easing: fabric.util.ease.easeOutCubic, onChange: render, onComplete: finish }); } }); return; } if (animationName === 'swing') { object.set({ angle: original.angle - 10, opacity: original.opacity }); object.animate('angle', original.angle + 10, { duration: durationFor(290), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: function () { object.animate('angle', original.angle, { duration: durationFor(310), easing: fabric.util.ease.easeInOutSine, onChange: render, onComplete: finish }); } }); return; } if (animationName === 'spin') { object.set({ opacity: original.opacity, angle: original.angle }); object.animate('angle', original.angle + 360, { duration: durationFor(900), easing: fabric.util.ease.easeInOutCubic, onChange: render, onComplete: finish }); return; } object.set({ opacity: original.opacity }); canvas.requestRenderAll(); } loadFabric(renderFabric); })();