DIR : /home/kozerus/public_html/jkwii/js/jsdoit/soda-todo/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/soda-todo

/*
//manifest.json
{
	"name":"soda todo",
	"version":"0.1",
    "icons": {
        "48": "icon.png",
        "128": "icon128.png"
    },
	"browser_action":{
		"default_popup":"popup.html",
		"default_icon":"icon.png"
	}

}
*/

window.resizeTo(500,300)

var ToDo = function(){
	//DOM 要素
	this.listBase = $('#todoList');
	this.listCell = this.listBase.find('li');
	this.listCellNow = this.listBase.find('.now');
	this.btnDelete = this.listBase.find('.delete');
	this.btnCheck = this.listBase.find('.check');

	//this.cellTop;
	//this.mouseY;
	this.starCount = 0;
	this.waterCount = 0;
	this.wrapHeight = $("#wrap").height();
	
	this.upStarMaker();
	
	this.dataNam;
	this.todoData = [];

	this.setup();
}


ToDo.prototype = {
    setup: function(){
		var that = this;
		
		this.loadData();
		
		this.editBtn();
		this.starMaker();
		this.waterMaker();
		this.cellPosition();
		this.waterAnime();
		
		setTimeout( function() {
			that.starAnime();
		}, 100);
		
	},
	
	loadData: function(){
		
		/*dammy data
		localStorage.setItem("dropTodoNam", 2);
		localStorage.setItem("dropTodo"+0, "aaaaa000");
		localStorage.setItem("dropTodoFlag"+0, 0);
		localStorage.setItem("dropTodo"+1, "aaaaa1111");
		localStorage.setItem("dropTodoFlag"+1, 1);
		*/
		//データがある
		if( !localStorage.dropTodoNam || localStorage.getItem("dropTodoNam") == 0){
			this.dataNam = 1;
			this.todoData = [{text:"start todo",check:0}];
		//データがない
		}else{
			this.dataNam = localStorage.getItem("dropTodoNam");
			for (i = 0; i < this.dataNam; i++){
				this.todoData.push({text:localStorage.getItem("dropTodo"+i),check:localStorage.getItem("dropTodoFlag"+i)});
			};
		};
		
		this.dataWrite();
	},
	
	saveData: function(){
		localStorage.setItem("dropTodoNam", this.dataNam);
		for (i = 0; i < this.dataNam; i++){
			localStorage.setItem("dropTodo"+i, this.todoData[i].text);
			localStorage.setItem("dropTodoFlag"+i, this.todoData[i].check);
		};
	},
	
	dataWrite: function(){
		
		var that = this;
		
		for (i = 0; i < this.dataNam; i++){
			$('#dammyList').clone()
				.removeAttr('id')
				.find('.text')
				.text(this.todoData[i].text)
				.end()
				.prependTo(that.listBase);
			
			if( this.todoData[i].check == 0){
				this.listBase.find('.edit').addClass('checked');
				this.listBase.find('.edit .delete').show();
			}else{
				this.listBase.find('.edit').addClass('new')
			};
			
			this.checkBtn(this.listBase.find(".edit").find('.check'));
			this.cellDelete(this.listBase.find(".edit").find('.delete'));
			this.listBase.find('.edit .check').show();
				
			that.listBase.find('.edit').slideDown(1000);
			
			that.listBase.find('.edit .check').fadeIn();
			that.listBase.find('.edit').removeClass('edit');
		};
		
		this.cellPosition();
	},
	
	//チェックボタンの動作
	checkBtn: function(btn){
		var that = this;
		btn.click(function () {
			
			var thisLi = $(this).closest('li');
			
			if(thisLi.hasClass('new')){
				thisLi.addClass('checked').removeClass('new');
				thisLi.find('.delete').fadeIn();
			}else{
				thisLi.addClass('new').removeClass('checked');
				thisLi.find('.delete').fadeOut();
			}
			
			setTimeout( function() {
				that.waterAnime();
			}, 500);
			
			that.starAnime();
			
			return false;
		});
	},
	
	//エディットボタンの動作
	editBtn: function(){
		
		var that = this;
		
		$('#editInput').keydown(function(e){
			if(e.keyCode == 13){
				$('#editBtn').click();
				return false;
			};
		});
		
		$('#editBtn').click(function () {
			var str = $('#editInput').val();
			
			if(str){

				$('#editInput').val('').attr('placeholder','new todo');

				that.starAnime();
				that.waterAnime();
				
				$('#dammyList').clone()
					.removeAttr('id')
					.find('.text')
						.text(str)
						.end()
					.prependTo(that.listBase);
					
				
				that.checkBtn(that.listBase.find('.edit .check'));
				that.cellDelete(that.listBase.find('.edit .delete'));
				
				that.cellPosition();
				
				that.listBase.find('.edit').slideDown(1000);
				
				setTimeout( function() {
					that.listBase.find('.edit .check').fadeIn();
					that.listBase.find('.edit').addClass('new').removeClass('edit');
				}, 500);
				
			}else{
				//エラーをplaceholderにひっそり入れる
				var pl = $('#editInput').attr('placeholder');
				
				if(pl == 'new todo'){
					$('#editInput').attr('placeholder','required!')
				}else{
					$('#editInput').attr('placeholder',pl+'!')
				}
			};
			
			return false;
		});
	},
	
	//リスト消去
	cellDelete: function(btn){
		
		var that = this;
		
		btn.click(function () {
			that.starAnime();
			that.waterAnime();
			
			var thisLi = $(this).closest('li');
			
			thisLi.addClass('delete').removeClass('todo').css('top',(that.wrapHeight)+"px");
			
			that.cellPosition();
			
			setTimeout( function() {
				thisLi.remove();
			}, 2500);
			
			return false;
		});
	},
	
	//リスト位置とデータの配列作成
	cellPosition: function(){
		this.dataNam = this.listBase.find('li.todo').size()
		var dataCount = this.listBase.find('li.todo').size();
		var pisition;
		
		for (i = 0; i < this.dataNam; i++){
			var thisLi = this.listBase.find('li.todo:eq('+i+')');
			
			thisLi.css('top', 45+(45*i) +'px').attr('data-nam',i);
			 
			var todoText = thisLi.find('span').text();
			var checkFlag = 0;
			if(thisLi.hasClass('new') || thisLi.hasClass('edit')){
				checkFlag = 1;
			}

			this.todoData[i] = {text:todoText,check:checkFlag};
		}
		
		this.todoData.reverse();
		
		this.listBase.height( 45*dataCount +'px');
		
		if((42*dataCount)+45+70 > 300){
			this.wrapHeight = (45*dataCount)+45+70;//$("#wrap").height();
		}else{
			this.wrapHeight = 300;
		}
		
		
		this.saveData();
	},

	
	//水アニメ
	waterAnime: function(){
		
		var that = this;
		setTimeout( function() {
			$('.w1').fadeIn().addClass('size2').removeClass('size1');
		}, 200);
		setTimeout( function() {
			$('.w2').fadeIn().addClass('size2').removeClass('size1');
		}, 700);
		setTimeout( function() {
			$('.w3').fadeIn().addClass('size2').removeClass('size1');
			that.waterMaker();
		}, 1200);
		
		var delWarter = that.waterCount;
		setTimeout( function() {
			$('.waterCount'+(delWarter)).remove();
		}, 3000);
		++this.waterCount;

	},

	//水を作成
	waterMaker: function(){
		for (i = 1; i < 4; i = i +1){
			var worer = '<div class="size1 w'+i+' waterCount'+this.waterCount+'" style="display:none;"></div>';
			$('#worter').append(worer);	
		}
	},
	
	//星アニメ
	starAnime: function(){
		
		var that = this;
		
		$('#star span').addClass('close').css('top',(this.wrapHeight+50)+"px");
		
		var delStar = that.starCount;
		setTimeout( function() {
			$('.starCount'+(delStar)).remove();
		}, 5000);
		++this.starCount;
		
		this.starMaker();
	},
	
	//星を作成
	starMaker: function(){
		for (i = 1; i < 19; i = i +1){
			var starRand = parseInt(Math.random()*5)
			var starText;
			
			if(starRand == 0){	starText = "*"}
			else if(starRand == 1){	starText = "+"}
			else if(starRand == 2){	starText = "｡"}
			else if(starRand == 3){	starText = "."}
			else if(starRand == 4){	starText = "＊"};
			
			var star = '<span class="s'+i+' starCount'+this.starCount+'" style="left:'+parseInt(Math.random()*300) +'px; top:'+ (-20-parseInt(Math.random()*100)) +'px;">'+starText+'</span>';
			$('#star').append(star);
		}
	},
	
	//星を作成
	upStarMaker: function(){
		var upStarRand = parseInt(Math.random()*700);
		var that = this;
		
		setTimeout( function() {
			
			var starRand = parseInt(Math.random()*5);
			var starText;
			
			var starMove = parseInt(Math.random()*6);
			
			if(starRand == 0){	starText = "o"}
			else if(starRand == 1){	starText = "O"}
			else if(starRand == 2){	starText = "｡"}
			else if(starRand == 3){	starText = "０"}
			else if(starRand == 4){	starText = "ｏ"};
			
			var star = '<span class="s'+starMove+'" style="left:'+parseInt(Math.random()*300) +'px; top:'+ (that.wrapHeight+50) +'px;">'+starText+'</span>';
			$('#upStar').append(star);
			
			setTimeout( function() {
				$('#upStar').find('span').addClass('close');
			}, 100);
			
			that.upStarMaker();
		}, upStarRand);
	}
	
}


$(function(){
	var letsTodo = new ToDo();
});