+ + + + + + + + + + + + + + + + + + -
  - - - - - - - - - + + \ No newline at end of file diff --git a/examples/js/demo.js b/examples/js/demo.js new file mode 100644 index 0000000..615436a --- /dev/null +++ b/examples/js/demo.js @@ -0,0 +1,100 @@ +'use strict'; +// DEMO PAGE JS +// ── Dark mode toggle ── +const STORAGE_KEY = 'sw-demo-theme'; // 'dark' | 'light' | 'auto' +const osPrefersDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches; +var displayMode; + +/** + * Apply a theme ('dark' | 'light') to the document and optionally + * sync the SmartWizard instance. + */ +function applyTheme(isDark) { + document.body.dataset.uiTheme = isDark ? 'dark' : 'light'; + if (typeof wizardElement !== 'undefined') { + wizardElement.smartWizard('setOptions', { displayMode: isDark ? 'dark' : 'light' }); + } +} + +// ── Demo navigation +const demoNavs = document.getElementById('demo-nav'); +const demoList = { + 'Main': 'index.html', + 'Ajax': 'ajax.html', + 'Validation': 'validation.html', + 'RTL': 'rtl.html', + 'Multiple': 'multiple.html', +}; +if (demoNavs) { + let activePage = window.location.pathname.split('/').pop(); + Object.entries(demoList).forEach(([key, value]) => { + const btn = document.createElement('a'); + btn.textContent = key; + btn.href = value; + btn.classList.add('header-btn'); + if (typeof activePage !== 'undefined' && value === activePage) { + btn.href = '#'; + btn.classList.add('active') + }; + demoNavs.appendChild(btn); + }); +} + +/** + * Update the toggle button label to reflect the current stored preference. + * Labels: auto → detected, dark → forced dark, light → forced light. + */ +function updateToggleLabel(darkToggle, pref) { + if (!darkToggle) return; + const labels = { auto: '⚡ Auto', dark: '🌙 Dark', light: '☀️ Light' }; + darkToggle.textContent = labels[pref] || labels.auto; + darkToggle.classList.toggle('active', pref === 'dark'); +} + +// ── Initialise on load ── +function initTheme() { + const saved = localStorage.getItem(STORAGE_KEY) || 'auto'; // default: auto + const isDark = saved === 'dark' || (saved === 'auto' && osPrefersDark()); + displayMode = isDark ? 'dark' : 'light'; + applyTheme(isDark); + updateToggleLabel(document.getElementById('toggle-dark'), saved); +}; + +// ── OS theme-change listener (only active when preference is 'auto') ── +const mq = window.matchMedia('(prefers-color-scheme: dark)'); +mq.addEventListener('change', (e) => { + if ((localStorage.getItem(STORAGE_KEY) || 'auto') === 'auto') { + applyTheme(e.matches); + } +}); + +// ── Button click: cycle auto → dark → light → auto ── +const darkToggle = document.getElementById('toggle-dark'); +if (darkToggle) { + darkToggle.addEventListener('click', () => { + const current = localStorage.getItem(STORAGE_KEY) || 'auto'; + const cycle = { auto: 'dark', dark: 'light', light: 'auto' }; + const next = cycle[current] || 'auto'; + + if (next === 'auto') { + localStorage.removeItem(STORAGE_KEY); // let OS decide; removeItem keeps fallback clean + } else { + localStorage.setItem(STORAGE_KEY, next); + } + + const isDark = next === 'dark' || (next === 'auto' && osPrefersDark()); + applyTheme(isDark); + updateToggleLabel(darkToggle, next); + }); +} + +// ── More Settings panel toggle ── +const toggleBtn = document.getElementById('moreSettingsToggle'); +const panel = document.getElementById('advancedSettings'); +if (toggleBtn && panel) { + toggleBtn.addEventListener('click', () => { + const isOpen = panel.classList.toggle('active'); + toggleBtn.classList.toggle('active', isOpen); + toggleBtn.textContent = isOpen ? '⚙️ Less Settings' : '⚙️ More Settings'; + }); +} diff --git a/examples/js/wizard-settings.js b/examples/js/wizard-settings.js new file mode 100644 index 0000000..f052667 --- /dev/null +++ b/examples/js/wizard-settings.js @@ -0,0 +1,182 @@ +function initWizardControls(wizardElement) { + + // External Button Events + $("#btn-reset").on("click", function () { + // Reset wizard + wizardElement.smartWizard("reset"); + return true; + }); + + $("#btn-prev").on("click", function () { + // Navigate previous + wizardElement.smartWizard("prev"); + return true; + }); + + $("#btn-next").on("click", function () { + // Navigate next + wizardElement.smartWizard("next"); + return true; + }); + + // ── Theme switcher ── + const themeList = { + '': 'Default', + 'arrows': 'Arrows', + 'glow': 'Glow', + 'basic': 'Basic', + 'pills': 'Pills', + }; + const themeListControls = document.getElementById('theme-select'); + if (themeListControls) { + Object.entries(themeList).forEach(([key, value]) => { + const option = document.createElement('option'); + option.textContent = value; + option.value = key; + if (typeof activeTheme !== 'undefined' && key === activeTheme) option.selected = true; + themeListControls.appendChild(option); + }); + + themeListControls.addEventListener('change', () => { + wizardElement.smartWizard('setOptions', { theme: themeListControls.value }); + }); + } + + // ── CSS Animation definitions (Animate.css) ── + const cssAnimationList = { + cssSlideH: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__slideInLeft', hide: 'animate__slideOutRight' }, backward: { show: 'animate__slideInRight', hide: 'animate__slideOutLeft' } }, + cssSlideV: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__slideInDown', hide: 'animate__slideOutDown' }, backward: { show: 'animate__slideInUp', hide: 'animate__slideOutUp' } }, + cssFade: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__fadeIn', hide: 'animate__fadeOut' }, backward: { show: 'animate__fadeIn', hide: 'animate__fadeOut' } }, + cssFadeSlideH: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__fadeInLeft', hide: 'animate__fadeOutRight' }, backward: { show: 'animate__fadeInRight', hide: 'animate__fadeOutLeft' } }, + cssFadeSlideV: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__fadeInDown', hide: 'animate__fadeOutDown' }, backward: { show: 'animate__fadeInUp', hide: 'animate__fadeOutUp' } }, + cssFadeSlideCorner1: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__fadeInTopLeft', hide: 'animate__fadeOutBottomRight' }, backward: { show: 'animate__fadeInBottomRight', hide: 'animate__fadeOutTopLeft' } }, + cssFadeSlideCorner2: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__fadeInBottomLeft', hide: 'animate__fadeOutTopRight' }, backward: { show: 'animate__fadeInTopRight', hide: 'animate__fadeOutBottomLeft' } }, + cssBounce: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__bounceIn', hide: 'animate__bounceOut' }, backward: { show: 'animate__bounceIn', hide: 'animate__bounceOut' } }, + cssBounceSlideH: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__bounceInLeft', hide: 'animate__bounceOutRight' }, backward: { show: 'animate__bounceInRight', hide: 'animate__bounceOutLeft' } }, + cssBounceSlideV: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__bounceInDown', hide: 'animate__bounceOutDown' }, backward: { show: 'animate__bounceInUp', hide: 'animate__bounceOutUp' } }, + cssBackSlideH: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__backInLeft', hide: 'animate__backOutRight' }, backward: { show: 'animate__backInRight', hide: 'animate__backOutLeft' } }, + cssBackSlideV: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__backInDown', hide: 'animate__backOutDown' }, backward: { show: 'animate__backInUp', hide: 'animate__backOutUp' } }, + cssFlipH: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__flipInY', hide: 'animate__flipOutY' }, backward: { show: 'animate__flipInY', hide: 'animate__flipOutY' } }, + cssFlipV: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__flipInX', hide: 'animate__flipOutX' }, backward: { show: 'animate__flipInX', hide: 'animate__flipOutX' } }, + cssLightspeed: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__lightSpeedInLeft', hide: 'animate__lightSpeedOutRight' }, backward: { show: 'animate__lightSpeedInRight', hide: 'animate__lightSpeedOutLeft' } }, + cssRotate: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__rotateIn', hide: 'animate__rotateOut' }, backward: { show: 'animate__rotateIn', hide: 'animate__rotateOut' } }, + cssRotateClock: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__rotateInDownLeft', hide: 'animate__rotateOutDownLeft' }, backward: { show: 'animate__rotateInUpLeft', hide: 'animate__rotateOutUpLeft' } }, + cssRotateAntiClock: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__rotateInDownRight', hide: 'animate__rotateOutDownRight' }, backward: { show: 'animate__rotateInUpRight', hide: 'animate__rotateOutUpRight' } }, + cssZoom: { prefix: 'animate__animated animate__faster', forward: { show: 'animate__zoomIn', hide: 'animate__zoomOut' }, backward: { show: 'animate__zoomIn', hide: 'animate__zoomOut' } }, + }; + + // ── Transition selector ── + const transitionList = { + 'Built-in': { + 'none': 'None', + 'fade': 'Fade', + 'slideHorizontal': 'Slide Horizontal', + 'slideVertical': 'Slide Vertical', + 'slideSwing': 'Slide Swing', + }, + 'CSS': { + 'cssSlideH': 'Slide Horizontal', + 'cssSlideV': 'Slide Vertical', + 'cssFade': 'Fade', + 'cssFadeSlideH': 'Fade + Slide H', + 'cssFadeSlideV': 'Fade + Slide V', + 'cssFadeSlideCorner1': 'Fade + Corner 1', + 'cssFadeSlideCorner2': 'Fade + Corner 2', + 'cssBounce': 'Bounce', + 'cssBounceSlideH': 'Bounce + Slide H', + 'cssBounceSlideV': 'Bounce + Slide V', + 'cssBackSlideH': 'Back + Slide H', + 'cssBackSlideV': 'Back + Slide V', + 'cssFlipH': 'Flip H', + 'cssFlipV': 'Flip V', + 'cssLightspeed': 'Lightspeed', + 'cssRotate': 'Rotate', + 'cssRotateClock': 'Rotate CW', + 'cssRotateAntiClock': 'Rotate CCW', + 'cssZoom': 'Zoom', + }, + }; + + const transitionControls = document.getElementById('transition-select'); + if (transitionControls) { + Object.entries(transitionList).forEach(([groupKey, groupValue]) => { + const optgroup = document.createElement('optgroup'); + optgroup.label = groupKey; + + Object.entries(groupValue).forEach(([key, value]) => { + const option = document.createElement('option'); + option.value = key; + option.textContent = value; + if (typeof activeTransition !== 'undefined' && key === activeTransition) option.selected = true; + optgroup.appendChild(option); + }); + + transitionControls.appendChild(optgroup); + }); + + transitionControls.addEventListener('change', () => { + const cssAnim = cssAnimationList[transitionControls.value]; + const options = cssAnim + ? { transition: { effect: 'css', css: { ...cssAnim } } } + : { transition: { effect: transitionControls.value } }; + wizardElement.smartWizard('setOptions', options); + }); + } + + // ── Color switcher ── + const colorList = { + '': 'Default', + 'ocean': 'Ocean', + 'teal': 'Teal', + 'forest': 'Forest', + 'violet': 'Violet', + 'crimson': 'Crimson', + 'amber': 'Amber', + 'indigo': 'Indigo', + 'slate': 'Slate ♿', + }; + + const colorListControls = document.getElementById('color-list'); + if (colorListControls) { + Object.entries(colorList).forEach(([key, value]) => { + const btn = document.createElement('button'); + btn.textContent = value; + btn.dataset.color = key; + btn.classList.add('btn'); + if (typeof activeColor !== 'undefined' && key === activeColor) btn.classList.add('active'); + + btn.addEventListener('click', () => { + colorListControls.querySelectorAll('[data-color]').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + if (key) { + wizardElement.attr('data-color', key); + } else { + wizardElement.removeAttr('data-color'); + } + }); + colorListControls.appendChild(btn); + }); + } + + // ── Toolbar swicher + const toolbarSelect = document.getElementById('toolbar-select'); + if (toolbarSelect) { + toolbarSelect.addEventListener('change', () => { + if (toolbarSelect.value) { + wizardElement.smartWizard('setOptions', { toolbar: { position: toolbarSelect.value } }); + } + }); + } + + // ── Step infor + const swCur = document.getElementById('sw-cur'); + const swTotal = document.getElementById('sw-total'); + if (swCur && swTotal) { + // Step show event + wizardElement.on("shown.sw", function (e, args) { + swCur.textContent = args.stepIndex + 1; + swTotal.textContent = wizardElement.smartWizard('getStepInfo').totalSteps; + }); + } + +} \ No newline at end of file diff --git a/examples/multiple.html b/examples/multiple.html index 1ad0189..1ef9b16 100644 --- a/examples/multiple.html +++ b/examples/multiple.html @@ -1,376 +1,266 @@ - + - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - - -
-

- Theme: - - Default - Arrows - Dots - Progress - - -      - - Justified - -      - Animation: - - None - Fade - Slide Horizontal - Slide Vertical - Slide Swing - - -      - Go To: - - 1 - 2 - 3 - 4 - - -      - External Buttons: - Go Previous - Go Next - Reset Wizard -

-
+ + +

+

jQuery SmartWizard 7 — Multiple Wizards Demo

+

+

+ ⚡Auto +

+

- - - -