2 files changed, 82 insertions, 0 deletions
diff --git a/app/media/static/image-preview.js b/app/media/static/image-preview.js
new file mode 100644
index 0000000..b8fead5
--- /dev/null
+++ b/app/media/static/image-preview.js
@@ -0,0 +1,42 @@
+function build_image_preview () {
+    var url = window.location.href 
+    var cur = url.split('/')[6];
+    if (cur) {
+        var container = document.createElement("div");
+        container.className = "form-row field-image";
+        var wrapper = document.createElement("div");
+        var label = document.createElement("label");
+        label.textContent = "Image:";
+        var pwrap = document.createElement("p");
+        var img = document.createElement("img");
+
+        var request = new XMLHttpRequest();
+        request.open('GET', '/photos/luximage/data/admin/preview/'+cur+'/', true);
+        request.onload = function() {
+            if (request.status >= 200 && request.status < 400) {
+                var data = JSON.parse(request.responseText);
+                //console.log(data);
+                img.src = data['url'];
+            } else {
+                console.log("server error");
+            }
+        };
+        request.onerror = function() {
+            console.log("error on request");
+        };
+        request.send();
+        pwrap.appendChild(img);
+        wrapper.appendChild(label);
+        wrapper.appendChild(pwrap);
+        container.appendChild(wrapper);
+        parent = document.getElementById("luximage_form");
+        node = parent.children[1].children[0];
+        node.parentNode.insertBefore(container, node.previousSibling);
+    } else {
+        return;
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function(event) { 
+    build_image_preview();
+});
diff --git a/app/media/static/my_styles.css b/app/media/static/my_styles.css
new file mode 100644
index 0000000..d13c8e4
--- /dev/null
+++ b/app/media/static/my_styles.css
@@ -0,0 +1,40 @@
+
+/*o.v.*/
+
+#id_featured_image {
+    /*style the "box" in its minimzed state*/
+    border:1px solid black; width:230px; overflow:hidden;
+    height:300px; overflow-y:scroll;
+    /*animate collapsing the dropdown from open to closed state (v. fast)*/
+}
+#id_featured_image input {
+    /*hide the nasty default radio buttons. like, completely!*/
+    position:absolute;top:0;left:0;opacity:0;
+}
+
+
+#id_featured_image label {
+    /*style the labels to look like dropdown options, kinda*/
+    color: #000;
+    display:block;
+    margin: 2px 2px 2px 10px; 
+    height:102px; 
+    opacity:.6; 
+    background-repeat: no-repeat;
+}
+#id_featured_image:hover label{
+    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
+}
+#id_featured_image label:hover {
+    opacity:.8;
+}
+#id_featured_image input:checked + label {
+    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
+    opacity:1 !important; 
+    display:block;
+    background: #333;
+}
+
+/*pfft, nothing as cool here, just the value trace*/
+#trace {margin:0 0 20px;}
+#id_featured_image li:first-child { display: none;}