making the image button of the editor actually add all the info needed, and made the images clickable for the full size

adding an image-selected feature. uses are wip
2017-07-16 18:30:04 -07:00 · 2017-07-14 15:35:25 -07:00
10 changed files with 19038 additions and 17836 deletions
@@ -94,8 +94,14 @@

 .cm-tab { display: inline-block; text-decoration: inherit; }

+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
 .CodeMirror-ruler {
  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
  position: absolute;
 }

@@ -206,9 +212,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
 }
 .CodeMirror-gutter-wrapper {
  position: absolute;
@@ -226,11 +229,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  cursor: default;
  z-index: 4;
 }
-.CodeMirror-gutter-wrapper {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

 .CodeMirror-lines {
  cursor: text;
@@ -252,8 +252,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
  word-wrap: break-word;
@@ -275,6 +275,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

 .CodeMirror-widget {}

+.CodeMirror-rtl pre { direction: rtl; }
+
 .CodeMirror-code {
  outline: none;
 }
@@ -297,7 +299,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  visibility: hidden;
 }

-.CodeMirror-cursor { position: absolute; }
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
 .CodeMirror-measure pre { position: static; }

 div.CodeMirror-cursors {
@@ -324,9 +329,6 @@ div.CodeMirror-dragcursors {
  background: rgba(255, 255, 0, .4);
 }

-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
 /* Used to force a border model for a node */
 .cm-force-border { padding-right: .1px; }

@@ -47,7 +47,7 @@ function taskBrowserify(opts) {
 		.bundle();
 }

-gulp.task("browserify:debug", ["lint"], function() {
+gulp.task("browserify:debug", [], function() {
 	return taskBrowserify({debug:true, standalone:"SimpleMDE"})
 		.pipe(source("simplemde.debug.js"))
 		.pipe(buffer())
@@ -55,7 +55,7 @@ gulp.task("browserify:debug", ["lint"], function() {
 		.pipe(gulp.dest("./debug/"));
 });

-gulp.task("browserify", ["lint"], function() {
+gulp.task("browserify", [], function() {
 	return taskBrowserify({standalone:"SimpleMDE"})
 		.pipe(source("simplemde.js"))
 		.pipe(buffer())
@@ -63,7 +63,7 @@ gulp.task("browserify", ["lint"], function() {
 		.pipe(gulp.dest("./debug/"));
 });

-gulp.task("scripts", ["browserify:debug", "browserify", "lint"], function() {
+gulp.task("scripts", ["browserify:debug", "browserify"], function() {
 	var js_files = ["./debug/simplemde.js"];
 	
 	return gulp.src(js_files)
@@ -635,11 +635,14 @@ function drawImage(editor) {
 	var stat = getState(cm);
 	var options = editor.options;
 	var url = "http://";
-	if(options.promptURLs) {
+	if(options.imageURLFn) {
+		url = options.imageURLFn();
+	} else if(options.promptURLs) {
 		url = prompt(options.promptTexts.image);
-		if(!url) {
-			return false;
-		}
+	}
+
+	if(!url) {
+		return false;
 	}
 	_replaceSelection(cm, stat.image, options.insertTexts.image, url);
 }
@@ -245,6 +245,7 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 	<head><style>
 	iframe { height: 100%; }
 	.img { display: inline-block; text-align: center; max-width: 19.9vw; min-height: 120px;}
+	.img.selected { background-color: lightblue; }
 	.copy { cursor: pointer; }
 	@media (max-width: 800px) {
 		.img {
@@ -278,7 +279,7 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 				fmt.Fprintf(w, `<div class="img">error rendering %q: %v</div>`, m.Name, err)
 				continue
 			}
-			fmt.Fprintf(w, `<div class="img"><img width=%d height=%d src=%q /><br /><input type="text" readonly value=%q /><span class="copy">&#x1F4CB;</span></div>`, size.Dx(), size.Dy(), src, src)
+			fmt.Fprintf(w, `<div class="img"><img width=%d height=%d src=%q data-filename=%q /><br /><input type="text" readonly value=%q /><span class="copy">&#x1F4CB;</span></div>`, size.Dx(), size.Dy(), src, m.Name, src)
 		}
 	}
 	io.WriteString(w, `<script>
@@ -290,6 +291,16 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 			evt.target.previousSibling.select();
 			document.execCommand("copy");
 		}
+		if (evt.target.tagName === "IMG") {
+			var current = document.querySelector(".img.selected");
+			if (current) {
+				current.classList = "img";
+			}
+			evt.target.parentElement.classList = "img selected";
+			if (window.parent) {
+				window.parent.postMessage(evt.target.dataset.filename, location.origin);
+			}
+		}
 	}
 	document.querySelector('body').onmouseup = function (evt) {
 		if (evt.target.tagName === "INPUT" && evt.target.type === "text") {
@@ -216,8 +216,22 @@ a {
 	 }
    }

+    var selectedImage;
    var editorElem = document.getElementById("editor");
-    var editor = new SimpleMDE({element: editorElem, forceSync: true});
+    var editor = new SimpleMDE({
+	    element: editorElem,
+	    forceSync: true,
+	    insertTexts: {
+		    image: ["{\{% thumb filename=\"", "#url#\" width=\"200\" %}}"]
+	    },
+	    imageURLFn: function () {
+		    return selectedImage;
+	    }
+    });
+
+    window.onmessage = function (evt) {
+	    selectedImage = evt.data;
+    }


    // Create WebSocket connection.
Author	SHA1	Message	Date
stephen	ab6152cbfa	making the image button of the editor actually add all the info needed, and made the images clickable for the full size	2017-07-16 18:30:04 -07:00
stephen	5897b6874d	adding an image-selected feature. uses are wip	2017-07-14 15:35:25 -07:00