Skip to content

Instantly share code, notes, and snippets.

@bom-shibuya

bom-shibuya/GoogleMapsGenerator.js

Last active December 19, 2022 02:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bom-shibuya/fc223ee0e3e4bd451490ed3e7119a864 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bom-shibuya/fc223ee0e3e4bd451490ed3e7119a864 to your computer and use it in GitHub Desktop.
Download ZIP
UTILS
Raw
GoogleMapsGenerator.js
import loadGoogleMapsAPI from 'load-google-maps-api';
import Util from './Util.js';
import googleMapsStyle from './googleMapsStyle.js';
// google mainImg_philosophy-sp api
// target => strings (挿入するDOM)
// mapSettingObj => object = {
// center: {lat, lng}
// zoom
// }
export default class GoogleMapsGenerator {
/**
* マーカーのサイズ切り替えよう
* @param {string} deviceFlag 'sp', 'tablet' or 'pc'
* @param {constructor} googleMaps googlemaps api
* @return {constructor} googleMaps googlemaps api
*/
static _switchMarkerSize(deviceFlag, googleMaps) {
switch (deviceFlag) {
case 'sp': return new googleMaps.Size(73.5, 70.8);
case 'tablet': return new googleMaps.Size(75, 73.6);
default: return new googleMaps.Size(110, 102.5);
}
}
/**
* execute
* @param {element} element !nodeList
* @param {object} mapSettingObj {center: {lat, lng}, zoom, etc..}
* @param {constructor} googleMaps googlemaps api
*/
static _execute(element, mapSettingObj, googleMaps) {
const map = new googleMaps.Map(element, mapSettingObj);
new googleMaps.Marker({
map: map,
position: new googleMaps.LatLng(
mapSettingObj.center.lat,
mapSettingObj.center.lng
),
icon: {
url: '@ROOT_PATH/assets/img/common/icon/icon_googlemaps.svg',
scaledSize: this._switchMarkerSize(Util.getDevice(), googleMaps)
},
optimized: false
});
}
/**
* style追加用
* @param {object} mapSettingObj {center: {lat, lng}, zoom, etc..}
* @return {object} add stylers
*/
static _addStylers(mapSettingObj) {
return { ...mapSettingObj, styles: googleMapsStyle };
}
/**
* execute
* @param {element} element !nodeList
* @param {object} mapSettingsObj {center: {lat, lng}, zoom, etc..}
* @param {constructor} googleMaps googlemaps api
*/
static run(element, mapSettingObj, googleMaps) {
this._execute(
element,
this._addStylers(mapSettingObj),
googleMaps
);
}
/**
* google maps api 読み込み後に処理を行わせる。
* 主にgoogleMapsGeneratorの引数を2つ束縛した状態で渡してください。
* @param {...function} func function.bind(null, element, mapSettingObj)
*/
static load(key, ...func) {
loadGoogleMapsAPI({key}).then(googleMaps => {
func.forEach(callbackFunc => {
callbackFunc(googleMaps);
});
}).catch(err => {
console.error(err);
});
}
}
Raw
InitSettingManagaer.js
/**
* 事前処理が全て終わってから事後処理を行う
* @constructor
*/
export default class InitSettingManagaer {
constructor() {
this._pre = [];
this._mid = [];
this._post = [];
}
addPre(fn) {
this._pre.push(fn);
}
addMid(fn) {
this._mid.push(fn);
}
addPost(fn) {
this._post.push(fn);
}
_executePre() {
return Promise.all(this._pre.map(fn => fn()));
}
_executeMid() {
return new Promise(resolve => Promise.all(
this._mid.map(fn => fn())
).then(() => {
resolve();
})
);
}
_executePost() {
for (let fn of this._post) {
fn();
}
}
start() {
this._executePre()
.then(this._executeMid.bind(this))
.then(() => {
this._executePost();
});
}
}
Raw
ResizeManager.js
// resize manager
export default class ResizeManager {
constructor() {
this.funcArr = [];
this.fps = 1000 / 60;
this.timer = null;
}
// function conllection
add(func) {
this.funcArr.push(func);
}
// 実行
start() {
window.addEventListener('resize', () => {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.funcArr.forEach(func => func());
}, this.fps);
});
}
}
Raw
ScrollManager.js
// scroll manager
export default class ScrollManager {
constructor() {
this.funcArr = [];
this.fps = 1000 / 60;
this.timer = null;
}
// function conllection
add(func) {
this.funcArr.push(func);
}
// 実行
start() {
window.addEventListener('scroll', () => {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.funcArr.forEach(func => func());
}, this.fps);
});
}
static _killTouchMove(e) {
e.preventDefault();
}
static _fixBody() {
document.body.style.height = window.innerHeight + 'px';
document.body.style.overflow = 'hidden';
}
static _releaseBody() {
document.body.style.height = '';
document.body.style.overflow = '';
}
// スクロール禁止
static kill() {
document.addEventListener('touchmove', this._killTouchMove);
this._fixBody();
}
// スクロール復活
static recover() {
document.removeEventListener('touchmove', this._killTouchMove);
this._releaseBody();
}
}
Raw
SmoothScroll.js
// impot library
import { TweenLite } from 'gsap';
import ScrollToPlugin from 'ScrollToPlugin';
// import origin class
import Util from './Util.js';
/**
* スムーズスクロールのクラス
* @constructor
*/
export default class SmoothScroll {
static _getHeaderHeight() {
switch (Util.getDevice()) {
case 'sp': return 50;
case 'tablet': return 100;
// 'pc'
default: return 90;
}
}
/**
* @param {object} element dom
* @return {number} スクロールするするターゲットのoffset
*/
static _getTargetOffset(target) {
return (target === '#top') ? 0 : Util.getOffsetY(target) - this._getHeaderHeight();
}
/**
* scroll animation用..
* @param {number} offset スクロール位置
* @param {number} delay スクロール開始までの時間
*/
static _scrollToTarget(offset, delay = 0) {
$('html,body').delay(delay * 1000).animate({
scrollTop: offset
}, 600);
// TweenMax.to(document.body, 0.6, {
// scrollTo: offset,
// delay,
// ease: Power3.easeInOut,
// autoKill:false
// });
}
/**
* smooth scroll用発火関数
* @param {string} target クラス名
* @param {number|function} delay 待ち時間
*/
static run(target, delay = 0) {
const buttons = document.querySelectorAll(target);
// 要素がある場合
if (buttons.length > 0) {
for (let button of buttons) {
button.addEventListener('click', e => {
e.preventDefault();
// delayがfunctionの時は発火させる
const delayTime = (typeof delay === 'function') ? delay() : delay;
const target = button.getAttribute('href');
this._scrollToTarget(this._getTargetOffset(target), delayTime);
});
}
}
}
// load時に ?id=がurlについてたらその位置までスクロール
static runOnLoad() {
const url = window.location.href;
// ?id=がurlについてる場合
if (url.indexOf('?id=') !== -1) {
const hrefHash = url.split('?id=');
const target = document.getElementById(hrefHash[hrefHash.length - 1]);
this._scrollToTarget(this._getTargetOffset(target), 0)
}
}
}
Raw
Util.js
import {
TweenMax
// TweenLite,
// ScrollToPlugin,
// EasePack
} from 'gsap';
import modernizr from 'modernizr';
/**
* 汎用的な関数の集まり
* @constructor
*/
export default class Util {
/**
* @return {string} 'sp' or 'tablet' or 'pc'
*/
static getDevice() {
if (window.innerWidth < 768) {
return 'sp';
} else if (window.innerWidth >= 768 && window.innerWidth < 1025) {
return 'tablet';
} else {
return 'pc';
}
}
/**
* promiseを返すTWEEN MAX
* @param {object} target 取得したelement
* @param {number} transition 所要時間
* @param {object} settingObj tweenmaxのparameter
* @return {object} promise
*/
static awaitTM(target, transition, settingObj) {
return new Promise(resolve => {
const param = {
...settingObj,
onComplete: () => {resolve();}
};
TweenMax.to(target, transition, param);
});
}
// 何かの高さを取得する
static getHeight(element) {
const getHeightEl = (typeof element === 'string') ? document.querySelector(element) : element;
return getHeightEl.offsetHeight;
};
/**
* 要素のoffetを返す
* @param {string|object} element 取得したい要素の文字列 or Node
* @return {number} 要素のオフセットを返す
*/
static getOffsetY(element) {
const target = (typeof element === 'string') ? document.querySelector(element) : element;
return target.getBoundingClientRect().top + window.pageYOffset;
}
/**
* 要素が入ってくるまでのスクロール量を返す。
* @param {string|object} element 取得したい要素の文字列 or Node
* @return {number} 要素が画面に入ってくるまでのスクロール量を返す。
*/
static getInViewOffset(element) {
return this.getOffsetY(element) - window.innerHeight;
}
// 要素が入っているかどうかを返す
static isInview(element) {
if (window.pageYOffset > getInViewOffset(element)) {
return true;
}
return false;
};
/**
* toucheventをもっているかどうかを返す
* @return {boolian} touchevent?
*/
static hasTouchEvent() {
return modernizr.touchevents;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment