Replace Bootstrap 2 test with Bootstrap 5 test

hakimel · Jan 1, 2021 · d11b317 · d11b317
1 parent b096ff6
commit d11b317
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 192 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -17,12 +17,4 @@ export default [
         },
         plugins: [resolve()]
     },
-    {
-        input: 'site/bootstrap.js',
-        output: {
-            file: 'site/dist/bootstrap-bundle.js',
-            format: 'iife'
-        },
-        plugins: [resolve()]
-    },
 ];
diff --git a/site/bootstrap.html b/site/bootstrap.html
@@ -3,114 +3,109 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Ladda: Bootstrap compatibility test</title>
-		<meta name="author" content="Hakim El Hattab">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
+		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+			integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 		<link rel="stylesheet" href="demo.css">
 		<link rel="stylesheet" href="dist/ladda-themeless.min.css">
 	</head>
 	<body>
 		<article class="examples">
 			<div class="intro">
-				<h1>Ladda Bootstrap test</h1>
+				<h1>Ladda Bootstrap 5 test</h1>
 			</div>
 
-            <section>
+            <section class="button-demo">
 				<h3>expand-left</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-left">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>expand-right</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-right">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>expand-up</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-up"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-up">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>expand-down</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-down"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-down">Submit</button>
 			</section>
 
 
-			<section>
+			<section class="button-demo">
 				<h3>zoom-in</h3>
-				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-in"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-info ladda-button" data-style="zoom-in" data-spinner-color="#000">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>zoom-out</h3>
-				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-out"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-info ladda-button" data-style="zoom-out" data-spinner-color="#000">Submit</button>
 			</section>
 
 
-			<section>
+			<section class="button-demo">
 				<h3>slide-left</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-left"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-left" data-spinner-color="#000">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>slide-right</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-right" data-spinner-color="#000">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>slide-up</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-up"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-up" data-spinner-color="#000">Submit</button>
 			</section>
 
-			<section>
+			<section class="button-demo">
 				<h3>slide-down</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-down"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-down" data-spinner-color="#000">Submit</button>
 			</section>
 
 			<h3 id="progress">Built-in progress bar</h3>
 
 			<section class="progress-demo">
 				<h3>expand-right</h3>
-				<button class="btn btn-danger ladda-button" data-color="purple" data-style="expand-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-success ladda-button" data-style="expand-right">Submit</button>
 			</section>
 
 			<section class="progress-demo">
 				<h3>contract</h3>
-				<button class="btn btn-danger ladda-button" data-color="purple" data-style="contract"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-success ladda-button" data-style="contract">Submit</button>
 			</section>
 
 			<h3 id="sizes">Sizes</h3>
 
-			<section class="progress-demo">
-				<h3>Extra Small</h3>
-				<button class="btn btn-danger btn-mini ladda-button" data-color="mint" data-style="expand-right" data-size="xs"><span class="ladda-label">Submit</span></button>
-			</section>
-
 			<section class="progress-demo">
 				<h3>Small</h3>
-				<button class="btn btn-danger btn-small ladda-button" data-color="mint" data-style="expand-right" data-size="s"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-danger btn-sm ladda-button" data-style="expand-right">Submit</button>
 			</section>
 
 			<section class="progress-demo">
 				<h3>Large</h3>
-				<button class="btn btn-danger btn-large ladda-button" data-color="mint" data-style="expand-right" data-size="l"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-danger btn-lg ladda-button" data-style="expand-right">Submit</button>
 			</section>
 
 			<h3>Buttons in forms containing required inputs</h3>
 
 			<section>
-				<form>
-					<div class="form-group">
-						<input type="text" required name="aText" placeholder="Please fill me" />
+				<form action="https://example.com">
+					<div class="mb-3">
+						<input class="form-control" type="text" name="aText" placeholder="Please fill me" required/>
 					</div>
-					<div class="form-group">
-						<button id="aFormSubmitButton" type="submit" class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
+					<div class="mb-3">
+						<button id="aFormSubmitButton" type="submit" class="btn btn-primary ladda-button" data-style="expand-left">Submit</button>
 					</div>
 				</form>
 			</section>
 		</article>
 
