[WIP] Create example of using ArteJS to build a blog

.gitignore

@@ -12,3 +12,4 @@
 /Pages
 *.user
 tests/dependencies
+*.DS_Store

Gruntfile.js

@@ -11,7 +11,10 @@ module.exports = function(grunt) {
                 jshintrc: true
             },
             gruntfile: ["Gruntfile.js"],
-            all: ["src/**/*.js"],
+            all: [
+                "src/**/*.js",
+                "examples/**/*.js"
+            ],
             tests: [
                 "tests/**/*.js",
                 "!tests/dependencies/**/*.js"

examples/blog/blog.css

@@ -0,0 +1,46 @@
+.blog
+{
+	background-color: #F0D8AA;
+	width: 75%;
+	margin: 0 auto;
+}
+
+.blog-post-content
+{
+	height: 100px;
+	width: 400px;
+	overflow: auto;
+	border: 1px solid black;
+	background-color: #EFEFEF;
+}
+
+.toolbar
+{
+	border: 1px dotted black;
+	width: 200px;
+}
+
+.btn-inner
+{
+	border: 1px solid black;
+	display: inline-block;
+	height: 18px;
+	width: 18px;
+	margin-right: 5px;
+	background: no-repeat center center;
+}
+
+.btn-inner.bold
+{
+   background-image: url("icons/text_bold.png");
+}
+
+.btn-inner.italic
+{
+   background-image: url("icons/text_italic.png");
+}
+
+.btn-inner.underline
+{
+   background-image: url("icons/text_underline.png");
+}

examples/blog/blog.js

@@ -0,0 +1,35 @@
+/* global BlogPost */ // from blogpost.js
+(function() {
+
+    var getBlogPostTitle = function(defaultTitle) {
+        var blogPostTitle;
+        if (defaultTitle !== undefined) {
+            blogPostTitle = defaultTitle;
+        } else {
+            var $newPostTitle = $("#new-post-title");
+            blogPostTitle = $newPostTitle.val();
+            $newPostTitle.val(""); // clear out for next post
+        }
+        return blogPostTitle;
+    };
+
+    var createNewBlogPost = function(defaultTitle, defaultText) {
+        var blogPostTitle = getBlogPostTitle(defaultTitle);
+        var blogPost = new BlogPost(blogPostTitle, defaultText);
+        blogPost.addToParentContainer($("#blog-posts"));
+    };
+
+    var initializePage = function() {
+        $("#add-button").click(function() {
+            return createNewBlogPost();
+        });
+
+        // Create an initial blog post
+        createNewBlogPost("Trying Sushi for the First Time",
+            "I can't believe I was eating raw fish but it was pretty tasty."
+        );
+    };
+
+    initializePage();
+
+})();

examples/blog/blogpost.js

@@ -0,0 +1,135 @@
+/* exported BlogPost */
+var BlogPost = function(title, defaultText) {
+
+    var $el; // jQuery object for this blog post
+
+    var createBlogPostContentHtml = function(title) {
+        var $blogPost = $("<div class=\"blog-post\"></div>");
+
+        var $blogPostTitle = $("<h2 class=\"blog-post-title\">" +
+            title + "</h2>");
+        $blogPost.append($blogPostTitle);
+
+        var $editButton = $("<button class=\"edit-button\">Edit</button>");
+        $blogPost.append($editButton);
+
+        var $blogPostContent = $("<div class=\"blog-post-content\"></div>");
+        $blogPost.append($blogPostContent);
+
+        return $blogPost;
+    };
+
+    var createBlogPostEditor = function() {
+        var $blogPostEditor = $("<div class=\"blog-post-editor\">");
+
+        var $saveButton = $("<button class=\"save-button\">Save</button>");
+        $blogPostEditor.append($saveButton);
+
+        var $toolbar = $("<div class=\"toolbar\"></div>");
+        $blogPostEditor.append($toolbar);
+
+        var $editor = $("<div class=\"editor\"></div>");
+        $blogPostEditor.append($editor);
+
+        return $blogPostEditor;
+    };
+
+    var createHtml = function(title) {
+        var $blogPost = createBlogPostContentHtml(title);
+
+        var $blogPostEditor = createBlogPostEditor();
+        $blogPost.append($blogPostEditor);
+
+        $blogPost.append("<hr>");
+
+        return $blogPost;
+    };
+
+    var createTextEditor = function() {
+        // Initialize and get a reference to the editor
+        $el.find(".editor").Arte({
+            editorType: $.Arte.constants.editorTypes.richText,
+            styles: { // default styles can be passed in as well
+                height: "100px",
+                width: "400px",
+                overflow: "auto",
+                border: "1px dashed gray"
+            }
+        });
+
+        // Initialize the toolbar
+
+        // TODO figure out why this is needed for the demo to work
+        $.Arte.Toolbar.configuration.requireEditorFocus = false;
+
+        var buttons = ["bold", "italic", "underline"];
+
+        $el.find(".toolbar").ArteToolbar({
+            buttons: buttons
+        });
+
+        // Hide the editor initially
+        $el.find(".blog-post-editor").hide();
+    };
+
+    var attachEditHandler = function() {
+        $el.find(".edit-button").click(function() {
+            var arte = $el.find(".editor").Arte();
+
+            $el.find(".blog-post-content").hide();
+            $el.find(".edit-button").hide();
+            $el.find(".blog-post-editor").show();
+            $el.find(".save-button").show();
+
+            // Set focus to the editor so the toolbar becomes enabled
+            arte.focus();
+
+            var blogPostContent = $el.find(".blog-post-content").html();
+            arte.get(0).value(blogPostContent);
+        });
+    };
+
+    var attachSaveHandler = function() {
+        $el.find(".save-button").click(function() {
+            var arte = $el.find(".editor").Arte();
+
+            var editorContent = arte.get(0).value();
+            $el.find(".blog-post-content").html(editorContent);
+
+            $el.find(".blog-post-editor").hide();
+            $el.find(".save-button").hide();
+            $el.find(".blog-post-content").show();
+            $el.find(".edit-button").show();
+        });
+    };
+
+    var attachEventHandlers = function() {
+        attachEditHandler();
+        attachSaveHandler();
+    };
+
+    var setDefaultText = function() {
+        if (defaultText !== undefined) {
+            $el.find(".blog-post-content").html(defaultText);
+        }
+    };
+
+    var initialize = function() {
+        createTextEditor();
+
+        attachEventHandlers();
+
+        setDefaultText();
+    };
+
+    this.addToParentContainer = function($parent) {
+        $el = createHtml(title);
+
+        $parent.prepend($el);
+
+        initialize();
+
+        return $el;
+    };
+
+};

examples/blog/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>
+			Blog built with ArteJS
+		</title>
+		<link rel="stylesheet" href="blog.css" />
+		<!-- <link rel="stylesheet" href="toolbar.css" /> -->
+	</head>
+	<body>
+		<div class="blog">
+			<h1>My Exciting Adventures</h1>
+
+			New Post Title: <input id="new-post-title">
+			<button id="add-button">Add New Post</button>
+
+			<div id="blog-posts"></div>
+		</div>
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
+		<script src="../../dist/arte.js" type="text/javascript"></script>
+		<script src="blogpost.js" type="text/javascript"></script>
+		<script src="blog.js" type="text/javascript"></script>
+	</body>
+</html>