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

昨日に引き続き。

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

今回のお題は、

• その場編集機能を作れ
  • 要素の作成、追加、削除
  • こまめなフィードバックでストレスを感じさせないように
  • その場編集用 API の設計 jQuery、Ten といったフレームワークを使ってもよい

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

書いたコード

簡単な「その場編集」機能 - 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とかすごいんやなぁ・・って自分で実装してみて思う。

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

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

なんだか気持ち悪い

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