mirror of
https://github.com/Damillora/Yuika
synced 2024-12-25 13:43:46 +00:00
feat: Use webpack for bundling of JS files
This commit is contained in:
parent
85687c48a2
commit
12154775d3
4
assets/js/index.js
Normal file
4
assets/js/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
import './lib/dark-mode';
|
||||
import './lib/fitvids';
|
||||
import './lib/infinite-scroll';
|
||||
import './lib/nav-collapse';
|
@ -1,89 +0,0 @@
|
||||
/*jshint browser:true */
|
||||
/*!
|
||||
* FitVids 1.3
|
||||
*
|
||||
*
|
||||
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
|
||||
* This is an unofficial release, ported by John O'Nolan
|
||||
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
||||
* Released under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
;(function( $ ){
|
||||
|
||||
'use strict';
|
||||
|
||||
$.fn.fitVids = function( options ) {
|
||||
var settings = {
|
||||
customSelector: null,
|
||||
ignore: null
|
||||
};
|
||||
|
||||
if(!document.getElementById('fit-vids-style')) {
|
||||
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
|
||||
head.appendChild(div.childNodes[1]);
|
||||
}
|
||||
|
||||
if ( options ) {
|
||||
$.extend( settings, options );
|
||||
}
|
||||
|
||||
return this.each(function(){
|
||||
var selectors = [
|
||||
'iframe[src*="player.vimeo.com"]',
|
||||
'iframe[src*="youtube.com"]',
|
||||
'iframe[src*="youtube-nocookie.com"]',
|
||||
'iframe[src*="kickstarter.com"][src*="video.html"]',
|
||||
'object',
|
||||
'embed'
|
||||
];
|
||||
|
||||
if (settings.customSelector) {
|
||||
selectors.push(settings.customSelector);
|
||||
}
|
||||
|
||||
var ignoreList = '.fitvidsignore';
|
||||
|
||||
if(settings.ignore) {
|
||||
ignoreList = ignoreList + ', ' + settings.ignore;
|
||||
}
|
||||
|
||||
var $allVideos = $(this).find(selectors.join(','));
|
||||
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
|
||||
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
|
||||
|
||||
$allVideos.each(function(){
|
||||
var $this = $(this);
|
||||
if($this.parents(ignoreList).length > 0) {
|
||||
return; // Disable FitVids on this video.
|
||||
}
|
||||
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
|
||||
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
|
||||
{
|
||||
$this.attr('height', 9);
|
||||
$this.attr('width', 16);
|
||||
}
|
||||
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
|
||||
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
|
||||
aspectRatio = height / width;
|
||||
if(!$this.attr('name')){
|
||||
var videoName = 'fitvid' + $.fn.fitVids._count;
|
||||
$this.attr('name', videoName);
|
||||
$.fn.fitVids._count++;
|
||||
}
|
||||
$this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
|
||||
$this.removeAttr('height').removeAttr('width');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Internal counter for unique video names.
|
||||
$.fn.fitVids._count = 0;
|
||||
|
||||
// Works with either jQuery or Zepto
|
||||
})( window.jQuery || window.Zepto );
|
@ -3,26 +3,25 @@ function setDarkMode() {
|
||||
window.localStorage.setItem('theme', window.document.body.getAttribute("data-theme"));
|
||||
}
|
||||
if (window.document.body.getAttribute("data-theme") == "dark") {
|
||||
$("#darkMode i").text("brightness_high");
|
||||
$("#darkMode p").text("Light Mode");
|
||||
window.document.querySelector("#darkMode i").innerHTML = "brightness_high";
|
||||
window.document.querySelector("#darkMode p").innerHTML = "Light Mode";
|
||||
} else {
|
||||
$("#darkMode i").text("brightness_low");
|
||||
$("#darkMode p").text("Dark Mode");
|
||||
window.document.querySelector("#darkMode i").innerHTML = "brightness_low";
|
||||
window.document.querySelector("#darkMode p").innerHTML = "Dark Mode";
|
||||
}
|
||||
}
|
||||
|
||||
if (window.localStorage.getItem('theme')) {
|
||||
window.document.body.setAttribute("data-theme", window.localStorage.getItem("theme"));
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
document.addEventListener("load",function () {
|
||||
setDarkMode();
|
||||
$("#darkMode").click(function () {
|
||||
document.querySelector("#darkMode").addEventListener("click", function () {
|
||||
if (window.document.body.getAttribute("data-theme") != "dark") {
|
||||
window.document.body.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
window.document.body.setAttribute("data-theme", "light");
|
||||
}
|
||||
setDarkMode();
|
||||
})
|
||||
});
|
||||
});
|
3
assets/js/lib/fitvids.js
Normal file
3
assets/js/lib/fitvids.js
Normal file
@ -0,0 +1,3 @@
|
||||
import fitvids from 'fitvids';
|
||||
|
||||
fitvids();
|
2
assets/js/lib/jquery-3.6.0.min.js
vendored
2
assets/js/lib/jquery-3.6.0.min.js
vendored
File diff suppressed because one or more lines are too long
60
assets/js/lib/nav-collapse.js
Normal file
60
assets/js/lib/nav-collapse.js
Normal file
@ -0,0 +1,60 @@
|
||||
|
||||
|
||||
|
||||
document.querySelector("#menushow").addEventListener("click", function () {
|
||||
document.querySelector(".site-header").classList.toggle('enabled');
|
||||
document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
|
||||
document.querySelector(".menu").classList.toggle("enabled");
|
||||
});
|
||||
document.querySelector(".menu__item").addEventListener("click", function () {
|
||||
document.querySelector(".site-header").classList.toggle('enabled');
|
||||
document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
|
||||
document.querySelector(".menu").classList.toggle("enabled");
|
||||
})
|
||||
|
||||
var nav = document.querySelector('.site-header');
|
||||
var feed = document.querySelector('main');
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
var lastDocumentHeight = document.height;
|
||||
var ticking = false;
|
||||
|
||||
function onScroll() {
|
||||
lastScrollY = window.scrollY;
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
lastWindowHeight = window.innerHeight;
|
||||
lastDocumentHeight = $(document).height();
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function requestTick() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
ticking = true;
|
||||
}
|
||||
|
||||
function update() {
|
||||
var trigger = feed.getBoundingClientRect().top + window.scrollY;
|
||||
var progressMax = lastDocumentHeight - lastWindowHeight;
|
||||
|
||||
// show/hide nav
|
||||
if (lastScrollY >= nav.getBoundingClientRect().bottom) {
|
||||
nav.classList.add('detached');
|
||||
} else {
|
||||
nav.classList.remove('detached');
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onResize, false);
|
||||
|
||||
update();
|
||||
|
||||
|
@ -1,62 +0,0 @@
|
||||
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#menushow").click(function () {
|
||||
$(".site-header").toggleClass('enabled');
|
||||
$(".site-header__background").toggleClass('site-header__background--enabled');
|
||||
$(".menu").toggleClass('enabled');
|
||||
})
|
||||
$(".menu__item").click(function () {
|
||||
$(".site-header").toggleClass('enabled');
|
||||
$(".site-header__background").toggleClass('site-header__background--enabled');
|
||||
$(".menu").toggleClass('enabled');
|
||||
})
|
||||
|
||||
var nav = document.querySelector('.site-header');
|
||||
var feed = document.querySelector('main');
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
var lastDocumentHeight = $(document).height();
|
||||
var ticking = false;
|
||||
|
||||
function onScroll() {
|
||||
lastScrollY = window.scrollY;
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
lastWindowHeight = window.innerHeight;
|
||||
lastDocumentHeight = $(document).height();
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function requestTick() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
ticking = true;
|
||||
}
|
||||
|
||||
function update() {
|
||||
var trigger = feed.getBoundingClientRect().top + window.scrollY;
|
||||
var progressMax = lastDocumentHeight - lastWindowHeight;
|
||||
|
||||
// show/hide nav
|
||||
if (lastScrollY >= nav.getBoundingClientRect().bottom) {
|
||||
nav.classList.add('detached');
|
||||
} else {
|
||||
nav.classList.remove('detached');
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onResize, false);
|
||||
|
||||
update();
|
||||
|
||||
});
|
||||
|
40
gulpfile.js
40
gulpfile.js
@ -1,37 +1,39 @@
|
||||
const {series, watch, src, dest, parallel} = require('gulp');
|
||||
const { series, watch, src, dest, parallel } = require('gulp');
|
||||
|
||||
const postcss = require('gulp-postcss')
|
||||
const livereload = require('gulp-livereload');
|
||||
const zip = require('gulp-zip');
|
||||
const concat = require('gulp-concat');
|
||||
const uglify = require('gulp-uglify');
|
||||
const cleancss = require('gulp-clean-css');
|
||||
const webpack = require('webpack-stream');
|
||||
|
||||
function serve(done) {
|
||||
livereload.listen();
|
||||
done();
|
||||
}
|
||||
|
||||
function hbs() {
|
||||
function hbs() {
|
||||
return src(['*.hbs', 'partials/**/*.hbs'])
|
||||
.pipe(livereload());
|
||||
}
|
||||
function css () {
|
||||
function css() {
|
||||
|
||||
return src('assets/css/styles.css')
|
||||
.pipe(cleancss({compatibility: 'ie8'}))
|
||||
.pipe(dest('assets/built/'))
|
||||
.pipe(livereload())
|
||||
return src('assets/css/styles.css')
|
||||
.pipe(cleancss({ compatibility: 'ie8' }))
|
||||
.pipe(dest('assets/built/'))
|
||||
.pipe(livereload())
|
||||
}
|
||||
function js() {
|
||||
return src([
|
||||
// pull in lib files first so our own code can depend on it
|
||||
'assets/js/lib/*.js',
|
||||
'assets/js/*.js'
|
||||
], {sourcemaps: true})
|
||||
return src('assets/js/index.js')
|
||||
.pipe(
|
||||
webpack({
|
||||
mode: 'production'
|
||||
// Any configuration options...
|
||||
})
|
||||
)
|
||||
.pipe(concat('yuika.js'))
|
||||
.pipe(uglify())
|
||||
.pipe(dest('assets/built/', {sourcemaps: '.'}))
|
||||
.pipe(dest('assets/built/', { sourcemaps: '.' }))
|
||||
.pipe(livereload());
|
||||
}
|
||||
|
||||
@ -39,7 +41,7 @@ const cssWatcher = () => watch('assets/css/**', css);
|
||||
const jsWatcher = () => watch('assets/js/**.js', js);
|
||||
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
|
||||
const watcher = parallel(cssWatcher, hbsWatcher, jsWatcher);
|
||||
const build = parallel(css,js);
|
||||
const build = parallel(css, js);
|
||||
const dev = series(build, serve, watcher);
|
||||
|
||||
|
||||
@ -49,10 +51,10 @@ function zipper(done) {
|
||||
const filename = themeName + '.zip';
|
||||
|
||||
return src([
|
||||
'**',
|
||||
'!node_modules', '!node_modules/**',
|
||||
'!dist', '!dist/**'
|
||||
])
|
||||
'**',
|
||||
'!node_modules', '!node_modules/**',
|
||||
'!dist', '!dist/**'
|
||||
])
|
||||
.pipe(zip(filename))
|
||||
.pipe(dest(targetDir));
|
||||
}
|
||||
|
10
package.json
10
package.json
@ -63,8 +63,16 @@
|
||||
"url": "https://github.com/Damillora/Yuika.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.13.16",
|
||||
"@babel/preset-env": "^7.13.15",
|
||||
"@semantic-release/exec": "^5.0.0",
|
||||
"semantic-release": "^17.4.2"
|
||||
"babel-loader": "^8.2.2",
|
||||
"fitvids": "^2.1.1",
|
||||
"semantic-release": "^17.4.2",
|
||||
"terser-webpack-plugin": "^5.1.1",
|
||||
"webpack": "^5.35.0",
|
||||
"webpack-cli": "^4.6.0",
|
||||
"webpack-stream": "^6.1.2"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
6
page.hbs
6
page.hbs
@ -19,11 +19,5 @@
|
||||
{{/post}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
6
post.hbs
6
post.hbs
@ -108,11 +108,5 @@
|
||||
{{/post}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
Loading…
Reference in New Issue
Block a user