[JavaScript]スクロール無効化
window.addEventListener('touchmove', (e)=>{this.cancelScroll(e);}, { passive: false }); window.addEventListener('mousewheel', (e)=>{this.cancelScroll(e);}, { passive: false }); cancelScroll(e) { e.preventDefault(); }
window.addEventListener('touchmove', (e)=>{this.cancelScroll(e);}, { passive: false }); window.addEventListener('mousewheel', (e)=>{this.cancelScroll(e);}, { passive: false }); cancelScroll(e) { e.preventDefault(); }
getDateStrByFormat(format,d,defaultValue){ if(typeof d == 'string'){ d = this.getDateByYYYYMMDD(d); } if(!d){ if(defaultValue != undefined && defaultValue != null){ return defaultValue; }else{ d = new Date(); } } if(!format){ format = 'Y-m-d'; } const _pz = function(v,digits){ var vs = v.toString(); while(vs.length < digits){ vs = '0' + vs; } return vs; }; return format .replace(/Y/g,d.getFullYear()) .replace(/y/g,d.getFullYear().toString().substr(2,2)) .replace(/n/g,d.getMonth()+1) .replace(/m/g,_pz(d.getMonth()+1,2)) .replace(/j/g,d.getDate()) .replace(/d/g,_pz(d.getDate(),2)) .replace(/G/g,d.getHours()) .replace(/H/g,_pz(d.getHours(),2)) .replace(/i/g,_pz(d.getMinutes(),2)) .replace(/s/g,_pz(d.getSeconds(),2)) .replace(/J/g,['日','月','火','水','木','金','土'][d.getDay()]) .replace(/D/g,['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()]); }
js
function getDateByYYYYMMDD(yyyymmdd) { var tmp = void 0, match = void 0; if (match = yyyymmdd.match(/[\d]{4}\-[\d]{2}\-[\d]{2}/)) { if (match.length) { tmp = match[0].split('-'); } } else if (match = yyyymmdd.match(/[\d]{4}[\d]{2}[\d]{2}/)) { if (match.length) { tmp = [match[0].substr(0, 4), match[0].substr(4, 2), match[0].substr(6, 2)]; } } if (!tmp || tmp.length < 3) { return null; } return new Date(Number(tmp[0]), Number(tmp[1]) - 1, Number(tmp[2]), 0, 0, 0, 0); }
es6
getDateByYYYYMMDD(yyyymmdd){ let tmp,match; if(match = yyyymmdd.match(/[\d]{4}\-[\d]{2}\-[\d]{2}/)){ if(match.length){ tmp = match[0].split('-'); } }else if(match = yyyymmdd.match(/[\d]{4}[\d]{2}[\d]{2}/)){ if(match.length){ tmp = [match[0].substr(0,4),match[0].substr(4,2),match[0].substr(6,2)]; } } if(!tmp || tmp.length < 3){ return null; } return new Date(Number(tmp[0]),Number(tmp[1])-1,Number(tmp[2]),0,0,0,0); }
textareaでtab
var addTabKeyEvent = function($textarea){ $textarea.on('keydown',function(e){ if(e.keyCode == 9){ e.preventDefault(); }else{ return; } var $this = $(this); var start = this.selectionStart; var v = $this.val(); $this.val(v.substring(0,start) + "\t" + v.substring(this.selectionEnd)); this.selectionStart = this.selectionEnd = start + 1; }); }; addTabKeyEvent($('textarea'));
deep-link.js
aタグタップでアプリ起動 > 無ければストアへ遷移
サンプル:/js/69/
GitHub:https://github.com/timseverien/deep-link.js
サンプルにおける修正点1
最後に’;end’が付いてないと動かない端末がある
if(isAndroidBrowser) { return 'intent:' + app.split(':')[1] + '#Intent;scheme=' + scheme + ';package=' + store + ';S.browser_fallback_url=' + encodeURI(href)+';end'; }
サンプルにおける修正点2
var init = function(){ var elements = document.getElementsByTagName('a'), i = elements.length; while(i--) parseElement(elements[i]); }; document.addEventListener('DOMContentLoaded',function(){ init(); });
gulpfile.jsテンプレ
https://github.com/contra/gulp-concat
https://github.com/floridoo/gulp-sourcemaps
https://github.com/floatdrop/gulp-plumber
https://github.com/mikaelbr/gulp-notify
https://github.com/dlmanning/gulp-sass
https://github.com/chilijung/gulp-cssmin
https://github.com/hparra/gulp-rename
https://github.com/terinjokes/gulp-uglify
https://github.com/hustxiaoc/gulp-minify
https://github.com/OverZealous/run-sequence
// プラグイン読み込み var gulp = require('gulp'); var concat = require('gulp-concat');//ファイル結合 var sourcemaps = require('gulp-sourcemaps');//ソースマップ出力 var plumber = require('gulp-plumber');//エラーで処理を止めないためのプラグイン var notify = require('gulp-notify');//エラー時通知 var sass = require('gulp-sass');//sass var cssmin = require('gulp-cssmin');//css minify var rename = require('gulp-rename');//ファイル名変更 var uglify = require('gulp-uglify');//js minify&難読化 //var minify = require('gulp-minify'); var runSequence = require('run-sequence');//処理順序指定用 //js結合 gulp.task('js-concat', function() { return gulp.src(['./js.src/_intro.js', './js.src/_variable.js', './js.src/_common.js', './js.src/_model.js', './js.src/_view.article.js', './js.src/_outro.js']) .pipe(plumber({ errorHandler: notify.onError("Error[js-concat]: <%= error.message %>") })) .pipe(sourcemaps.init()) .pipe(concat('script.js')) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./js')); }); /* gulp.task('js-minify',function(){ return gulp.src(['./js/script.js']) .pipe(minify({ ext:{ min:'.min.js' }, compress: })) .pipe(gulp.dest('./js')); }); */ //js-concatの後に実行 gulp.task('js-uglify',['js-concat'], function() { return gulp.src(['./js/script.js']) .pipe(plumber({ errorHandler: notify.onError("Error[js-uglify]: <%= error.message %>") })) .pipe(sourcemaps.init()) .pipe(uglify({ mangle :false//変数名を変えない })) .pipe(rename({suffix:'.min'})) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./js')); }); gulp.task('sass', function(){ return gulp.src('./css.src/*.scss') .pipe(plumber({ errorHandler: notify.onError("Error[sass]: <%= error.message %>") })) .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./css')); }); //sassの後に実行 gulp.task('cssmin',['sass'], function(){ return gulp.src(['./css/override.css']) .pipe(plumber({ errorHandler: notify.onError("Error[cssmin]: <%= error.message %>") })) .pipe(cssmin()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./css')); }); // ファイルを監視して実行させる gulp.task('watch',function() { return gulp.watch(['js.src/*.js','./css.src/*.scss'],['build']); }); gulp.task('build', function(callback) { runSequence(['js-concat','js-uglify','sass','cssmin'], 'watch', callback); }); gulp.task('default',['build']);
concat + babel
var gulp = require("gulp"); var babel = require("gulp-babel"); var concat = require('gulp-concat'); var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); var notify = require('gulp-notify'); var runSequence = require('run-sequence'); var sourcemaps = require('gulp-sourcemaps'); var dir = './src/'; //結合 gulp.task('file-concat', function() { return gulp.src([ dir + 'parts.intro.es6', dir + 'class.A.es6', dir + 'class.B.es6', dir + 'class.C.es6', dir + 'class.D.es6', dir + 'class.E.es6', dir + 'init.A.es6', dir + 'parts.outro.es6' ]) .pipe(plumber({ errorHandler: notify.onError("Error[js-concat]: <%= error.message %>") })) .pipe(concat('meter.es6')) .pipe(gulp.dest(dir)); }); gulp.task('babel', function() { return gulp.src(dir + 'result.es6') .pipe(sourcemaps.init()) .pipe(babel({ presets: ['es2015-ie'] })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./')); }); gulp.task('watch', function() { return gulp.watch(dir + '*.es6', ['build']); }); gulp.task('build', function(callback) { return runSequence( 'file-concat', 'babel', 'watch', callback); }); gulp.task('default', ['build']);
汎用スムーススクロール
$('a[href^="#"]').click(function(e){ var $this = $(this); var id = $this.attr('href').split('#').pop(); var top = $('#'+id).offset().top; $('html,body').stop().animate({scrollTop:top},{duration:400}); return false; });
get OS version
function getiOSVersion(){ if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); return parseInt(parseInt(v[1], 10).toString()+parseInt(v[2], 10).toString()+parseInt(v[3] || 0, 10).toString() ,10); } return 0.0; } function getAndroidVersion(){ if( navigator.userAgent.indexOf("Android") > 0 ) { var v = navigator.userAgent.match(/Android [\d\.]+/)[0].split(' ').pop().split('.'); return parseInt(parseInt(v[0], 10).toString()+parseInt(v[1], 10).toString()+parseInt(v[2] || 0, 10).toString() ,10); } return 0.0; }
isArray
var isArray = function(target){ return getTypeString(target) == 'array'; }; var getTypeString = function(target){ if(target == null){ return "null"; } var toString = {}.toString; return (typeof target === "object" || typeof target === "function") ? toString.call(target).split(' ').pop().toLowerCase().replace(/\]/g,'') : typeof obj; };