Finished tutorial
This commit is contained in:
Philipp Klüter
@@ -1,5 +1,7 @@
|
||||
# hello-world
|
||||
|
||||
Based on youtube tutorial: https://www.youtube.com/watch?v=wBTnD_ob12M&t=847s
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
|
||||
BIN
public/img/about/1.jpg
Normal file
BIN
public/img/about/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
public/img/about/2.jpg
Normal file
BIN
public/img/about/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/img/about/3.jpg
Normal file
BIN
public/img/about/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
public/img/about/4.jpg
Normal file
BIN
public/img/about/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
1
public/img/close-icon.svg
Normal file
1
public/img/close-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 579.74 579.74"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="2.12" y1="2.12" x2="577.62" y2="577.62"/><line class="cls-1" x1="2.12" y1="577.62" x2="577.62" y2="2.12"/></svg>
|
||||
|
After Width: | Height: | Size: 333 B |
BIN
public/img/favicon.ico
Normal file
BIN
public/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/img/header-bg.jpg
Normal file
BIN
public/img/header-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
BIN
public/img/logos/creative-market.jpg
Normal file
BIN
public/img/logos/creative-market.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/logos/designmodo.jpg
Normal file
BIN
public/img/logos/designmodo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/logos/envato.jpg
Normal file
BIN
public/img/logos/envato.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/img/logos/themeforest.jpg
Normal file
BIN
public/img/logos/themeforest.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/img/map-image.png
Normal file
BIN
public/img/map-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
1
public/img/navbar-logo.svg
Normal file
1
public/img/navbar-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
public/img/portfolio/01-full.jpg
Normal file
BIN
public/img/portfolio/01-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/portfolio/01-thumbnail.jpg
Normal file
BIN
public/img/portfolio/01-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/img/portfolio/02-full.jpg
Normal file
BIN
public/img/portfolio/02-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/img/portfolio/02-thumbnail.jpg
Normal file
BIN
public/img/portfolio/02-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/img/portfolio/03-full.jpg
Normal file
BIN
public/img/portfolio/03-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/portfolio/03-thumbnail.jpg
Normal file
BIN
public/img/portfolio/03-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/img/portfolio/04-full.jpg
Normal file
BIN
public/img/portfolio/04-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
public/img/portfolio/04-thumbnail.jpg
Normal file
BIN
public/img/portfolio/04-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/img/portfolio/05-full.jpg
Normal file
BIN
public/img/portfolio/05-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
public/img/portfolio/05-thumbnail.jpg
Normal file
BIN
public/img/portfolio/05-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/img/portfolio/06-full.jpg
Normal file
BIN
public/img/portfolio/06-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
public/img/portfolio/06-thumbnail.jpg
Normal file
BIN
public/img/portfolio/06-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/img/team/1.jpg
Normal file
BIN
public/img/team/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/team/2.jpg
Normal file
BIN
public/img/team/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
public/img/team/3.jpg
Normal file
BIN
public/img/team/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@@ -1,27 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>Agency - Start Bootstrap Theme</title>
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
|
||||
|
||||
<!-- Font Awesome icons (free version)-->
|
||||
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
|
||||
<!-- Google fonts-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- Core theme CSS (includes Bootstrap)-->
|
||||
<!-- <link href="css/styles.css" rel="stylesheet" /> -->
|
||||
|
||||
</head>
|
||||
<body id="page-top">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>Agency - Start Bootstrap Theme</title>
|
||||
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
|
||||
|
||||
<!-- Font Awesome icons (free version)-->
|
||||
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
|
||||
<!-- Google fonts-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet"
|
||||
type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- Bootstrap core JS-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
src/App.vue
150
src/App.vue
@@ -3,7 +3,7 @@
|
||||
<!-- Navigation-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="" /></a>
|
||||
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="/img/navbar-logo.svg" alt="" /></a>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
Menu
|
||||
<i class="fas fa-bars ml-1"></i>
|
||||
@@ -63,100 +63,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- Portfolio Grid-->
|
||||
<section class="page-section bg-light" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2 class="section-heading text-uppercase">Portfolio</h2>
|
||||
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Threads</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Illustration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Explore</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Finish</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Identity</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Lines</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Branding</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Southwest</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Website Design</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt="" />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Window</div>
|
||||
<div class="portfolio-caption-subheading text-muted">Photography</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Portfolio></Portfolio>
|
||||
<!-- About-->
|
||||
<section class="page-section" id="about">
|
||||
<div class="container">
|
||||
@@ -166,7 +73,7 @@
|
||||
</div>
|
||||
<ul class="timeline">
|
||||
<li>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="/img/about/1.jpg" alt="" /></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4>2009-2011</h4>
|
||||
@@ -176,7 +83,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" alt="" /></div>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="/img/about/2.jpg" alt="" /></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4>March 2011</h4>
|
||||
@@ -186,7 +93,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" alt="" /></div>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="/img/about/3.jpg" alt="" /></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4>December 2012</h4>
|
||||
@@ -196,7 +103,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" alt="" /></div>
|
||||
<div class="timeline-image"><img class="rounded-circle img-fluid" src="/img/about/4.jpg" alt="" /></div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4>July 2014</h4>
|
||||
@@ -229,7 +136,7 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
|
||||
<img class="mx-auto rounded-circle" src="/img/team/1.jpg" alt="" />
|
||||
<h4>Kay Garland</h4>
|
||||
<p class="text-muted">Lead Designer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
@@ -239,7 +146,7 @@
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
|
||||
<img class="mx-auto rounded-circle" src="/img/team/2.jpg" alt="" />
|
||||
<h4>Larry Parker</h4>
|
||||
<p class="text-muted">Lead Marketer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
@@ -249,7 +156,7 @@
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="" />
|
||||
<img class="mx-auto rounded-circle" src="/img/team/3.jpg" alt="" />
|
||||
<h4>Diana Petersen</h4>
|
||||
<p class="text-muted">Lead Developer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
@@ -268,16 +175,16 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 my-3">
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="/img/logos/envato.jpg" alt="" /></a>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 my-3">
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="/img/logos/designmodo.jpg" alt="" /></a>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 my-3">
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="/img/logos/themeforest.jpg" alt="" /></a>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 my-3">
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
|
||||
<a href="#!"><img class="img-fluid d-block mx-auto" src="/img/logos/creative-market.jpg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -341,7 +248,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -349,7 +256,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/01-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/01-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -371,7 +278,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -379,7 +286,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/02-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/02-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -401,7 +308,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -409,7 +316,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/03-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/03-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -431,7 +338,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -439,7 +346,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/04-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/04-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -461,7 +368,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -469,7 +376,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/05-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/05-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -491,7 +398,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@@ -499,7 +406,7 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/06-full.jpg" alt="" />
|
||||
<img class="img-fluid d-block mx-auto" src="/img/portfolio/06-full.jpg" alt="" />
|
||||
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2020</li>
|
||||
@@ -522,8 +429,13 @@
|
||||
|
||||
<script>
|
||||
|
||||
import Portfolio from './components/Portfolio'
|
||||
|
||||
export default {
|
||||
name: 'App'
|
||||
name: 'App',
|
||||
components: {
|
||||
Portfolio
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
BIN
src/assets/img/about/1.jpg
Normal file
BIN
src/assets/img/about/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/img/about/2.jpg
Normal file
BIN
src/assets/img/about/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/img/about/3.jpg
Normal file
BIN
src/assets/img/about/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/img/about/4.jpg
Normal file
BIN
src/assets/img/about/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
1
src/assets/img/close-icon.svg
Normal file
1
src/assets/img/close-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 579.74 579.74"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="2.12" y1="2.12" x2="577.62" y2="577.62"/><line class="cls-1" x1="2.12" y1="577.62" x2="577.62" y2="2.12"/></svg>
|
||||
|
After Width: | Height: | Size: 333 B |
BIN
src/assets/img/favicon.ico
Normal file
BIN
src/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/img/logos/creative-market.jpg
Normal file
BIN
src/assets/img/logos/creative-market.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/img/logos/designmodo.jpg
Normal file
BIN
src/assets/img/logos/designmodo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/img/logos/envato.jpg
Normal file
BIN
src/assets/img/logos/envato.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/img/logos/themeforest.jpg
Normal file
BIN
src/assets/img/logos/themeforest.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
1
src/assets/img/navbar-logo.svg
Normal file
1
src/assets/img/navbar-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/img/portfolio/01-full.jpg
Normal file
BIN
src/assets/img/portfolio/01-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/img/portfolio/01-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/01-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/portfolio/02-full.jpg
Normal file
BIN
src/assets/img/portfolio/02-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/img/portfolio/02-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/02-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/portfolio/03-full.jpg
Normal file
BIN
src/assets/img/portfolio/03-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/img/portfolio/03-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/03-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/portfolio/04-full.jpg
Normal file
BIN
src/assets/img/portfolio/04-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/img/portfolio/04-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/04-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/portfolio/05-full.jpg
Normal file
BIN
src/assets/img/portfolio/05-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
src/assets/img/portfolio/05-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/05-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/img/portfolio/06-full.jpg
Normal file
BIN
src/assets/img/portfolio/06-full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/img/portfolio/06-thumbnail.jpg
Normal file
BIN
src/assets/img/portfolio/06-thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/img/team/1.jpg
Normal file
BIN
src/assets/img/team/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/img/team/2.jpg
Normal file
BIN
src/assets/img/team/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/assets/img/team/3.jpg
Normal file
BIN
src/assets/img/team/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
55
src/assets/js/scripts.js
Normal file
55
src/assets/js/scripts.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/*!
|
||||
* Start Bootstrap - Agency v6.0.2 (https://startbootstrap.com/template-overviews/agency)
|
||||
* Copyright 2013-2020 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
|
||||
*/
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
|
||||
if (
|
||||
location.pathname.replace(/^\//, "") ==
|
||||
this.pathname.replace(/^\//, "") &&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ?
|
||||
target :
|
||||
$("[name=" + this.hash.slice(1) + "]");
|
||||
if (target.length) {
|
||||
$("html, body").animate({
|
||||
scrollTop: target.offset().top - 72,
|
||||
},
|
||||
1000,
|
||||
"easeInOutExpo"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$(".js-scroll-trigger").click(function () {
|
||||
$(".navbar-collapse").collapse("hide");
|
||||
});
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$("body").scrollspy({
|
||||
target: "#mainNav",
|
||||
offset: 74,
|
||||
});
|
||||
|
||||
// Collapse Navbar
|
||||
var navbarCollapse = function () {
|
||||
if ($("#mainNav").offset().top > 100) {
|
||||
$("#mainNav").addClass("navbar-shrink");
|
||||
} else {
|
||||
$("#mainNav").removeClass("navbar-shrink");
|
||||
}
|
||||
};
|
||||
// Collapse now if page is not at top
|
||||
navbarCollapse();
|
||||
// Collapse the navbar when page is scrolled
|
||||
$(window).scroll(navbarCollapse);
|
||||
})(jQuery); // End of use strict
|
||||
88
src/assets/mail/contact_me.js
Normal file
88
src/assets/mail/contact_me.js
Normal file
@@ -0,0 +1,88 @@
|
||||
$(function () {
|
||||
$(
|
||||
"#contactForm input,#contactForm textarea,#contactForm button"
|
||||
).jqBootstrapValidation({
|
||||
preventSubmit: true,
|
||||
submitError: function ($form, event, errors) {
|
||||
// additional error messages or events
|
||||
},
|
||||
submitSuccess: function ($form, event) {
|
||||
event.preventDefault(); // prevent default submit behaviour
|
||||
// get values from FORM
|
||||
var name = $("input#name").val();
|
||||
var email = $("input#email").val();
|
||||
var phone = $("input#phone").val();
|
||||
var message = $("textarea#message").val();
|
||||
var firstName = name; // For Success/Failure Message
|
||||
// Check for white space in name for Success/Fail message
|
||||
if (firstName.indexOf(" ") >= 0) {
|
||||
firstName = name.split(" ").slice(0, -1).join(" ");
|
||||
}
|
||||
$this = $("#sendMessageButton");
|
||||
$this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
|
||||
$.ajax({
|
||||
url: "/assets/mail/contact_me.php",
|
||||
type: "POST",
|
||||
data: {
|
||||
name: name,
|
||||
phone: phone,
|
||||
email: email,
|
||||
message: message,
|
||||
},
|
||||
cache: false,
|
||||
success: function () {
|
||||
// Success message
|
||||
$("#success").html("<div class='alert alert-success'>");
|
||||
$("#success > .alert-success")
|
||||
.html(
|
||||
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
|
||||
)
|
||||
.append("</button>");
|
||||
$("#success > .alert-success").append(
|
||||
"<strong>Your message has been sent. </strong>"
|
||||
);
|
||||
$("#success > .alert-success").append("</div>");
|
||||
//clear all fields
|
||||
$("#contactForm").trigger("reset");
|
||||
},
|
||||
error: function () {
|
||||
// Fail message
|
||||
$("#success").html("<div class='alert alert-danger'>");
|
||||
$("#success > .alert-danger")
|
||||
.html(
|
||||
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
|
||||
)
|
||||
.append("</button>");
|
||||
$("#success > .alert-danger").append(
|
||||
$("<strong>").text(
|
||||
"Sorry " +
|
||||
firstName +
|
||||
", it seems that my mail server is not responding. Please try again later!"
|
||||
)
|
||||
);
|
||||
$("#success > .alert-danger").append("</div>");
|
||||
//clear all fields
|
||||
$("#contactForm").trigger("reset");
|
||||
},
|
||||
complete: function () {
|
||||
setTimeout(function () {
|
||||
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
},
|
||||
filter: function () {
|
||||
return $(this).is(":visible");
|
||||
},
|
||||
});
|
||||
|
||||
$('a[data-toggle="tab"]').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).tab("show");
|
||||
});
|
||||
});
|
||||
|
||||
/*When clicking on Full hide fail/success boxes */
|
||||
$("#name").focus(function () {
|
||||
$("#success").html("");
|
||||
});
|
||||
26
src/assets/mail/contact_me.php
Normal file
26
src/assets/mail/contact_me.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
// Check for empty fields
|
||||
if(empty($_POST['name']) ||
|
||||
empty($_POST['email']) ||
|
||||
empty($_POST['phone']) ||
|
||||
empty($_POST['message']) ||
|
||||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
|
||||
{
|
||||
echo "No arguments Provided!";
|
||||
return false;
|
||||
}
|
||||
|
||||
$name = strip_tags(htmlspecialchars($_POST['name']));
|
||||
$email_address = strip_tags(htmlspecialchars($_POST['email']));
|
||||
$phone = strip_tags(htmlspecialchars($_POST['phone']));
|
||||
$message = strip_tags(htmlspecialchars($_POST['message']));
|
||||
|
||||
// Create the email and send the message
|
||||
$to = 'yourname@yourdomain.com'; // Add your email address in between the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
|
||||
$email_subject = "Website Contact Form: $name";
|
||||
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
|
||||
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
|
||||
$headers .= "Reply-To: $email_address";
|
||||
mail($to,$email_subject,$email_body,$headers);
|
||||
return true;
|
||||
?>
|
||||
937
src/assets/mail/jqBootstrapValidation.js
Normal file
937
src/assets/mail/jqBootstrapValidation.js
Normal file
@@ -0,0 +1,937 @@
|
||||
/* jqBootstrapValidation
|
||||
* A plugin for automating validation on Twitter Bootstrap formatted forms.
|
||||
*
|
||||
* v1.3.6
|
||||
*
|
||||
* License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file
|
||||
*
|
||||
* http://ReactiveRaven.github.com/jqBootstrapValidation/
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var createdElements = [];
|
||||
|
||||
var defaults = {
|
||||
options: {
|
||||
prependExistingHelpBlock: false,
|
||||
sniffHtml: true, // sniff for 'required', 'maxlength', etc
|
||||
preventSubmit: true, // stop the form submit event from firing if validation fails
|
||||
submitError: false, // function called if there is an error when trying to submit
|
||||
submitSuccess: false, // function called just before a successful submit event is sent to the server
|
||||
semanticallyStrict: false, // set to true to tidy up generated HTML output
|
||||
autoAdd: {
|
||||
helpBlocks: true
|
||||
},
|
||||
filter: function() {
|
||||
// return $(this).is(":visible"); // only validate elements you can see
|
||||
return true; // validate everything
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init: function(options) {
|
||||
|
||||
var settings = $.extend(true, {}, defaults);
|
||||
|
||||
settings.options = $.extend(true, settings.options, options);
|
||||
|
||||
var $siblingElements = this;
|
||||
|
||||
var uniqueForms = $.unique(
|
||||
$siblingElements.map(function() {
|
||||
return $(this).parents("form")[0];
|
||||
}).toArray()
|
||||
);
|
||||
|
||||
$(uniqueForms).bind("submit", function(e) {
|
||||
var $form = $(this);
|
||||
var warningsFound = 0;
|
||||
var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
|
||||
$inputs.trigger("submit.validation").trigger("validationLostFocus.validation");
|
||||
|
||||
$inputs.each(function(i, el) {
|
||||
var $this = $(el),
|
||||
$controlGroup = $this.parents(".form-group").first();
|
||||
if (
|
||||
$controlGroup.hasClass("warning")
|
||||
) {
|
||||
$controlGroup.removeClass("warning").addClass("error");
|
||||
warningsFound++;
|
||||
}
|
||||
});
|
||||
|
||||
$inputs.trigger("validationLostFocus.validation");
|
||||
|
||||
if (warningsFound) {
|
||||
if (settings.options.preventSubmit) {
|
||||
e.preventDefault();
|
||||
}
|
||||
$form.addClass("error");
|
||||
if ($.isFunction(settings.options.submitError)) {
|
||||
settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true));
|
||||
}
|
||||
} else {
|
||||
$form.removeClass("error");
|
||||
if ($.isFunction(settings.options.submitSuccess)) {
|
||||
settings.options.submitSuccess($form, e);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
// Get references to everything we're interested in
|
||||
var $this = $(this),
|
||||
$controlGroup = $this.parents(".form-group").first(),
|
||||
$helpBlock = $controlGroup.find(".help-block").first(),
|
||||
$form = $this.parents("form").first(),
|
||||
validatorNames = [];
|
||||
|
||||
// create message container if not exists
|
||||
if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
|
||||
$helpBlock = $('<div class="help-block" />');
|
||||
$controlGroup.find('.controls').append($helpBlock);
|
||||
createdElements.push($helpBlock[0]);
|
||||
}
|
||||
|
||||
// =============================================================
|
||||
// SNIFF HTML FOR VALIDATORS
|
||||
// =============================================================
|
||||
|
||||
// *snort sniff snuffle*
|
||||
|
||||
if (settings.options.sniffHtml) {
|
||||
var message = "";
|
||||
// ---------------------------------------------------------
|
||||
// PATTERN
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("pattern") !== undefined) {
|
||||
message = "Not in the expected format<!-- data-validation-pattern-message to override -->";
|
||||
if ($this.data("validationPatternMessage")) {
|
||||
message = $this.data("validationPatternMessage");
|
||||
}
|
||||
$this.data("validationPatternMessage", message);
|
||||
$this.data("validationPatternRegex", $this.attr("pattern"));
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MAX
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
|
||||
var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
|
||||
message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->";
|
||||
if ($this.data("validationMaxMessage")) {
|
||||
message = $this.data("validationMaxMessage");
|
||||
}
|
||||
$this.data("validationMaxMessage", message);
|
||||
$this.data("validationMaxMax", max);
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MIN
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
|
||||
var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
|
||||
message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->";
|
||||
if ($this.data("validationMinMessage")) {
|
||||
message = $this.data("validationMinMessage");
|
||||
}
|
||||
$this.data("validationMinMessage", message);
|
||||
$this.data("validationMinMin", min);
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MAXLENGTH
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("maxlength") !== undefined) {
|
||||
message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
|
||||
if ($this.data("validationMaxlengthMessage")) {
|
||||
message = $this.data("validationMaxlengthMessage");
|
||||
}
|
||||
$this.data("validationMaxlengthMessage", message);
|
||||
$this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MINLENGTH
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("minlength") !== undefined) {
|
||||
message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
|
||||
if ($this.data("validationMinlengthMessage")) {
|
||||
message = $this.data("validationMinlengthMessage");
|
||||
}
|
||||
$this.data("validationMinlengthMessage", message);
|
||||
$this.data("validationMinlengthMinlength", $this.attr("minlength"));
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// REQUIRED
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
|
||||
message = settings.builtInValidators.required.message;
|
||||
if ($this.data("validationRequiredMessage")) {
|
||||
message = $this.data("validationRequiredMessage");
|
||||
}
|
||||
$this.data("validationRequiredMessage", message);
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// NUMBER
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
|
||||
message = settings.builtInValidators.number.message;
|
||||
if ($this.data("validationNumberMessage")) {
|
||||
message = $this.data("validationNumberMessage");
|
||||
}
|
||||
$this.data("validationNumberMessage", message);
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// EMAIL
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
|
||||
message = "Not a valid email address<!-- data-validator-validemail-message to override -->";
|
||||
if ($this.data("validationValidemailMessage")) {
|
||||
message = $this.data("validationValidemailMessage");
|
||||
} else if ($this.data("validationEmailMessage")) {
|
||||
message = $this.data("validationEmailMessage");
|
||||
}
|
||||
$this.data("validationValidemailMessage", message);
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MINCHECKED
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("minchecked") !== undefined) {
|
||||
message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->";
|
||||
if ($this.data("validationMincheckedMessage")) {
|
||||
message = $this.data("validationMincheckedMessage");
|
||||
}
|
||||
$this.data("validationMincheckedMessage", message);
|
||||
$this.data("validationMincheckedMinchecked", $this.attr("minchecked"));
|
||||
}
|
||||
// ---------------------------------------------------------
|
||||
// MAXCHECKED
|
||||
// ---------------------------------------------------------
|
||||
if ($this.attr("maxchecked") !== undefined) {
|
||||
message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->";
|
||||
if ($this.data("validationMaxcheckedMessage")) {
|
||||
message = $this.data("validationMaxcheckedMessage");
|
||||
}
|
||||
$this.data("validationMaxcheckedMessage", message);
|
||||
$this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked"));
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================
|
||||
// COLLECT VALIDATOR NAMES
|
||||
// =============================================================
|
||||
|
||||
// Get named validators
|
||||
if ($this.data("validation") !== undefined) {
|
||||
validatorNames = $this.data("validation").split(",");
|
||||
}
|
||||
|
||||
// Get extra ones defined on the element's data attributes
|
||||
$.each($this.data(), function(i, el) {
|
||||
var parts = i.replace(/([A-Z])/g, ",$1").split(",");
|
||||
if (parts[0] === "validation" && parts[1]) {
|
||||
validatorNames.push(parts[1]);
|
||||
}
|
||||
});
|
||||
|
||||
// =============================================================
|
||||
// NORMALISE VALIDATOR NAMES
|
||||
// =============================================================
|
||||
|
||||
var validatorNamesToInspect = validatorNames;
|
||||
var newValidatorNamesToInspect = [];
|
||||
|
||||
do // repeatedly expand 'shortcut' validators into their real validators
|
||||
{
|
||||
// Uppercase only the first letter of each name
|
||||
$.each(validatorNames, function(i, el) {
|
||||
validatorNames[i] = formatValidatorName(el);
|
||||
});
|
||||
|
||||
// Remove duplicate validator names
|
||||
validatorNames = $.unique(validatorNames);
|
||||
|
||||
// Pull out the new validator names from each shortcut
|
||||
newValidatorNamesToInspect = [];
|
||||
$.each(validatorNamesToInspect, function(i, el) {
|
||||
if ($this.data("validation" + el + "Shortcut") !== undefined) {
|
||||
// Are these custom validators?
|
||||
// Pull them out!
|
||||
$.each($this.data("validation" + el + "Shortcut").split(","), function(i2, el2) {
|
||||
newValidatorNamesToInspect.push(el2);
|
||||
});
|
||||
} else if (settings.builtInValidators[el.toLowerCase()]) {
|
||||
// Is this a recognised built-in?
|
||||
// Pull it out!
|
||||
var validator = settings.builtInValidators[el.toLowerCase()];
|
||||
if (validator.type.toLowerCase() === "shortcut") {
|
||||
$.each(validator.shortcut.split(","), function(i, el) {
|
||||
el = formatValidatorName(el);
|
||||
newValidatorNamesToInspect.push(el);
|
||||
validatorNames.push(el);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
validatorNamesToInspect = newValidatorNamesToInspect;
|
||||
|
||||
} while (validatorNamesToInspect.length > 0)
|
||||
|
||||
// =============================================================
|
||||
// SET UP VALIDATOR ARRAYS
|
||||
// =============================================================
|
||||
|
||||
var validators = {};
|
||||
|
||||
$.each(validatorNames, function(i, el) {
|
||||
// Set up the 'override' message
|
||||
var message = $this.data("validation" + el + "Message");
|
||||
var hasOverrideMessage = (message !== undefined);
|
||||
var foundValidator = false;
|
||||
message =
|
||||
(
|
||||
message ?
|
||||
message :
|
||||
"'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->"
|
||||
);
|
||||
|
||||
$.each(
|
||||
settings.validatorTypes,
|
||||
function(validatorType, validatorTemplate) {
|
||||
if (validators[validatorType] === undefined) {
|
||||
validators[validatorType] = [];
|
||||
}
|
||||
if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) {
|
||||
validators[validatorType].push(
|
||||
$.extend(
|
||||
true, {
|
||||
name: formatValidatorName(validatorTemplate.name),
|
||||
message: message
|
||||
},
|
||||
validatorTemplate.init($this, el)
|
||||
)
|
||||
);
|
||||
foundValidator = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) {
|
||||
|
||||
var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]);
|
||||
if (hasOverrideMessage) {
|
||||
validator.message = message;
|
||||
}
|
||||
var validatorType = validator.type.toLowerCase();
|
||||
|
||||
if (validatorType === "shortcut") {
|
||||
foundValidator = true;
|
||||
} else {
|
||||
$.each(
|
||||
settings.validatorTypes,
|
||||
function(validatorTemplateType, validatorTemplate) {
|
||||
if (validators[validatorTemplateType] === undefined) {
|
||||
validators[validatorTemplateType] = [];
|
||||
}
|
||||
if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) {
|
||||
$this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]);
|
||||
validators[validatorType].push(
|
||||
$.extend(
|
||||
validator,
|
||||
validatorTemplate.init($this, el)
|
||||
)
|
||||
);
|
||||
foundValidator = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!foundValidator) {
|
||||
$.error("Cannot find validation info for '" + el + "'");
|
||||
}
|
||||
});
|
||||
|
||||
// =============================================================
|
||||
// STORE FALLBACK VALUES
|
||||
// =============================================================
|
||||
|
||||
$helpBlock.data(
|
||||
"original-contents",
|
||||
(
|
||||
$helpBlock.data("original-contents") ?
|
||||
$helpBlock.data("original-contents") :
|
||||
$helpBlock.html()
|
||||
)
|
||||
);
|
||||
|
||||
$helpBlock.data(
|
||||
"original-role",
|
||||
(
|
||||
$helpBlock.data("original-role") ?
|
||||
$helpBlock.data("original-role") :
|
||||
$helpBlock.attr("role")
|
||||
)
|
||||
);
|
||||
|
||||
$controlGroup.data(
|
||||
"original-classes",
|
||||
(
|
||||
$controlGroup.data("original-clases") ?
|
||||
$controlGroup.data("original-classes") :
|
||||
$controlGroup.attr("class")
|
||||
)
|
||||
);
|
||||
|
||||
$this.data(
|
||||
"original-aria-invalid",
|
||||
(
|
||||
$this.data("original-aria-invalid") ?
|
||||
$this.data("original-aria-invalid") :
|
||||
$this.attr("aria-invalid")
|
||||
)
|
||||
);
|
||||
|
||||
// =============================================================
|
||||
// VALIDATION
|
||||
// =============================================================
|
||||
|
||||
$this.bind(
|
||||
"validation.validation",
|
||||
function(event, params) {
|
||||
|
||||
var value = getValue($this);
|
||||
|
||||
// Get a list of the errors to apply
|
||||
var errorsFound = [];
|
||||
|
||||
$.each(validators, function(validatorType, validatorTypeArray) {
|
||||
if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
|
||||
$.each(validatorTypeArray, function(i, validator) {
|
||||
if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
|
||||
errorsFound.push(validator.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return errorsFound;
|
||||
}
|
||||
);
|
||||
|
||||
$this.bind(
|
||||
"getValidators.validation",
|
||||
function() {
|
||||
return validators;
|
||||
}
|
||||
);
|
||||
|
||||
// =============================================================
|
||||
// WATCH FOR CHANGES
|
||||
// =============================================================
|
||||
$this.bind(
|
||||
"submit.validation",
|
||||
function() {
|
||||
return $this.triggerHandler("change.validation", {
|
||||
submitting: true
|
||||
});
|
||||
}
|
||||
);
|
||||
$this.bind(
|
||||
[
|
||||
"keyup",
|
||||
"focus",
|
||||
"blur",
|
||||
"click",
|
||||
"keydown",
|
||||
"keypress",
|
||||
"change"
|
||||
].join(".validation ") + ".validation",
|
||||
function(e, params) {
|
||||
|
||||
var value = getValue($this);
|
||||
|
||||
var errorsFound = [];
|
||||
|
||||
$controlGroup.find("input,textarea,select").each(function(i, el) {
|
||||
var oldCount = errorsFound.length;
|
||||
$.each($(el).triggerHandler("validation.validation", params), function(j, message) {
|
||||
errorsFound.push(message);
|
||||
});
|
||||
if (errorsFound.length > oldCount) {
|
||||
$(el).attr("aria-invalid", "true");
|
||||
} else {
|
||||
var original = $this.data("original-aria-invalid");
|
||||
$(el).attr("aria-invalid", (original !== undefined ? original : false));
|
||||
}
|
||||
});
|
||||
|
||||
$form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation");
|
||||
|
||||
errorsFound = $.unique(errorsFound.sort());
|
||||
|
||||
// Were there any errors?
|
||||
if (errorsFound.length) {
|
||||
// Better flag it up as a warning.
|
||||
$controlGroup.removeClass("success error").addClass("warning");
|
||||
|
||||
// How many errors did we find?
|
||||
if (settings.options.semanticallyStrict && errorsFound.length === 1) {
|
||||
// Only one? Being strict? Just output it.
|
||||
$helpBlock.html(errorsFound[0] +
|
||||
(settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : ""));
|
||||
} else {
|
||||
// Multiple? Being sloppy? Glue them together into an UL.
|
||||
$helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" +
|
||||
(settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : ""));
|
||||
}
|
||||
} else {
|
||||
$controlGroup.removeClass("warning error success");
|
||||
if (value.length > 0) {
|
||||
$controlGroup.addClass("success");
|
||||
}
|
||||
$helpBlock.html($helpBlock.data("original-contents"));
|
||||
}
|
||||
|
||||
if (e.type === "blur") {
|
||||
$controlGroup.removeClass("success");
|
||||
}
|
||||
}
|
||||
);
|
||||
$this.bind("validationLostFocus.validation", function() {
|
||||
$controlGroup.removeClass("success");
|
||||
});
|
||||
});
|
||||
},
|
||||
destroy: function() {
|
||||
|
||||
return this.each(
|
||||
function() {
|
||||
|
||||
var
|
||||
$this = $(this),
|
||||
$controlGroup = $this.parents(".form-group").first(),
|
||||
$helpBlock = $controlGroup.find(".help-block").first();
|
||||
|
||||
// remove our events
|
||||
$this.unbind('.validation'); // events are namespaced.
|
||||
// reset help text
|
||||
$helpBlock.html($helpBlock.data("original-contents"));
|
||||
// reset classes
|
||||
$controlGroup.attr("class", $controlGroup.data("original-classes"));
|
||||
// reset aria
|
||||
$this.attr("aria-invalid", $this.data("original-aria-invalid"));
|
||||
// reset role
|
||||
$helpBlock.attr("role", $this.data("original-role"));
|
||||
// remove all elements we created
|
||||
if (createdElements.indexOf($helpBlock[0]) > -1) {
|
||||
$helpBlock.remove();
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
collectErrors: function(includeEmpty) {
|
||||
|
||||
var errorMessages = {};
|
||||
this.each(function(i, el) {
|
||||
var $el = $(el);
|
||||
var name = $el.attr("name");
|
||||
var errors = $el.triggerHandler("validation.validation", {
|
||||
includeEmpty: true
|
||||
});
|
||||
errorMessages[name] = $.extend(true, errors, errorMessages[name]);
|
||||
});
|
||||
|
||||
$.each(errorMessages, function(i, el) {
|
||||
if (el.length === 0) {
|
||||
delete errorMessages[i];
|
||||
}
|
||||
});
|
||||
|
||||
return errorMessages;
|
||||
|
||||
},
|
||||
hasErrors: function() {
|
||||
|
||||
var errorMessages = [];
|
||||
|
||||
this.each(function(i, el) {
|
||||
errorMessages = errorMessages.concat(
|
||||
$(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {
|
||||
submitting: true
|
||||
}) : []
|
||||
);
|
||||
});
|
||||
|
||||
return (errorMessages.length > 0);
|
||||
},
|
||||
override: function(newDefaults) {
|
||||
defaults = $.extend(true, defaults, newDefaults);
|
||||
}
|
||||
},
|
||||
validatorTypes: {
|
||||
callback: {
|
||||
name: "callback",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
validatorName: name,
|
||||
callback: $this.data("validation" + name + "Callback"),
|
||||
lastValue: $this.val(),
|
||||
lastValid: true,
|
||||
lastFinished: true
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
if (validator.lastValue === value && validator.lastFinished) {
|
||||
return !validator.lastValid;
|
||||
}
|
||||
|
||||
if (validator.lastFinished === true) {
|
||||
validator.lastValue = value;
|
||||
validator.lastValid = true;
|
||||
validator.lastFinished = false;
|
||||
|
||||
var rrjqbvValidator = validator;
|
||||
var rrjqbvThis = $this;
|
||||
executeFunctionByName(
|
||||
validator.callback,
|
||||
window,
|
||||
$this,
|
||||
value,
|
||||
function(data) {
|
||||
if (rrjqbvValidator.lastValue === data.value) {
|
||||
rrjqbvValidator.lastValid = data.valid;
|
||||
if (data.message) {
|
||||
rrjqbvValidator.message = data.message;
|
||||
}
|
||||
rrjqbvValidator.lastFinished = true;
|
||||
rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message);
|
||||
// Timeout is set to avoid problems with the events being considered 'already fired'
|
||||
setTimeout(function() {
|
||||
rrjqbvThis.trigger("change.validation");
|
||||
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
},
|
||||
ajax: {
|
||||
name: "ajax",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
validatorName: name,
|
||||
url: $this.data("validation" + name + "Ajax"),
|
||||
lastValue: $this.val(),
|
||||
lastValid: true,
|
||||
lastFinished: true
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
if ("" + validator.lastValue === "" + value && validator.lastFinished === true) {
|
||||
return validator.lastValid === false;
|
||||
}
|
||||
|
||||
if (validator.lastFinished === true) {
|
||||
validator.lastValue = value;
|
||||
validator.lastValid = true;
|
||||
validator.lastFinished = false;
|
||||
$.ajax({
|
||||
url: validator.url,
|
||||
data: "value=" + value + "&field=" + $this.attr("name"),
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
if ("" + validator.lastValue === "" + data.value) {
|
||||
validator.lastValid = !!(data.valid);
|
||||
if (data.message) {
|
||||
validator.message = data.message;
|
||||
}
|
||||
validator.lastFinished = true;
|
||||
$this.data("validation" + validator.validatorName + "Message", validator.message);
|
||||
// Timeout is set to avoid problems with the events being considered 'already fired'
|
||||
setTimeout(function() {
|
||||
$this.trigger("change.validation");
|
||||
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
|
||||
}
|
||||
},
|
||||
failure: function() {
|
||||
validator.lastValid = true;
|
||||
validator.message = "ajax call failed";
|
||||
validator.lastFinished = true;
|
||||
$this.data("validation" + validator.validatorName + "Message", validator.message);
|
||||
// Timeout is set to avoid problems with the events being considered 'already fired'
|
||||
setTimeout(function() {
|
||||
$this.trigger("change.validation");
|
||||
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
},
|
||||
regex: {
|
||||
name: "regex",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
regex: regexFromString($this.data("validation" + name + "Regex"))
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (!validator.regex.test(value) && !validator.negative) ||
|
||||
(validator.regex.test(value) && validator.negative);
|
||||
}
|
||||
},
|
||||
required: {
|
||||
name: "required",
|
||||
init: function($this, name) {
|
||||
return {};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return !!(value.length === 0 && !validator.negative) ||
|
||||
!!(value.length > 0 && validator.negative);
|
||||
},
|
||||
blockSubmit: true
|
||||
},
|
||||
match: {
|
||||
name: "match",
|
||||
init: function($this, name) {
|
||||
var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first();
|
||||
element.bind("validation.validation", function() {
|
||||
$this.trigger("change.validation", {
|
||||
submitting: true
|
||||
});
|
||||
});
|
||||
return {
|
||||
"element": element
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (value !== validator.element.val() && !validator.negative) ||
|
||||
(value === validator.element.val() && validator.negative);
|
||||
},
|
||||
blockSubmit: true
|
||||
},
|
||||
max: {
|
||||
name: "max",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
max: $this.data("validation" + name + "Max")
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (parseFloat(value, 10) > parseFloat(validator.max, 10) && !validator.negative) ||
|
||||
(parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative);
|
||||
}
|
||||
},
|
||||
min: {
|
||||
name: "min",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
min: $this.data("validation" + name + "Min")
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (parseFloat(value) < parseFloat(validator.min) && !validator.negative) ||
|
||||
(parseFloat(value) >= parseFloat(validator.min) && validator.negative);
|
||||
}
|
||||
},
|
||||
maxlength: {
|
||||
name: "maxlength",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
maxlength: $this.data("validation" + name + "Maxlength")
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return ((value.length > validator.maxlength) && !validator.negative) ||
|
||||
((value.length <= validator.maxlength) && validator.negative);
|
||||
}
|
||||
},
|
||||
minlength: {
|
||||
name: "minlength",
|
||||
init: function($this, name) {
|
||||
return {
|
||||
minlength: $this.data("validation" + name + "Minlength")
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return ((value.length < validator.minlength) && !validator.negative) ||
|
||||
((value.length >= validator.minlength) && validator.negative);
|
||||
}
|
||||
},
|
||||
maxchecked: {
|
||||
name: "maxchecked",
|
||||
init: function($this, name) {
|
||||
var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
|
||||
elements.bind("click.validation", function() {
|
||||
$this.trigger("change.validation", {
|
||||
includeEmpty: true
|
||||
});
|
||||
});
|
||||
return {
|
||||
maxchecked: $this.data("validation" + name + "Maxchecked"),
|
||||
elements: elements
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (validator.elements.filter(":checked").length > validator.maxchecked && !validator.negative) ||
|
||||
(validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative);
|
||||
},
|
||||
blockSubmit: true
|
||||
},
|
||||
minchecked: {
|
||||
name: "minchecked",
|
||||
init: function($this, name) {
|
||||
var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
|
||||
elements.bind("click.validation", function() {
|
||||
$this.trigger("change.validation", {
|
||||
includeEmpty: true
|
||||
});
|
||||
});
|
||||
return {
|
||||
minchecked: $this.data("validation" + name + "Minchecked"),
|
||||
elements: elements
|
||||
};
|
||||
},
|
||||
validate: function($this, value, validator) {
|
||||
return (validator.elements.filter(":checked").length < validator.minchecked && !validator.negative) ||
|
||||
(validator.elements.filter(":checked").length >= validator.minchecked && validator.negative);
|
||||
},
|
||||
blockSubmit: true
|
||||
}
|
||||
},
|
||||
builtInValidators: {
|
||||
email: {
|
||||
name: "Email",
|
||||
type: "shortcut",
|
||||
shortcut: "validemail"
|
||||
},
|
||||
validemail: {
|
||||
name: "Validemail",
|
||||
type: "regex",
|
||||
regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}",
|
||||
message: "Not a valid email address<!-- data-validator-validemail-message to override -->"
|
||||
},
|
||||
passwordagain: {
|
||||
name: "Passwordagain",
|
||||
type: "match",
|
||||
match: "password",
|
||||
message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->"
|
||||
},
|
||||
positive: {
|
||||
name: "Positive",
|
||||
type: "shortcut",
|
||||
shortcut: "number,positivenumber"
|
||||
},
|
||||
negative: {
|
||||
name: "Negative",
|
||||
type: "shortcut",
|
||||
shortcut: "number,negativenumber"
|
||||
},
|
||||
number: {
|
||||
name: "Number",
|
||||
type: "regex",
|
||||
regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?",
|
||||
message: "Must be a number<!-- data-validator-number-message to override -->"
|
||||
},
|
||||
integer: {
|
||||
name: "Integer",
|
||||
type: "regex",
|
||||
regex: "[+-]?\\\d+",
|
||||
message: "No decimal places allowed<!-- data-validator-integer-message to override -->"
|
||||
},
|
||||
positivenumber: {
|
||||
name: "Positivenumber",
|
||||
type: "min",
|
||||
min: 0,
|
||||
message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->"
|
||||
},
|
||||
negativenumber: {
|
||||
name: "Negativenumber",
|
||||
type: "max",
|
||||
max: 0,
|
||||
message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->"
|
||||
},
|
||||
required: {
|
||||
name: "Required",
|
||||
type: "required",
|
||||
message: "This is required<!-- data-validator-required-message to override -->"
|
||||
},
|
||||
checkone: {
|
||||
name: "Checkone",
|
||||
type: "minchecked",
|
||||
minchecked: 1,
|
||||
message: "Check at least one option<!-- data-validation-checkone-message to override -->"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var formatValidatorName = function(name) {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(
|
||||
/(^|\s)([a-z])/g,
|
||||
function(m, p1, p2) {
|
||||
return p1 + p2.toUpperCase();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
var getValue = function($this) {
|
||||
// Extract the value we're talking about
|
||||
var value = $this.val();
|
||||
var type = $this.attr("type");
|
||||
if (type === "checkbox") {
|
||||
value = ($this.is(":checked") ? value : "");
|
||||
}
|
||||
if (type === "radio") {
|
||||
value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : "");
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
function regexFromString(inputstring) {
|
||||
return new RegExp("^" + inputstring + "$");
|
||||
}
|
||||
|
||||
/**
|
||||
* Thanks to Jason Bunting via StackOverflow.com
|
||||
*
|
||||
* http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910
|
||||
* Short link: http://tinyurl.com/executeFunctionByName
|
||||
**/
|
||||
function executeFunctionByName(functionName, context /*, args*/ ) {
|
||||
var args = Array.prototype.slice.call(arguments).splice(2);
|
||||
var namespaces = functionName.split(".");
|
||||
var func = namespaces.pop();
|
||||
for (var i = 0; i < namespaces.length; i++) {
|
||||
context = context[namespaces[i]];
|
||||
}
|
||||
return context[func].apply(this, args);
|
||||
}
|
||||
|
||||
$.fn.jqBootstrapValidation = function(method) {
|
||||
|
||||
if (defaults.methods[method]) {
|
||||
return defaults.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return defaults.methods.init.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.jqBootstrapValidation');
|
||||
return null;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.jqBootstrapValidation = function(options) {
|
||||
$(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this, arguments);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
83
src/components/Portfolio.vue
Normal file
83
src/components/Portfolio.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<!-- Portfolio Grid-->
|
||||
<section class="page-section bg-light" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2 class="section-heading text-uppercase">Portfolio</h2>
|
||||
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6 mb-4" v-for="(obj, key) in portfolioJSON" :key="key">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" v-bind:href="'#' + obj.modal">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content">
|
||||
<i class="fas fa-plus fa-3x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<img class="img-fluid" v-bind:src="obj.img" alt />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">{{ obj.heading }}</div>
|
||||
<div
|
||||
class="portfolio-caption-subheading text-muted"
|
||||
>{{ obj.subheading }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Portfolio",
|
||||
data: () => ({
|
||||
portfolioJSON: [
|
||||
{
|
||||
img: "img/portfolio/01-thumbnail.jpg",
|
||||
modal: "portfolioModal1",
|
||||
heading: "Threads",
|
||||
subheading: "Illustration",
|
||||
},
|
||||
{
|
||||
img: "img/portfolio/02-thumbnail.jpg",
|
||||
modal: "portfolioModal2",
|
||||
heading: "Explore",
|
||||
subheading: "Graphic Design",
|
||||
},
|
||||
{
|
||||
img: "img/portfolio/03-thumbnail.jpg",
|
||||
modal: "portfolioModal3",
|
||||
heading: "Finish",
|
||||
subheading: "Identity",
|
||||
},
|
||||
{
|
||||
img: "img/portfolio/04-thumbnail.jpg",
|
||||
modal: "portfolioModal4",
|
||||
heading: "Lines",
|
||||
subheading: "Branding",
|
||||
},
|
||||
{
|
||||
img: "img/portfolio/05-thumbnail.jpg",
|
||||
modal: "portfolioModal5",
|
||||
heading: "Southwest",
|
||||
subheading: "Website Design",
|
||||
},
|
||||
{
|
||||
img: "img/portfolio/06-thumbnail.jpg",
|
||||
modal: "portfolioModal6",
|
||||
heading: "Window",
|
||||
subheading: "Photography",
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="sass">
|
||||
</style>
|
||||
@@ -2,7 +2,6 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import './assets/css/styles.css'
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
Reference in New Issue
Block a user