- Moved the getStateHash call into DocView

- state hash now uses only the values of the CM instances.
- Style fixes for the Share menu

Author: wdamien

index.html

@@ -247,6 +247,8 @@ <h1 class="tool-label"></h1>
                 <input type="text" id="shareLinkTxt" readonly>
                 <div data-clipboard-target="#shareLinkTxt" class="icon share-link-btn">&#xE603;</div>
             </div>
+        </div>
+
             <header>
                 Expression
             </header>
@@ -274,7 +276,6 @@ <h1 class="tool-label"></h1>
                 <div class="icon share-javascript-btn" data-clipboard-target="#shareJavascriptTxt">&#xE603;</div>
             </div>
         </div>
-	</div>
 
 	<div class="menu save">
 		<header>

js/net/ExpressionModel.js

@@ -25,7 +25,6 @@
 var EventDispatcher = require('../events/EventDispatcher');
 var ServerModel = require('./ServerModel');
 var Settings = require('../Settings');
-var Utils = require('../utils/Utils');
 
 var s = {};
 EventDispatcher.initialize(s);
@@ -45,12 +44,12 @@ s.savePattern = function (tags, name, pattern, content, replace, description, au
 };
 
 s.saveState = function () {
-	s._saveState = s.getStateHash();
+	s._saveState = s.docView.getStateHash();
 	s._lastId = null;
 };
 
 s.isDirty = function () {
-	var dirty = s._saveState !== s.getStateHash();
+	var dirty = s._saveState !== s.docView.getStateHash();
 	if (dirty && s.id) {
 		s._lastId = s.id;
 		s.id = null;
@@ -61,14 +60,6 @@ s.isDirty = function () {
 	return dirty;
 };
 
-s.getStateHash = function () {
-	var state =
-			s.docView.getExpression() +
-			s.docView.getText() +
-			JSON.stringify(s.docView.getState());
-	return Utils.getHashCode(state);
-};
-
 s.handleSaveSuccess = function (result) {
 	s.saveState();
 

js/views/DocView.js

@@ -37,6 +37,7 @@ var Tracking = require('../Tracking');
 var RegExLexer = require('../RegExLexer');
 var BrowserHistory = require('../BrowserHistory');
 var SubstLexer = require('../SubstLexer');
+var Utils = require('../utils/Utils');
 
 var Docs = require('../utils/Docs');
 var Graph = require('../utils/Graph');
@@ -385,6 +386,15 @@ p.getState = function () {
 	return state;
 };
 
+p.getStateHash = function() {
+	return Utils.getHashCode(
+		this.getExpression() +
+		this.getText() +
+		this.replaceCM.getValue() +
+		this.listCM.getValue()
+	);
+}
+
 p.showSave = function () {
 	this.saveTooltip.show();
 };

js/views/ShareMenu.js

@@ -119,47 +119,28 @@ p.createJavascriptCopy = function () {
 	}
 };
 
-p.createCopyLink = function (el, dataFunc) {
-	var _this = this;
-	return function () {
-		var client = new ZeroClipboard(el);
-		client.on('ready', function (event) {
-			client.on("copy", dataFunc);
-			client.on("aftercopy", $.bind(_this, _this.handleCopyComplete));
-		});
-	}();
-};
-
 p.show = function () {
 	Tracking.event("share", "show");
 
 	Utils.removeClass(this.saveView, "visible hidden");
 	Utils.removeClass(this.shareWrap, "visible hidden");
 
+	this.shareExpressionTxt.value = this.docsView.getExpression();
+	this.sharePatternTxt.value = this.docsView.getPattern();
+	this.shareJavascriptTxt.value = this.createJavascriptCopy();
+
 	if (!ExpressionModel.id) {
 		Utils.addClass(this.saveView, "visible");
 		Utils.addClass(this.shareWrap, "hidden");
 	} else {
 		this.shareLinkTxt.value = Utils.createURL($.createID(ExpressionModel.id));
 		Utils.addClass(this.saveView, "hidden");
 		Utils.addClass(this.shareWrap, "visible");
-
-		this.shareExpressionTxt.value = this.docsView.getExpression();
-		this.sharePatternTxt.value = this.docsView.getPattern();
-		this.shareJavascriptTxt.value = this.createJavascriptCopy();
-
-        // This was failing in Edge, with this error: "Could not complete the operation due to error 800a025e."
-        try {
-           // this.shareLink.focus();
-            //this.shareLink.select();
-        } catch (err) {
-
-        }
 	}
 };
 
 p.hide = function () {
-	clearTimeout(this._toastInt);
+
 };
 
 module.exports = ShareMenu;

scss/menus.scss

@@ -16,6 +16,38 @@
 		min-width: 10rem;
 	}
 
+    &.share {
+      min-width: 200px;
+
+      input[type="text"] {
+        @include calc("width", "100% - 0.375em*6");
+        float: left;
+      }
+
+      #savePrompt > p {
+        @include calc("margin-bottom", "-0.375em");
+      }
+
+      header:not(:first-child) {
+        @include calc("padding-top", "0.375em*4");
+      }
+
+      .public-wrap {
+        padding-top: .5rem;
+      }
+
+      .share-wrap {
+        width: 100%;
+      }
+
+      .icon {
+        @include calc("padding-top", "0.375em*2");
+        @include calc("padding-left", "100% - 0.375em*3");
+        @include calc("width", "100% - 0.375em*6");
+        cursor: pointer;
+      }
+    }
+
 	&.save, &.share {
 		label {
 			display: inline-block;
@@ -36,14 +68,6 @@
 			}
 		}
 
-        header:not(:first-child) {
-          @include calc("padding-top", "0.375em*4");
-        }
-
-	  	.public-wrap {
-		  padding-top: .5rem;
-		}
-
 	  	input[type="checkbox"] {
 	 	 width: 13px;
 	     height: 13px;
@@ -54,22 +78,6 @@
 	     top: -1px;
 		}
 
-        input[type="text"] {
-          @include calc("width", "100% - 0.375em*6");
-          float: left;
-        }
-
-        .share-wrap {
-          @include calc("width", "0.375em*36");
-        }
-
-        .icon {
-          @include calc("padding-top", "0.375em*2");
-          @include calc("padding-left", "100% - 0.375em*3");
-          @include calc("width", "100% - 0.375em*6");
-          cursor: pointer;
-        }
-
 		.update-button {
 		  position: absolute;
 		}
@@ -79,7 +87,7 @@
 			float: left;
 			padding-top: 0rem;
 
-			height: 0.0;
+			height: 0;
 			@include vendor-prefix(transition, height $default-transition-duration);
 		}