Hori Godai steelydylan

🎯

Focusing

JavaScript UI Developer

steelydylan / use-scrolling.ts

Created June 27, 2019 11:49

Windowのスクロール状態を監視するためのReact hooks

	export const useScrolling = (delay: number) => {
	const [scrolling, setScrolling] = useState(false);
	useEffect(() => {
	let debounceTimer = null;
	const eventHandler = () => {
	if (scrolling === false) {
	setScrolling(true);
	}
	clearTimeout(debounceTimer);
	debounceTimer = setTimeout(() => {

steelydylan / tooltip.tsx

Created May 30, 2019 06:31

ツールチップのマウスオーバーマウスリーブ、よく使うからメモ！

steelydylan / Hook.php

Created May 15, 2019 01:22

ブログレベルを表示するグローバル変数の生成サンプル

steelydylan / conditional-wrap.tsx

Created February 6, 2019 08:16

ConditionalWrapComponent

	import * as React from 'react';

	interface ConditionalWrapType{
	condition: boolean,
	wrap: (children) => React.ReactNode
	children: React.ReactNode
	}

	export default ({condition, wrap, children}): React.SFCElement<ConditionalWrapType> => condition ? wrap(children) : children;

steelydylan / global.d.ts

Created December 14, 2018 07:01

もともとglobalに出ているjsライブラリをTypeScriptで定義しておく方法

steelydylan / field.html

Last active October 18, 2018 02:36

a-blog cms のカスタムフィールドでyahooMapを利用する

	<table class="formColumnMap js-yahoo-map">
	<tr>
	<td class="formColumnMapTd">
	<!-- BEGIN_IF [%{PROTOCOL}/eq/https] -->
	<img class="column-map js-map_editable-container" src="//map.yahooapis.jp/map/V1/static?appid=%{YAHOO_API_KEY}&lat={mapLat}&lon={mapLng}&z={mapZoom}&width=400&height=400&pointer=on"
	width="400" height="400">
	<!-- ELSE -->
	<img class="column-map js-map_editable-container" src="//map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=%{YAHOO_API_KEY}&lat={mapLat}&lon={mapLng}&z={mapZoom}&width=400&height=400&pointer=on"
	width="400" height="400">
	<!-- END_IF -->

steelydylan / js.html

Last active August 10, 2018 03:25

a-blog cmsでjQueryの3系を利用したい場合

	<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js" charset="UTF-8"></script>
	<!-- BEGIN_MODULE Js -->
	<script src="%{ROOT_DIR}acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

steelydylan / app.js

Last active July 20, 2018 06:02

Harmoware-VIS 最小サンプル

	// app.js　mapboxを使用する場合のサンプル
	import React from 'react';
	import {
	Container, connectToHarmowareVis,
	HarmoVisLayers, MovesLayer, DepotsLayer,
	MovesInput, DepotsInput, SimulationDateTime,
	PauseButton, ForwardButton, ReverseButton, AddMinutesButton,
	ElapsedTimeRange, SpeedRange
	} from 'harmoware-vis';

steelydylan / content-load.js

Created July 11, 2018 00:04

	export default (handler) => {
	if (document.readyState === 'interactive' \|\| document.readyState === 'complete') {
	handler();
	} else {
	document.addEventListener('DOMContentLoaded', handler, false);
	}
	};

steelydylan / example.js

Created May 25, 2018 02:53

jsonからランダムに動画を選んでdomに追加して再生するJavaScript

	import randomVideo from 'random-video';
	randomVideo('#js-random-video', '/sample.json');


	hoverOnCropList = () => {
	clearTimeout(this.state.timeout);
	this.setState({
	isCropListOpen: true
	});
	}

	leaveFromCropList = () => {
	const timeout = setTimeout(() => {