-		<script src="dist/bootstrap-bundle.js"></script>
+		<script src="dist/index-bundle.js"></script>
 	</body>
 </html>
diff --git a/site/bootstrap.js b/site/bootstrap.js
diff --git a/site/bootstrap3.html b/site/bootstrap3.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Ladda: Bootstrap compatibility test</title>
-		<meta name="author" content="Hakim El Hattab">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 		<link rel="stylesheet" href="demo.css">
 		<link rel="stylesheet" href="dist/ladda-themeless.min.css">
 	</head>
@@ -15,102 +15,98 @@
 			<div class="intro">
 				<h1>Ladda Bootstrap 3 test</h1>
 			</div>
-
-            <section>
+		
+			<section class="button-demo">
 				<h3>expand-left</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-left">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>expand-right</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-right">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>expand-up</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-up"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-up">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>expand-down</h3>
-				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-down"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-primary ladda-button" data-style="expand-down">Submit</button>
 			</section>
-
-
-			<section>
+			
+			
+			<section class="button-demo">
 				<h3>zoom-in</h3>
-				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-in"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-info ladda-button" data-style="zoom-in">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>zoom-out</h3>
-				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-out"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-info ladda-button" data-style="zoom-out">Submit</button>
 			</section>
-
-
-			<section>
+			
+			
+			<section class="button-demo">
 				<h3>slide-left</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-left"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-left">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>slide-right</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-right">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>slide-up</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-up"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-up">Submit</button>
 			</section>
-
-			<section>
+			
+			<section class="button-demo">
 				<h3>slide-down</h3>
-				<button class="btn btn-warning ladda-button" data-color="blue" data-style="slide-down"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-warning ladda-button" data-style="slide-down">Submit</button>
 			</section>
-
+		
 			<h3 id="progress">Built-in progress bar</h3>
-
+		
 			<section class="progress-demo">
 				<h3>expand-right</h3>
-				<button class="btn btn-danger ladda-button" data-color="purple" data-style="expand-right"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-success ladda-button" data-style="expand-right">Submit</button>
 			</section>
-
+		
 			<section class="progress-demo">
 				<h3>contract</h3>
-				<button class="btn btn-danger ladda-button" data-color="purple" data-style="contract"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-success ladda-button" data-style="contract">Submit</button>
 			</section>
-
+		
 			<h3 id="sizes">Sizes</h3>
-
-			<section class="progress-demo">
-				<h3>Extra Small</h3>
-				<button class="btn btn-danger btn-mini ladda-button" data-color="mint" data-style="expand-right" data-size="xs"><span class="ladda-label">Submit</span></button>
-			</section>
-
+
 			<section class="progress-demo">
 				<h3>Small</h3>
-				<button class="btn btn-danger btn-small ladda-button" data-color="mint" data-style="expand-right" data-size="s"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-danger btn-sm ladda-button" data-style="expand-right">Submit</button>
 			</section>
-
+		
 			<section class="progress-demo">
 				<h3>Large</h3>
-				<button class="btn btn-danger btn-large ladda-button" data-color="mint" data-style="expand-right" data-size="l"><span class="ladda-label">Submit</span></button>
+				<button class="btn btn-danger btn-lg ladda-button" data-style="expand-right">Submit</button>
 			</section>
-
+		
 			<h3>Buttons in forms containing required inputs</h3>
-
+		
 			<section>
-				<form>
+				<form action="https://example.com">
 					<div class="form-group">
-						<input type="text" required name="aText" placeholder="Please fill me" />
+						<input class="form-control" type="text" name="aText" placeholder="Please fill me" required />
 					</div>
 					<div class="form-group">
-						<button id="aFormSubmitButton" type="submit" class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
+						<button id="aFormSubmitButton" type="submit" class="btn btn-primary ladda-button"
+							data-style="expand-left">Submit</button>
 					</div>
 				</form>
 			</section>
 		</article>
 
-		<script src="dist/bootstrap-bundle.js"></script>
+		<script src="dist/index-bundle.js"></script>
 	</body>
 </html>