読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

また、はてな教科書のJavaScript課題をやってみた

jQuery JavaScript

昨日に引き続き。

参考:Hatena-Textbook/javascript-event-driven.md at master · hatena/Hatena-Textbook · GitHub

今回のお題は、

今回は一応できた、のかな?

書いたコード

簡単な「その場編集」機能 - jsdo.it - share JavaScript, HTML5 and CSS

JavaScript抜粋

(function() {
	var realtimeEdit = {
		container: $('.container'),
		init: function() {
			$('<button>', {
				text: 'Edit',
				class: 'btn edt'
			}).appendTo(this.container).css('float', 'right').hide();
			$('<button>', {
				text: 'Complete',
				class: 'btn cmp'
			}).appendTo(this.container).css('float', 'right').hide();
		},
		edit: function() {
			var btn = $(this).removeClass('edt').hide();
			btn.next().show();
			var tgtTitle = btn.parent().find('h2');
			var oldTitle = tgtTitle.text();
			var newTitle = $('<input>', {
				type: 'text',
				value: oldTitle,
				class: 'h2'
			});
			tgtTitle.html(newTitle);
			var tgtText = btn.parent().find('p');
			var oldText = tgtText.text();
			var newText = $('<textarea>', {
				value: oldText,
				class: 'p'
			});
			tgtText.html(newText);
		},
		complete: function() {
			var btn = $(this).hide();
			btn.prev().addClass('edt');
			var tgtTitle = btn.parent().find('input.h2');
			var oldTitle = tgtTitle.val();
			var newTitle = $('<h2>', {
				text: oldTitle
			});
			tgtTitle.parent().replaceWith(newTitle);
			var tgtText = btn.parent().find('textarea.p');
			var oldText = tgtText.val();
			var newText = $('<p>', {
				text: oldText
			});
			tgtText.parent().replaceWith(newText);
			var dateObj = new Date();
			var edited = "Posted at " + dateObj.getHours() + ":" + dateObj.getMinutes();
			btn.parent().find('small').text(edited);
		}
	};

	realtimeEdit.init();
	realtimeEdit.container.on('mouseover', function() {
		$(this).find('.btn.edt').show();
	});
	realtimeEdit.container.on('mouseout', function() {
		$(this).find('.btn.edt').hide();
	});
	realtimeEdit.container.find('.btn.edt').on('click', realtimeEdit.edit);
	realtimeEdit.container.find('.btn.cmp').on('click', realtimeEdit.complete);
}());

反省点

編集できる範囲に制限がありすぎる。

タイトルと、本文それぞれ1タグしか編集できない・・。
WordPressとかすごいんやなぁ・・って自分で実装してみて思う。

やっぱり設計がわからない。

最初に変数一個作ってそこで組んでいくとか、最初から関数を用意してやるとか、どこからどこまでがプロトタイプで拡張するとか、そういう勘所がまだまだわかりません。
ほんとどっかにお師匠さま・・。

なんだか気持ち悪い

機能別に関数を分けて定義するとか、見た目と裏の動きはそれぞれ分けるとか、それらしくやったつもりではいるものの、本当に良いのかどうとかわかりゃんせん!
というかボタンにつけたクラス名で色々判別するのってどうなんやろう。