Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-22 09:17:33 +00:00
Code Issues Releases Wiki Activity

feat: Use webpack for bundling of JS files

Browse Source
This commit is contained in:
Damillora 2021-04-22 15:43:53 +07:00
parent 85687c48a2
commit 12154775d3
13 changed files with 2781 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/index.js Normal file
View File

@ -0,0 +1,4 @@
import './lib/dark-mode';
import './lib/fitvids';
import './lib/infinite-scroll';
import './lib/nav-collapse';

89
assets/js/jquery.fitvids.js
View File

@ -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 );

15
assets/js/dark-mode.js → assets/js/lib/dark-mode.js
View File

@ -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
View File

@ -0,0 +1,3 @@
import fitvids from 'fitvids';
fitvids();

0
assets/js/infinite-scroll.js → assets/js/lib/infinite-scroll.js
View File

2
assets/js/lib/jquery-3.6.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

60
assets/js/lib/nav-collapse.js Normal file
View 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();

62
assets/js/nav-collapse.js
View File

@ -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();
});

38
gulpfile.js
View File

@ -1,11 +1,11 @@
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();
@ -16,22 +16,24 @@ 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
View File

@ -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
View File

@ -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
View File

@ -108,11 +108,5 @@
{{/post}}
{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
// FitVids - start
var $postContent = $("#post");
$postContent.fitVids();
// FitVids - end
});
</script>
{{/contentFor}}

2726
yarn.lock
View File

File diff suppressed because it is too large Load Diff