triangles move onMove; code simplification

src/allplatforms/classes/WidthMarkers.js

@@ -11,9 +11,10 @@ SC.loadPackage({ 'WidthMarkers': {
 
     properties: {
 
+        editingContainer: { comment: 'I need a reference to the editingContainer.' },
+
         markerLeft:       { comment: 'My left marker'  },
         markerRight:      { comment: 'My right marker' },
-        editingContainer: { comment: 'I need a reference to the editingContainer.' },
 
         active:     { comment:      'Shall my markers be functional or not?',
                       transform:    function(aBoolean){
@@ -55,7 +56,10 @@ SC.loadPackage({ 'WidthMarkers': {
 
                 var widthMarkers = (new DOMParser()).parseFromString(this.class.get('markerContainers'), 'text/html').body,
                     markerLeft   = widthMarkers.childNodes.item(0),
-                    markerRight  = widthMarkers.childNodes.item(1);
+                    markerRight  = widthMarkers.childNodes.item(1),
+
+                    triangleLeft  = markerLeft.querySelector('.sg-editing-width-marker-left-triangle'),
+                    triangleRight = markerRight.querySelector('.sg-editing-width-marker-right-triangle');
 
                 this.set({ 
                     editingContainer:   editingContainer,
@@ -73,8 +77,10 @@ SC.loadPackage({ 'WidthMarkers': {
                             self.get('markerRight').classList.add('sg-editing-width-marker-right-visible');
                         }
 
-                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY + 'px';
-                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY + 'px';
+                        triangleLeft.style.top      = evt.pageY + 'px';
+                        triangleRight.style.top     = evt.pageY + 'px';
+                        triangleLeft.style.display  = 'block';
+                        triangleRight.style.display = 'block';
 
                     },
                     onMouseOut = function(evt){
@@ -82,12 +88,17 @@ SC.loadPackage({ 'WidthMarkers': {
                             self.get('markerLeft').classList.remove('sg-editing-width-marker-left-visible');
                             self.get('markerRight').classList.remove('sg-editing-width-marker-right-visible');
                         }
+                        if(!moving){
+                            triangleLeft.style.display  = 'none';
+                            triangleRight.style.display = 'none';
+                        }
                     },
 
                     startX   = 0,
                     minWidth = 0,
                     leftSide = false,
                     wasVisible = true,
+                    moving = false,
 
                     gridVisible,
 
@@ -99,6 +110,7 @@ SC.loadPackage({ 'WidthMarkers': {
                         SuperGlue.get('document').set({ interactionInProgress: true });
                         wasVisible = self.get('visible');
                         self.set({ visible: true });
+                        moving = true;
 
                         gridVisible = SuperGlue.get('document').get('grid').get('visible');
                         SuperGlue.get('document').get('grid').set({ visible: true });
@@ -129,6 +141,9 @@ SC.loadPackage({ 'WidthMarkers': {
                         var myDocument = SuperGlue.get('document');
                         myDocument.do('afterLayoutHasChanged');
                         myDocument.set({ interactionInProgress: false });
+                        moving = false;
+                        triangleLeft.style.display  = 'none';
+                        triangleRight.style.display = 'none';
                         
                         self.set({ visible: wasVisible });
                         self.get('markerLeft').classList.add('sg-editing-width-marker-left-visible');
@@ -168,6 +183,9 @@ SC.loadPackage({ 'WidthMarkers': {
                             }});
                         }
 
+                        triangleLeft.style.top      = evt.pageY + 'px';
+                        triangleRight.style.top     = evt.pageY + 'px';
+
                         evt.stopPropagation();
                         evt.preventDefault();
                     };

src/allplatforms/css/WidthMarkers.css

@@ -10,16 +10,6 @@
 	min-height: 	150px;
 }
 
-#sg-editing-width-marker-left .sg-editing-width-marker-left-triangle {
-	position: absolute;
-	margin-top: 	-15px;
-	left: 13px;
-	border-style: 	solid;
-	border-width: 	15px 0 15px 15px;
-	border-color: 	transparent transparent transparent rgb(255, 41, 61);
-	display: none;
-}
-
 #sg-editing-width-marker-right {
 	position: 		absolute;
 	pointer-events: all;
@@ -30,28 +20,32 @@
 	min-height: 	150px;
 }
 
+#sg-editing-width-marker-left .sg-editing-width-marker-left-triangle {
+	position: 		absolute;
+	margin-top: 	-15px;
+	left: 			13px;
+	border-style: 	solid;
+	border-width: 	15px 0 15px 15px;
+	border-color: 	transparent transparent transparent rgb(255, 41, 61);
+	display: 		none;
+}
+
 #sg-editing-width-marker-right .sg-editing-width-marker-right-triangle {
-	position: absolute;
+	position: 		absolute;
 	margin-top: 	-15px;
-	right: 13px;
+	right: 			13px;
 	border-style: 	solid;
 	border-width: 	15px 15px 15px 0;
 	border-color: 	transparent rgb(255, 41, 61) transparent transparent;
-	display: none;
+	display: 		none;
 }
 
 .sg-editing-width-marker-left-visible {
 	border-right: 2px dashed rgb(255, 41, 61);
 }
 
-#sg-editing-width-marker-left.sg-editing-width-marker-left-visible .sg-editing-width-marker-left-triangle {
-	display: block;
-}
 
 .sg-editing-width-marker-right-visible {
 	border-left: 2px dashed rgb(255, 41, 61);
 }
 
-#sg-editing-width-marker-right.sg-editing-width-marker-right-visible .sg-editing-width-marker-right-triangle {
-	display: block;
-}