summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Gruntfile.js2
-rw-r--r--app/node_modules/okadminview/index.js1
-rw-r--r--site/db.json10
-rw-r--r--site/index.js3
-rw-r--r--site/public/assets/javascripts/_env.js8
-rw-r--r--site/public/assets/style.css29
-rw-r--r--site/templates/page.liquid4
-rw-r--r--site/templates/project.liquid16
-rw-r--r--themes/okadmin/public/css/main.css17
-rw-r--r--themes/okadmin/public/js/app.js58
-rw-r--r--themes/okadmin/public/js/upload.js15
-rw-r--r--themes/okadmin/templates/partials/inputs.liquid72
12 files changed, 193 insertions, 42 deletions
diff --git a/Gruntfile.js b/Gruntfile.js
index 73fb8f7..4a522a6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -88,5 +88,5 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-dentist');
// Default task(s).
- grunt.registerTask('default', ['dentist', 'concat', 'uglify', 'copy', 'clean']);
+// grunt.registerTask('default', ['dentist', 'concat', 'uglify', 'copy', 'clean']);
};
diff --git a/app/node_modules/okadminview/index.js b/app/node_modules/okadminview/index.js
index 82f364d..2a0fcd5 100644
--- a/app/node_modules/okadminview/index.js
+++ b/app/node_modules/okadminview/index.js
@@ -157,6 +157,7 @@ function OKAdminView(options) {
resourceMissingHandler(req, res)()
} else {
view.renderResource(req, res, assign(data, {
+ JSON: JSON,
success: req.flash('success'),
errors: req.flash('errors')
}));
diff --git a/site/db.json b/site/db.json
index 1ada83f..591706f 100644
--- a/site/db.json
+++ b/site/db.json
@@ -16,7 +16,13 @@
"title": "",
"thumb": ""
},
- "images": [
+ "media": [
+ {
+ "type": "vimeo",
+ "token": "112498725",
+ "title": "FW14-2H-VIDEO-V4 2",
+ "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg"
+ },
{
"uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe22fd077-ca52-42a1-ab9c-e0508bf4408e.jpg",
"caption": ""
@@ -68,7 +74,7 @@
"title": "",
"thumb": ""
},
- "images": [
+ "media": [
{
"uri": "https://ltho.s3.amazonaws.com/twohustlers%2F38ea6ad0-f689-491f-857a-12d4fa0d4748.jpg",
"caption": ""
diff --git a/site/index.js b/site/index.js
index 8bb4b4d..3434742 100644
--- a/site/index.js
+++ b/site/index.js
@@ -5,8 +5,7 @@ var projectSchema = {
title: {type: 'string'},
menu: {type: 'string'},
description: {type: 'text'},
- video: {type: 'video'},
- images: {type: 'captioned-image-list'},
+ media: {type: 'media-list'},
thumbnail: {type: 'image'},
}
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 8c1270f..aae60b9 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -446,16 +446,14 @@ function build_gallery () {
// load_video($el)
}
else {
- next()
+ gallery.next()
}
})
- // $next.on("click", next)
- function next(){
- gallery.next()
- }
gallery.loader.on("progress", function(imagesLoaded, loadingImage){
$(loadingImage.img).addClass('loaded')
})
+ $(".nextbutton").click(function(){ gallery.next() })
+ $(".prevbutton").click(function(){ gallery.previous() })
}
function resize_gallery () {
if (! gallery) return;
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index f018d8d..8c7594d 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -405,7 +405,7 @@ nav .sub.active a {
height:auto;
position:relative;
width:100%;
- max-height:40px;
+ max-height:50px;
padding: 3px 0 5px 20px;
opacity:1;
-webkit-transform:translateY(0)scale(1)skew(0deg);
@@ -444,10 +444,35 @@ nav .sub.active a {
.postname {
border-bottom: 1px solid #999;
padding: 20px 0px 0.6em 2px;
- margin-bottom: 1em;
+ margin-bottom: 0.7em;
font-size: 1em;
+ text-transform: uppercase;
+}
+
+
+.galnav {
+ display: inline-block;
+ width: 100%;
+ float: left;
+ clear: both;
}
+.galnav span{
+ width: 50%;
+ background: #999;
+ color: white;
+ padding: 2px;
+ font-size: 11px;
+ transition:0.2s background;
+}
+.galnav .nextbutton{
+ text-align: right;
+ background: #888;
+ cursor:pointer;
+}
+.galnav span:hover {
+ background:black;
+}
.credit {
margin: 4em 0px 0px 0px;
diff --git a/site/templates/page.liquid b/site/templates/page.liquid
index 63f71f2..5c3cabe 100644
--- a/site/templates/page.liquid
+++ b/site/templates/page.liquid
@@ -2,6 +2,10 @@
<span>
{% if page.image %}
<span class="postname">{{page.title}}</span>
+ <div class="galnav">
+ <span class="prevbutton">PREVIOUS ASSET</span>
+ <span class="nextbutton">NEXT ASSET</span>
+ </div>
<img class="mainimg" src="{{page.image}}">
<div class="content">
{{page.body | newline_to_br}}
diff --git a/site/templates/project.liquid b/site/templates/project.liquid
index b54722d..0dc828c 100644
--- a/site/templates/project.liquid
+++ b/site/templates/project.liquid
@@ -1,13 +1,17 @@
<div class="entry">
<span>
<span class="postname">{{project.title}}</span>
-
+ <div class="galnav">
+ <span class="prevbutton">PREVIOUS ASSET</span>
+ <span class="nextbutton">NEXT ASSET</span>
+ </div>
<div class="gallery" id="okgallery">
- {% if project.video.token %}
- <div class="cell video" style="background-image:url({{ project.video.thumb }})" data-video="https://player.vimeo.com/video/{{ project.video.token }}" data-caption="{{ project.video.title }}"></div>
- {% endif %}
- {% for image in project.images %}
- <div class="cell" data-caption="{{ image.caption }}"><img src="{{ image.uri }}"></div>
+ {% for media in project.media %}
+ {% if media.token %}
+ <div class="cell video" style="background-image:url({{ media.thumb }})" data-video="https://player.vimeo.com/video/{{ media.token }}" data-caption="{{ media.title }}"></div>
+ {% else %}
+ <div class="cell" data-caption="{{ media.caption }}"><img src="{{ media.uri }}"></div>
+ {% endif %}
{% endfor %}
</div>
<div class="caption"></div>
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 747ec34..5dbd910 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -283,11 +283,11 @@ button, input[type=submit] {
list-style-type: none;
display: block;
clear: both;
- height: 10em;
+ height: 7em;
}
.main.resource form img {
width: 10em;
- max-height: 10em;
+ max-height: 6em;
border: 0;
}
.main.resource form .images img {
@@ -296,7 +296,10 @@ button, input[type=submit] {
}
.main.resource form textarea.caption {
width: 15em;
- height: 9em;
+ height: 6em;
+}
+.main.resource form .video-element input[type=text] {
+ width: 15em;
}
.add-image-button {
background: #ddd;
@@ -324,13 +327,15 @@ button, input[type=submit] {
margin: 0; padding: 0;
cursor: pointer;
}
-.image-element:hover .remove-image {
+.video-element:hover .remove,
+.image-element:hover .remove {
display: block;
}
-.image-element .remove-image:hover {
+.video-element .remove:hover,
+.image-element .remove:hover {
color: red;
}
-.remove-image {
+.remove {
display: none;
}
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index e981223..1eb81dc 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -2,23 +2,56 @@ var OKAdmin = function(){
// initialize our multi-image uploader with an element and a template
$(".group.image-list").each(function(){
+ var parent = this
var uploader = new OKUpload ()
uploader.bind( this )
uploader.add = function(url){
- var imageTemplate = $("#captioned-image-template").html()
+ var imageTemplate = $(".image-template", parent).html()
var $el = $(imageTemplate)
$el.find(".uri").val(url)
$el.find("img").attr("src", url)
- $(".captioned-image-list ol").append($el)
+ $("ol", parent).prepend($el)
}
})
// delete image from gallery
- $(document).on("mousedown", ".image-list .remove-image", function(){
+ $(document).on("mousedown", ".image-list .remove", function(){
if (confirm("Remove this image?")) {
$(this).parent().remove()
}
})
+ // initialize our multimedia uploader with an element and a template
+ $(".group.media-list").each(function(){
+ var parent = this
+ var uploader = new OKUpload ()
+ uploader.bind( this )
+ uploader.add = function(url){
+ var imageTemplate = $(".image-template", parent).html()
+ var $el = $(imageTemplate)
+ $el.find(".uri").val(url)
+ $el.find("img").attr("src", url)
+ $("ol", parent).prepend($el)
+ }
+ uploader.addVideo = function(media){
+ console.log(media)
+ var videoTemplate = $(".video-template", parent).html()
+ var $el = $(videoTemplate)
+ $el.addClass("loaded")
+ $el.find(".video-type").val( media.type )
+ $el.find(".video-token").val( media.token )
+ $el.find(".video-title").val( media.title )
+ $el.find(".video-thumb").val( media.thumbnail )
+ $el.find("img").attr("src", media.thumbnail )
+ $("ol", parent).prepend($el)
+ }
+ })
+ // delete image from gallery
+ $(document).on("mousedown", ".media-list .remove", function(){
+ if (confirm("Remove this media?")) {
+ $(this).parent().remove()
+ }
+ })
+
// initialize our single image uploader with existing DOM
$(".group.image").each(function(){
var $el = $(this)
@@ -35,7 +68,7 @@ var OKAdmin = function(){
}
})
// delete image from single image entry
- $(document).on("mousedown", ".image .remove-image", function(){
+ $(document).on("mousedown", ".image .remove", function(){
if (confirm("Remove this image?")) {
var $el = $(this).closest(".image")
$el.removeClass('loaded')
@@ -46,8 +79,8 @@ var OKAdmin = function(){
})
// make the region sortable with drag-and-drop
- $(".captioned-image-list ol").sortable()
- $(".captioned-image-list ol").disableSelection()
+ $(".media-list ol, .image-list ol").sortable()
+ $(".media-list ol, .image-list ol").disableSelection()
// populate a video field with info from our url parser
var last_url
@@ -94,14 +127,17 @@ var OKAdmin = function(){
$id.val( slug )
}
- $(".image-element").each(function(index){
- $(this).find("input,textarea").each(function(){
- var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]")
- $(this).attr("name", field)
+ $("ol").each(function(){
+ $("li", this).each(function(index){
+ $(this).find("input,textarea").each(function(){
+ var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]")
+ $(this).attr("name", field)
+ })
})
})
})
+ // delete individual records
$("#delete_form").submit(function(e){
if (confirm("Are you sure you want to delete this record?")) {
return
@@ -111,6 +147,7 @@ var OKAdmin = function(){
}
})
+ // reorder items in categories
$(".resource-category").on("click", ".edit-btn", function(e) {
e.preventDefault();
var $parent = $(e.delegateTarget);
@@ -142,6 +179,7 @@ var OKAdmin = function(){
}
});
+ // save new category order
$(".resource-category").on("submit", "form", function(e) {
var $parent = $(e.delegateTarget);
$parent.find(".resource-input").each(function(index) {
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index b4a0dfc..8d73dd5 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -5,11 +5,19 @@ var OKUpload = function(){
OKUpload.prototype.bind = function(rapper){
var uploader = this
$(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) )
- $(".add-image-url", rapper).on("keydown blur", pressEnter( function(e){
+ $(".add-url", rapper).on("keydown blur", pressEnter( function(e){
var url = $(this).val()
$(this).val("")
if (! url) return
- uploader.add(url)
+ Parser.parse( url, function(media){
+ console.log(url, media)
+ if (media.type == "image") {
+ uploader.add(url)
+ }
+ else {
+ uploader.addVideo(media)
+ }
+ })
}))
}
OKUpload.prototype.handleFileSelect = function(e) {
@@ -50,6 +58,9 @@ OKUpload.prototype.success = function(data){
OKUpload.prototype.add = function(media){
console.log(media)
}
+OKUpload.prototype.addVideo = function(media){
+ console.log(media)
+}
OKUpload.prototype.error = function(error){
throw error
}
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 4d31413..1b8d6b4 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -40,15 +40,75 @@
<input type="file" accept="image/*">
<button>+ Add image</button>
</div>
- <input class="add-image-url" type="text" placeholder="+ Add URL">
+ <input class="add-url" type="text" placeholder="+ Add URL">
</div>
<div class="image-element">
<input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
<textarea class="caption" name="{{name}}[caption]">{{spec.value.caption}}</textarea>
<img src="{{spec.value.uri}}" alt="{{spec.value.caption}}">
- <button class="remove-image">x</button>
+ <button class="remove">x</button>
</div>
</div>
+ {% elsif type == 'media-list' %}
+ <div class="media-list group loaded">
+ <div class="fields">
+ <div class="add-image-button">
+ <input type="file" accept="image/*" multiple>
+ <button>+ Add images</button>
+ </div>
+ <input class="add-url" type="text" placeholder="+ Add Image/Video URL">
+ </div>
+
+ <script type="text/html" class="image-template">
+ <li class="image-element">
+ <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+ <textarea class="caption" name="{{name}}[][caption]"></textarea>
+ <img>
+ <button class="remove">x</button>
+ </li>
+ </script>
+
+ <script type="text/html" class="video-template">
+ <li class="video-element">
+ <div style="float: left">
+ <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
+ <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
+ <label>Caption</label>
+ <input name="{{name}}[][title]" type="text" class="video-title">
+ <label>Thumbnail</label>
+ <input name="{{name}}[][thumb]" type="text" class="video-thumb">
+ </div>
+ <img>
+ <button class="remove">x</button>
+ </li>
+ </script>
+
+ <ol>
+ {% for image in spec.value %}
+ {% if image.token %}
+ <li class="video-element">
+ <div style="float: left">
+ <input name="{{name}}[][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
+ <input name="{{name}}[][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
+ <label>Caption</label>
+ <input name="{{name}}[][title]" value="{{image.title}}" type="text" class="video-title">
+ <label>Thumbnail</label>
+ <input name="{{name}}[][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
+ </div>
+ <img src="{{image.thumb}}">
+ <button class="remove">x</button>
+ </li>
+ {% else %}
+ <li class="image-element">
+ <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+ <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
+ <img src="{{image.uri}}" alt="{{image.caption}}">
+ <button class="remove">x</button>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ol>
+ </div>
{% elsif type == 'captioned-image-list' %}
<div class="image-list group loaded">
<div class="fields">
@@ -56,15 +116,15 @@
<input type="file" accept="image/*" multiple>
<button>+ Add images</button>
</div>
- <input class="add-image-url" type="text" placeholder="+ Add URL">
+ <input class="add-url" type="text" placeholder="+ Add URL">
</div>
- <script type="text/html" id="captioned-image-template">
+ <script type="text/html" class="image-template">
<li class="image-element">
<input class="uri" type="hidden" name="{{name}}[][uri]" value="">
<textarea class="caption" name="{{name}}[][caption]"></textarea>
<img alt="{{image.caption}}">
- <button class="remove-image">x</button>
+ <button class="remove">x</button>
</li>
</script>
@@ -74,7 +134,7 @@
<input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
<textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
<img src="{{image.uri}}" alt="{{image.caption}}">
- <button class="remove-image">x</button>
+ <button class="remove">x</button>
</li>
{% endfor %}
</ol>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-16 15:51:35 +0000