takahashiakira
8/6/2015 - 1:43 AM
Utilitiy Moduels
Utilitiy Moduels
smoothScroll Module
スクロールアニメーションの設置
Module
/**
* smoothScroll Function Description v1.0.0
* @fileoverview スクロールアニメーションの設置
* 対応ブラウザはモダンブラウザ（IE8以上）
* jQuery依存
* @param {String} targetHref - 対象DOM要素のhref
*/
var smoothScroll = function (targetHref) {
var speed = 500;
var href;
if (targetHref){
href = targetHref;
}else {
href = $(this).attr('href');
}
var target = $(href === '#' || href === '' ? 'html' : href);
var position = target.offset().top;
$('html, body').animate({scrollTop : position}, speed, 'swing');
return this;
};
Usage
JS
$('a').on('click', function(){
smoothScroll();
});
getAndroidVersion Module
Androidのバージョンを取得
/**
* getAndroidVersion Function Description v1.0.0
* @fileoverview Androidのバージョンを取得
* @return {Number} - 2.4, 4.4, 5.1など
*/
var getAndroidVersion = function () {
var ua = navigator.userAgent;
if( ua.indexOf('Android') > 0 ){
var version = parseFloat(ua.slice(ua.indexOf('Android')+8));
return version;
}
};
Usage
JS
if(getAndroidVersion() < 3){
// Android2.X系以下の処理
}else if(getAndroidVersion() < 5){
// Android4.X系の処理
}else if(getAndroidVersion() > 5){
// Android5.X系以上の処理
}
flickEventHandler Module
フリックイベントのハンドリング処理を行うモジュール
Module
/**
* flickEventHandler Function Description v1.0.0
* @fileoverview フリックイベントのハンドリング処理を行うモジュール
* 対応ブラウザはモダンブラウザ（Android Browser 4.0-、iOS7- Safari）
*/
//
var flickEventHandler = function () {
/**
* Entory Point
* @param {Object}
* {Object} $el - 対象のjQuery Object
* {Object} flickLeftFunc - 左にflickした際のcallback関数
* {Array} flickRightFunc - 右にflickした際のcallback関数
*/
var $el = {};
var flickLeftFunc = function(){};
var flickRightFunc = function(){};
var init = function (el, flickLeftCallback, flickRightCallback) {
setEl(el);
flickLeftFunc = flickLeftCallback;
flickLeftFunc = flickRightCallback;
setEvents();
return this;
};
var setEl = function(el) {
$el = $(el);
return this;
};
var setEvents = function() {
var touchStartX = 0;
var touchMoveX = 0;
$el[0].addEventListener('touchstart', function() {
touchStartX = event.touches[0].pageX;
}, false);
$el[0].addEventListener('touchmove', function() {
touchMoveX = event.changedTouches[0].pageX;
}, false);
$el[0].addEventListener('touchend',function() {
if (touchStartX > touchMoveX) {
if (touchStartX > (touchMoveX + 100)) {
flickLeftFunc();
}
}else if (touchStartX < touchMoveX) {
if ((touchStartX + 100) < touchMoveX) {
flickRightFunc();
}
}
}, false);
return this;
};
return{
init: init,
flickLeftFunc: flickLeftFunc,
flickRightFunc: flickRightFunc
};
}();
Usage
JS
var flickLeftFunc = function(){...};
var flickRightFunc = function(){...};
flickEventHandler(tgtEl, flickLeftFunc, flickRightFunc);
controllCurrent Module
対象collectionの中のisCurrentの切り替え処理するメソッドを持ったモジュール
Module
/**
* controllCurrent Function Description v1.0.0
* @fileoverview 対象collectionの中のisCurrentの切り替え処理するメソッドを持ったモジュール
* 対応ブラウザはモダンブラウザ（IE8以上、Androidブラウザは不明）
*/
//
var controlCurrent = function () {
var isCurrent = 'isCurrent';
var init = function (collection) {
var i, len = collection.length;
for(i = 0; i < len; i++){
collection[i].set(isCurrent, false);
}
};
/**
* Entory Point
* @param {Object}
* {Object} model - currentになる対象のmodel
* {Array} collection - リセット対象のmodelの配列
*/
var addClass = function (model, collection) {
this.init(collection);
model.set(isCurrent, true);
return this;
};
return{
init: init,
addClass: addClass
};
}();
Usage
JS
var model = { isCurrent: false };
var collection = [model1, model2, model3];
controllCurrent.addClass(model, collection);
checkVal Module
一つでもinputに入力があればフラグを返す
Module
/**
* checkVal Function Description v1.0.0
* @fileoverview 一つでもinputに入力があればフラグを返す
* 対応ブラウザはモダンブラウザ（IE8以上）
* @param {Object} $tgt - 対象のinput/textareaのjQueryObject
* @return {Boolean} - inputに入力があればtrue、なければfalse
*/
var checkVal = function ($tgt) {
var flag = false;
$tgt.each(function () {
if($(this).val().length){
flag = true;
}
});
return flag;
};
Usage
JS
if(checkVal(tgtInput)){
// inputに入力がある場合の処理
}else{
// inputに入力がない場合の処理
}
checkUrl Module
文字列がURLかどうかチェック
Module
/**
* checkUrl Function Description v1.0.0
* @fileoverview 文字列がURLかどうかチェック
* 対応ブラウザはモダンブラウザ（IE8以上）
* @param {String} string - 対象の文字列
* @return {Boolean} - 文字列にhttp(s)://が含まれればtrue、それ以外はfalse
*/
var checkUrl = function(string) {
var urlReg = new RegExp('https?:\\/\\/.*');
if (string.match(urlReg)) {
return true;
}else{
return false;
}
};
Usage
JS
checkUrl(string);
checkTextLength Module
inputに文字がない場合はbuttonをdisabled
Module
/**
* checkTextLength Function Description v1.0.0
* @fileoverview inputに文字がない場合はbuttonをdisabled
* 対応ブラウザはモダンブラウザ（IE8以上）
* @param {Object} $input - 対象のinput/textareaのjQueryObject
* @param {Object} $btn - disabledを操作する対象のbuttonのjQueryObject
*/
var checkTextLength = function ($input, $btn) {
if($input.val().length > 0){
$btn.removeClass('is-disabled').prop('disabled', false);
}else{
$btn.addClass('is-disabled').prop('disabled', true);
}
return this;
};
Usage
JS
checkTextLength(tgtInput, tgtButton);
checkEnterKeyPress Module
エンターキーが押されたどうか確認する関数
Module
/**
* checkEnterKeyPress Dunction Description v1.0.0
* @fileoverview エンターキーを押した際のブラウザ毎のキーイベントを処理する関数。
* 対応ブラウザはモダンブラウザ（IE8以上、Androidブラウザは不明）
* @param {Object} e - jQueryイベントオブジェクト
* @return {boolean} キーイベントがエンターキーだった場合はtrue。それ以外はfalse
*/
//
var checkEnterKeyPress = function (e) {
var isConverting = false;
if(e.type === 'keydown') {
if (e.which === 229) {
//* 日本語入力時 */
isConverting = true;
}
}
if (e.which === 13) {
if(isConverting) {
//* 日本語変換確定時 */
isConverting = false;
} else if(e.type !== 'keyup') {
// Enterキー押下時
return true;
}
}
return false;
};
Usage
JS
$(tgtInput).on('keyup', function (e){
if(checkEnterKeyPress(e)){
// enterキーイベント処理
}
});