ko-se-line

README

こうせいしえん。あとhtml5的なもののお試し。

jsdoit.css

body { 
  background-color: white;
  color: #333333;
}
#Editor,#Article form{
  padding:1em;
}
.editor {
    display: inline;
	background-color: #cccccc;
	padding: 0.5em;
    border-left:solid 5px gray;
}
.editor.ui-draggable-dragging {
	box-shadow: 2px 5px 5px rgba(0,0,0,0.5);
}
.article {
    background-color: #ffeecc;
    padding: 1em; margin: 1em;
}
.article footer {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
}

jsdoit.html

<section id="Editor"></section>
<section id="Article"></section>

jsdoit.js

$(function () {
    koseline.Editor.prototype.el = function () {
		return function (self) {
          	return $("<div class='editor'></div>")
				.attr("id", self.id)
                .html(self.name)
              	.draggable();
		}(this);
    };

	koseline.Article.prototype.el = function () {
		return function (self) {
            return $("<div class='article'></div>")
				.attr("id", self.id)
              	.html(self.name)
                .droppable({
                    "drop": function (event, ui) { 
						var editor = koseline.Editor.id_to_obj(ui.draggable.attr("id"));

                        if (editor.history[0] == self.id) {	return 1; }
                        
						editor.kose(self.id);
						alert([
                            editor.name + "さんが" + self.name + "の校正に入りました。",
                            ,"",
							self.description()
                            ,"",
							editor.description()
                        ].join("\n"));
                        $("footer", this).html("  [校正: " + self.history.length + "人目]");
                    }
                })
                .append(
					$("<footer></footer>")
	                    .click(function () {
							alert(self.description());
                        })
                );
		}(this);
    };

    $("#Article").append(
        $("<form>article:<input name='name' type='text' /><input type='submit' value='追加' /></form>")
        	.submit(function (e) {
                e.preventDefault();
                koseline.Article.add(this.name.value);
                this.name.value = "";
            })
    );
    $("#Editor").append(
        $("<form>editor:<input name='name' type='text' /><input type='submit' value='追加' /></form>")
        	.submit(function (e) {
                e.preventDefault();
                koseline.Editor.add(this.name.value);
                this.name.value = "";
            })
    );
});

var strage = {
	"set": function (key, val) { },
	"get": function (key, val) { }
};

var koseline = {};

// Model: ArticleとEditorの共通部品
koseline.Model = function (name) {
	this.name = name;
	this.history = [];
};

koseline.Model.add = function (name) {
	var instance = new this(name);
    $("#" + this.className).append(instance.el());
    this.list.push(instance);
	this.save();
	return instance;
};

koseline.Model.save = function () {
	strage.set(this.className, this.list.join("\n"));
};

koseline.Model.id_to_obj = function (id) {
	var result = null;
	this.list.forEach(function (article) {
		if (article.id == id ) { result = article; }
	});
	return result;
};

// Article: 記事のクラス
koseline.Article = function (name) {
	this.name = name;
	this.id = "#article-" + name;
	this.history = [];
};
koseline.Article.__proto__ = koseline.Model;

koseline.Article.className = "Article";
koseline.Article.list = [];

koseline.Article.prototype.remove = function () {
	var result = [];
	var self = this;
	koseline.Article.list.forEach(function (article) {
		if (self.id != article.id) {
			result.push(article);
		}
	});
	koseline.Article.list = result;
	return result;
};

koseline.Article.prototype.description = function () {
    return [
        "[" + this.name + "の校正履歴]",
        (this.history.join(" < ").replace(/#editor-/g,"") || "なし")
    ].join("\n");
};


// Editor: 校正者のクラス
koseline.Editor = function (name) {
	this.name = name;
	this.id = "#editor-" + name;
	this.history = [];
};
koseline.Editor.__proto__ = koseline.Model;

koseline.Editor.className = "Editor";
koseline.Editor.list = [];

koseline.Editor.prototype.el = function () {};
koseline.Editor.prototype.kose = function (articleId) {
	var article = koseline.Article.id_to_obj(articleId);
	article.history.unshift(this.id);
	this.history.unshift(article.id);
};

koseline.Editor.prototype.now = function () {
	return this.history[0];
};

koseline.Editor.prototype.remove = function () {
	var result = [];
	var self = this;
	koseline.Editor.list.forEach(function (editor) {
		if (self.id != editor.id) {
			result.push(editor);
		}
	});
	koseline.Editor.list = result;
	return result;
};
    
koseline.Editor.prototype.description = function () {
    return [
        "[" + this.name + "さんの校正履歴]",
        (this.history.join(" < ").replace(/#article-/g,"") || "なし")
    ].join("\n");
};