test(preview): add preview tests for documentation previews

2025-11-08 23:58:13 +08:00 · 2018-03-21 12:18:04 -04:00
parent d26074a17f
commit fc30ba18f3
57 changed files with 7134 additions and 0 deletions
--- a/core/src/components/slides/test/preview/index.html
+++ b/core/src/components/slides/test/preview/index.html
@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Slides</title>
+
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <style>
+    ion-slide {
+      height: 200px !important;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-content id="content">
+        <ion-slides style="background: black" id="slides" pager>
+          <ion-slide style="background: red; color: white;">
+            <h1>Slide 1</h1>
+          </ion-slide>
+          <ion-slide style="background: white; color: blue;">
+            <h1>Slide 2</h1>
+          </ion-slide>
+          <ion-slide style="background: blue; color: white;">
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+        <ion-button expand="block" onclick="slidePrev()">Slide Prev</ion-button>
+        <ion-button expand="block" onclick="slideNext()">Slide Next</ion-button>
+        <ion-button expand="block" onclick="getActiveIndex()">Get Active Index</ion-button>
+        <ion-button expand="block" onclick="getPreviousIndex()">Get Previous Index</ion-button>
+
+        <ion-button expand="block" onclick="isEnd()">Is the End?</ion-button>
+        <ion-button expand="block" onclick="isBeginning()">Is the beginning?</ion-button>
+
+        <ion-button expand="block" onclick="slideTo()">Slide to slide index 2</ion-button>
+        <ion-button expand="block" onclick="slideLength()">Get slide length</ion-button>
+        <ion-button expand="block" onclick="slideAutoPlay()">Start auto play</ion-button>
+        <ion-button expand="block" onclick="slideStopAutoPlay()">Stop auto play</ion-button>
+        <ion-button expand="block" onclick="setOptions()">Set options</ion-button>
+      </ion-content>
+
+  </ion-app>
+  <script>
+    const slides = document.getElementById('slides')
+    slides.pager = false;
+    slides.options = {}
+
+    function slideNext() {
+      slides.slideNext(500)
+    };
+
+    function slidePrev() {
+      slides.slidePrev(500);
+    };
+
+    function slideTo() {
+      slides.slideTo(2);
+    }
+
+    function slideAutoPlay() {
+      slides.options = Object.assign({}, slides.options, {autoplay: 300});
+      slides.startAutoplay();
+    }
+
+    function slideStopAutoPlay() {
+      slides.stopAutoplay();
+    }
+
+    function setOptions() {
+      slides.options = Object.assign({}, slides.options, {
+        slidesPerView: 2,
+      });
+    }
+
+    function slideLength() {
+      console.log(slides.length());
+    }
+
+    function getActiveIndex() {
+      console.log(slides.getActiveIndex());
+    };
+
+    function getPreviousIndex() {
+      console.log(slides.getPreviousIndex());
+    };
+
+    function isEnd() {
+      console.log(slides.isEnd());
+    }
+
+    function isBeginning() {
+      console.log(slides.isBeginning());
+    }
+    slides.addEventListener('ionSlideDidChange', function(e) {
+      console.log('slide did change', e)
+    });
+    slides.addEventListener('ionSlideWillChange', function(e) {
+      console.log('slide will change', e)
+    });
+    slides.addEventListener('ionSlideNextStart', function(e) {
+      console.log('slide next start', e)
+    });
+    slides.addEventListener('ionSlidePrevStart', function(e) {
+      console.log('slide prev start', e)
+    });
+    slides.addEventListener('ionSlideNextEnd', function(e) {
+      console.log('slide next end', e)
+    });
+    slides.addEventListener('ionSlidePrevEnd', function(e) {
+      console.log('slide prev end', e)
+    });
+    slides.addEventListener('ionSlideTransitionStart', function(e) {
+      console.log('slide transition start', e)
+    });
+    slides.addEventListener('ionSlideTransitionEnd', function(e) {
+      console.log('slide transistion end', e)
+    });
+    slides.addEventListener('ionSlideDrag', function(e) {
+      console.log('slide drag', e)
+    });
+    slides.addEventListener('ionSlideReachStart', function(e) {
+      console.log('slide reach start', e)
+    });
+    slides.addEventListener('ionSlideReachEnd', function(e) {
+      console.log('slide reach end', e)
+    });
+    slides.addEventListener('ionSlideTouchStart', function(e) {
+      console.log('slide touch start', e)
+    });
+    slides.addEventListener('ionSlideTouchEnd', function(e) {
+      console.log('slide touch end', e)
+    });
+  </script>
+</body>
+
+</html>