Items Editor add sortable, confirm modal and star/ unstar functionality

Author: AramManukyan

bower.json

@@ -17,6 +17,7 @@
     "nprogress": "~0.2.0",
     "quill": "~0.20.1",
     "responsive-bootstrap-toolkit": "~2.5.0",
+    "Sortable": "~1.4.2",
     "tether": "~1.1.1",
     "tinycolor": "~1.2.1",
     "Watch.JS": "watch#*"
@@ -50,6 +51,12 @@
     "animate.css": {
       "main": "animate.css"
     },
+    "Sortable":{
+      "main": [
+        "Sortable.js",
+        "jquery.binding.js"
+      ]
+    },
     "quill": {
       "main": [
         "dist/quill.js",

src/app/forms/forms-page.hbs

@@ -67,9 +67,9 @@ images:
 											<i class="fa fa-arrows"></i>
 										</a><!--
 										--><a href="" class="control-btn star">
-											<i class="fa fa-star-o"></i>
+											<i class="fa"></i>
 										</a><!--
-										--><a href="" class="control-btn remove">
+										--><a href="#" class="control-btn remove" data-toggle="modal" data-target="#confirm-modal">
 											<i class="fa fa-trash-o"></i>
 										</a>
 									</div>

src/app/items/editor/item-editor-page.hbs

@@ -0,0 +1,24 @@
+$(function(){
+
+	// set sortable options
+	$('.images-container').sortable({
+		animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
+		handle: ".control-btn.move",  // Drag handle selector within list items
+		filter: ".new",  // Selectors that do not lead to dragging (String or Function)
+		draggable: ".image-container" // Specifies which items inside the element should be sortable
+	});
+
+	$controlsButtons = $('.controls');
+
+	$controlsButtonsStar = $controlsButtons.find('.star');
+	$controlsButtonsRemove = $controlsButtons.find('.remove');
+
+	$controlsButtonsStar.on('click',function(e){
+		e.preventDefault();
+
+		$controlsButtonsStar.removeClass('active')
+
+		$(this).addClass('active');
+	})
+
+})

src/app/items/editor/item-editor.js

@@ -73,6 +73,16 @@
 
 				&.star {
 					color: #FFB300;
+
+					i:before{
+						content: "\f006";
+					}
+
+					&.active {
+						i:before{
+							content: "\f005";
+						}
+					}
 				}
 
 				&.remove {