Finish up the creation page

scripts/app.js

@@ -30,6 +30,8 @@ app.controller("create", ["$scope", "$http",
         $scope.content = "";
         $scope.tags = [];
 
+        $scope.previewing = false;
+
         $scope.onSubmit = function()
         {
             // Create the post object
@@ -50,15 +52,28 @@ app.controller("create", ["$scope", "$http",
             $scope.content = "";
             $scope.tags = [];
 
-            // Tell the user that the deed is done *diabolical laughter*
+            alert("Post has been submitted.");
-            // alert("Post has been submitted. Thank you!");
         }
 
         $scope.onTagAdding = ($tag) =>
         {
             if (!$tag.text.startsWith("#"))
                 $tag.text = "#" + $tag.text;
-            return true;
+
+            return $scope.tags.indexOf($tag.text) === -1;
+        }
+
+        $scope.onPreview = () =>
+        {
+            $scope.previewing = !$scope.previewing;
+
+            // Update HTML on preview to avoid parsing for each character change
+            $scope.previewHtml = () =>
+            {
+                return $scope.content && $scope.previewing
+                        ? marked($scope.content)
+                        : "";
+            }
         }
     }
 ]);

styles/default.css

@@ -39,6 +39,23 @@ textarea
     font-family: Arial, Helvetica, sans-serif;
 }
 
+button
+{
+    font-weight: bold;
+
+    cursor: pointer;
+
+    color: #fff;
+    background-color: #000;
+}
+
+button:disabled
+{
+    cursor: default;
+
+    background-color: #888;
+}
+
 .centreColumn
 {
     position: relative;
@@ -243,13 +260,23 @@ textarea
     border: 0;
 }
 
+.createForm .title,
+.createForm .author
+{
+    border-bottom: 5px solid #0009;
+}
+
+.createForm .title:focus,
+.createForm .author:focus
+{
+    border-bottom: 5px solid #000f;
+}
+
 .createForm .title
 {
     float: left;
 
     width: calc(70% - 50px);
-
-    border-bottom: 5px solid #000;
 }
 
 .createForm .author
@@ -259,7 +286,6 @@ textarea
     width: 30%;
 
     color: #000;
-    border-bottom: 5px solid #000;
 }
 
 .createForm .titleAuthorSeparator
@@ -279,9 +305,13 @@ textarea
     background-color: #eee;
 }
 
-.createForm .content
+.createForm .content,
+.createForm .preview
 {
-    font-size: 12pt;
+    position: relative;
+
+    display: inline-block;
+    overflow-y: visible;
 
     width: calc(100% - 20px);
     height: calc(100vh - 387px - 100px);
@@ -292,10 +322,16 @@ textarea
 
     resize: vertical;
 
-    color: #000;
     border: 0;
 }
 
+.createForm .content
+{
+    font-size: 12pt;
+
+    color: #000;
+}
+
 .createForm .buttonContainer
 {
     width: 100%;
@@ -305,7 +341,6 @@ textarea
 .createForm button
 {
     font-size: 16pt;
-    font-weight: bold;
 
     display: inline-block;
     float: right;
@@ -317,9 +352,11 @@ textarea
     padding-right: 15px;
     padding-left: 15px;
 
-    cursor: pointer;
-
-    color: #fff;
     border: 0;
-    background-color: #000;
+}
+
+.createForm button.current
+{
+    /* color: #000;
+    background-color: #fff; */
 }

styles/ng-tags-input.css

@@ -20,7 +20,12 @@ tags-input .host
     margin-top: 5px;
     margin-bottom: 5px;
 
-    border-bottom: 5px solid #000;
+    border-bottom: 5px solid #0009;
+}
+
+tags-input .host:focus-within
+{
+    border-bottom: 5px solid #000f;
 }
 
 tags-input .host:active
@@ -37,23 +42,13 @@ tags-input .tags
 
     cursor: text;
     word-wrap: break-word;
-    /* border: 1px solid darkgray; */
 
     background-color: #fff;
-    /* box-shadow: 1px 1px 1px 0 lightgray inset; */
 
        -moz-appearance: textfield;
     -webkit-appearance: textfield;
 }
 
-/* tags-input .tags.focused
-{
-    outline: none;
-    -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
-       -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
-            box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
-} */
-
 tags-input .tags .tag-list
 {
     margin: 0;
@@ -75,17 +70,13 @@ tags-input .tags .tag-item
     padding: 0 5px;
 
     color: #fff;
-    /* border: 1px solid #acacac; */
-    /* border-radius: 3px; */
-    /* background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
-    background:         linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */
     background-color: #000;
 }
 
 tags-input .tags .tag-item.selected
 {
-    /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+    color: #000;
-    background:         linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */
+    background-color: #fff;
 }
 
 tags-input .tags .tag-item .remove-button
@@ -103,9 +94,19 @@ tags-input .tags .tag-item .remove-button
     background: none;
 }
 
+tags-input .tags .tag-item.selected .remove-button
+{
+    color: #0008;
+}
+
 tags-input .tags .tag-item .remove-button:active
 {
-    color: #f00;
+    color: #fff;
+}
+
+tags-input .tags .tag-item.selected .remove-button:active
+{
+    color: #000;
 }
 
 tags-input .tags .input
@@ -121,7 +122,6 @@ tags-input .tags .input
     padding-left: 5px;
 
     border: 0;
-    /* border-bottom: 5px solid #000; */
     outline: none;
 }
 

views/create.html

@@ -18,10 +18,11 @@
             placeholder="Add tags">
     </span>
     <br>
-    <textarea class="content" ng-model="content" placeholder="Post content.&#13;&#10;Markdown supported!" required></textarea>
+    <textarea class="content" ng-model="content" ng-hide="previewing" placeholder="Post content.&#13;&#10;Markdown supported!" required></textarea>
+    <div class="preview" ng-bind-html="previewHtml()" ng-show="previewing"></div>
     <br>
     <div class="buttonContainer">
-        <button type="submit">Submit</button>
+        <button type="submit" ng-disabled="previewing">Submit</button>
-        <button type="preview">Preview</button>
+        <button type="button" ng-class="{current: previewing}" ng-click="onPreview()">{{previewing ? 'Edit' : 'Preview'}}</button>
     </div>
 </form>