added media view to edit page

8 years ago · 733594be70
parent e959b41f2c
commit 733594be70
2 changed files with 46 additions and 9 deletions
--- a/media.go
+++ b/media.go
@ -222,15 +222,27 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int

 	io.WriteString(w, `<html>
 	<head><style>
-	.img { float: left; text-align: center; max-width: 19.9vw; min-height: 120px;}
+	iframe { height: 100%; }
+	.img { display: inline-block; text-align: center; max-width: 19.9vw; min-height: 120px;}
 	.copy { cursor: pointer; }
+	@media (max-width: 800px) {
+		.img {
+			width: 50%;
+			max-width: 50%;
+		}
+		body {
+			min-height: 300px;
+		}
+	}
 	</style></head>
 	<body>
-	<div style="position: fixed; top: 0; height: 10vh; width: 100%;">
-	<div style="float: left; width: 100%; height: 10vh;">
+	<div style="position: fixed; top: 0; height: 10vh; width: 100%; background-color: white;">
 	`)
 	io.WriteString(w, UploadPage("media"))
-	io.WriteString(w, "</div>")
+
+	io.WriteString(w, `</div>
+	<div style="display: inline-block; width: 100%; height: 10vh;"></div>
+	`)
 	if ch.Media != nil {
 		media, err := ch.Media.Walk()
 		if err != nil {
--- a/templates.go
+++ b/templates.go
@ -137,6 +137,11 @@ var EditPage = `<html>
 	width: 100%;
 	border: none;
 }
+a {
+	text-decoration: underline;
+	text-decoration-style: dotted;
+	cursor: pointer;
+}
 </style>
 <link rel="stylesheet" href="/hugo/simplemde.css" />
 <script src="https://unpkg.com/vue"></script>
@ -145,17 +150,38 @@ var EditPage = `<html>

 <body>
 <div id="container" >
+	<div id="header">
 		<div id="lastSaved">
 			<span v-if="ltime >serverLtime && (sendQueue.length > 0 || sentRecently.length > 0)">last saved ${ lastSaved.from(now) }, saving</span>
 			<span v-else>saved</span>
 			<span v-if="connectionError">, ${connectionError}</span>
 		</div>
+		<div>
+			<a id="sideview-toggle-media">media</a>
+			<a id="sideview-toggle-draft">draft</a>
+		</div>
+	</div>
 	<div id="editor-wrapper">
 		<textarea id="editor">{{ .LoadContent }}</textarea>
 	</div>
 	<div id="draft"><iframe src="{{ .IframeSource }}">Loading draft...</iframe></div>
 </div>
 <script>
+
+    var iframe = document.querySelector("#draft > iframe");
+
+    document.onclick = function (event) {
+	    var iframe = document.querySelector("#draft > iframe");
+	    switch (event.target.id) {
+	    case "sideview-toggle-media":
+		    iframe.src = "/hugo/media";
+		    break;
+	    case "sideview-toggle-draft":
+		    iframe.src = "{{ .IframeSource }}";
+		    break;
+	    }
+    }
+
    var uiBindings = {
 	    ltime: 0,
 	    serverLtime: 0,
@ -200,7 +226,6 @@ var EditPage = `<html>
    // Create WebSocket connection.
    var socket = connect();

-    var iframe = document.querySelector("#draft > iframe");

    const sawChangesBumpsTo = 10;