summaryrefslogtreecommitdiff
path: root/themes/okadmin
diff options
context:
space:
mode:
Diffstat (limited to 'themes/okadmin')
-rw-r--r--themes/okadmin/public/css/main.css3
-rw-r--r--themes/okadmin/public/js/app.js18
-rw-r--r--themes/okadmin/public/js/parser.js31
-rw-r--r--themes/okadmin/public/js/upload.js61
-rw-r--r--themes/okadmin/templates/partials/inputs.liquid68
5 files changed, 142 insertions, 39 deletions
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 2f2d376..15b8781 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -303,6 +303,7 @@ button, input[type=submit] {
width: 15em;
height: 6em;
}
+.main.resource form .audio-element input[type=text],
.main.resource form .video-element input[type=text] {
width: 15em;
}
@@ -353,10 +354,12 @@ button, input[type=submit] {
margin: 0; padding: 0;
cursor: pointer;
}
+.audio-element:hover .remove,
.video-element:hover .remove,
.image-element:hover .remove {
display: block;
}
+.audio-element .remove:hover,
.video-element .remove:hover,
.image-element .remove:hover {
color: red;
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index e79f704..a12f517 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -5,7 +5,8 @@ var OKAdmin = function(){
var parent = this
var uploader = new OKUpload ()
uploader.bind( this )
- uploader.add = function(url){
+ uploader.add = function(media){
+ var url = media.url
var imageTemplate = $(".image-template", parent).html()
var $el = $(imageTemplate)
$el.find(".uri").val(url)
@@ -46,7 +47,7 @@ var OKAdmin = function(){
$el.find("img").attr("src", url)
$("ol", parent).prepend($el)
}
- uploader.addVideo = function(media){
+ uploader.addMedia = function(media){
switch (media.type) {
case 'youtube':
case 'vimeo':
@@ -64,6 +65,19 @@ var OKAdmin = function(){
$el.find("img").attr("src", media.thumbnail )
$("ol", parent).prepend($el)
break
+ case 'audio':
+ var audioTemplate = $(".audio-template", parent).html()
+ var $el = $(audioTemplate)
+ $el.addClass("loaded")
+ $el.find(".audio-type").val( media.type )
+ $el.find(".audio-token").val( media.token )
+ $el.find(".audio-uri").val( media.uri )
+ $el.find(".audio-title").val( media.title )
+ $el.find(".audio-thumb").val( media.thumbnail )
+ $el.find(".audio-duration").val( media.duration )
+ $el.find("img").attr("src", media.thumbnail )
+ $("ol", parent).prepend($el)
+ break
case 'link':
var linkTemplate = $(".link-template", parent).html()
var $el = $(linkTemplate)
diff --git a/themes/okadmin/public/js/parser.js b/themes/okadmin/public/js/parser.js
index b4a087d..4ab9a6c 100644
--- a/themes/okadmin/public/js/parser.js
+++ b/themes/okadmin/public/js/parser.js
@@ -53,6 +53,31 @@ var Parser = {
return '<video src="' + media.url + '">';
}
}, {
+ type: 'audio',
+ regex: /\.(wav|mp3)(\?.*)?$/i,
+ fetch: function(url, done) {
+ var audio = document.createElement("audio")
+ var url_parts = url.replace(/\?.*$/, "").split("/")
+ var filename = url_parts[ url_parts.length-1 ]
+ audio.addEventListener("loadedmetadata", function(){
+ var duration = audio.duration
+ audio = null
+ done({
+ url: url,
+ type: "audio",
+ token: url,
+ thumbnail: "http://okfocus.s3.amazonaws.com/misc/okcms/audio.png",
+ title: filename,
+ duration: duration,
+ })
+ })
+ audio.src = url
+ audio.load()
+ },
+ tag: function (media) {
+ return '<audio src="' + media.url + '">';
+ }
+ }, {
type: 'youtube',
regex: /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,
fetch: function(url, done) {
@@ -116,8 +141,7 @@ var Parser = {
// return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
}
- },
- {
+ }, {
type: 'soundcloud',
regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i,
fetch: function (url, done) {
@@ -128,13 +152,14 @@ var Parser = {
+ '&client_id='
+ '0673fbe6fc794a7750f680747e863b10',
success: function(result) {
- // console.log(result)
+ console.log(result)
done({
url: url,
type: "soundcloud",
token: result.id,
thumbnail: result.artwork_url || result.user.avatar_url,
title: result.user.username + " - " + result.title,
+ duration: result.duration,
width: 166,
height: 166,
})
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index cfc1199..2ce14ad 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -1,6 +1,8 @@
var OKUpload = function(){
- this.action = "/_services/image"
+ this.action = this.imageAction = "/_services/s3/image"
+ this.videoAction = "/_services/s3/video"
+ this.audioAction = "/_services/s3/audio"
}
OKUpload.prototype.bind = function(rapper){
var uploader = this
@@ -14,18 +16,25 @@ OKUpload.prototype.bind = function(rapper){
$(".add-url", rapper).on("keydown blur", pressEnter( function(e){
var url = $(this).val()
$(this).val("")
- if (! url) return
- Parser.parse( url, function(media){
- console.log(url, media)
- if (media.type == "image") {
- uploader.add(url)
- }
- else {
- uploader.addVideo(media)
- }
- })
+ uploader.parse(url)
}))
}
+OKUpload.prototype.parse = function(url){
+ if (! url) return
+ var uploader = this
+ Parser.parse( url, function(media){
+ console.log(url, media)
+ if (! media) {
+ alert("Not a valid link")
+ }
+ else if (media.type == "image") {
+ uploader.add(media)
+ }
+ else {
+ uploader.addMedia(media)
+ }
+ })
+}
OKUpload.prototype.handleFileSelect = function(e) {
e.stopPropagation();
e.preventDefault();
@@ -33,13 +42,29 @@ OKUpload.prototype.handleFileSelect = function(e) {
var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
for (var i = 0, f; f = files[i]; i++) {
- if ( ! f.type.match('image.*')) {
+ if ( ! f.type.match('image.*') && ! f.type.match('video.*') ) {
continue;
}
this.upload(f)
}
}
OKUpload.prototype.upload = function(f){
+
+ var field, action
+
+ if ( f.type.match('video.*') ) {
+ field = 'video'
+ action = this.videoAction
+ }
+ else if ( f.type.match('audio.*') ) {
+ field = 'audio'
+ action = this.audioAction
+ }
+ else {
+ field = 'image'
+ action = this.imageAction || this.action
+ }
+
this.xhrCount += 1
this.$progress.addClass("loading")
@@ -51,10 +76,10 @@ OKUpload.prototype.upload = function(f){
this.$progress.append($loader)
var fd = new FormData()
- fd.append('image', f)
+ fd.append(field, f)
var request = new XMLHttpRequest()
- request.open("POST", this.action, true)
+ request.open("POST", action, true)
request.addEventListener("progress", updateProgress.bind(this));
request.addEventListener("load", transferComplete.bind(this));
@@ -77,6 +102,7 @@ OKUpload.prototype.upload = function(f){
this.success( responseData )
}
catch (e) {
+ console.log(request.responseText)
console.log("ERROR PARSING JSON")
}
}
@@ -121,12 +147,15 @@ OKUpload.prototype.success = function(data){
return
}
var url = data[0].extra.Location
- this.add(url)
+ this.parse(url)
}
OKUpload.prototype.add = function(media){
console.log(media)
}
-OKUpload.prototype.addVideo = function(media){
+OKUpload.prototype.addMedia = function(media){
+ console.log(media)
+}
+OKUpload.prototype.addAudio = function(media){
console.log(media)
}
OKUpload.prototype.error = function(error){
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index e618c61..0cd7f6b 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -9,14 +9,14 @@
{% if type == 'string' %}
<input
- name="{{name}}" type="text" value="{{spec.value}}">
+ name="{{name}}" type="text" value="{{spec.value | escape}}">
{% elsif type == 'text' %}
<textarea
- name="{{name}}">{{spec.value}}</textarea>
+ name="{{name}}">{{spec.value | escape}}</textarea>
{% elsif type == 'number' %}
<input
type="number"
- name="{{name}}" value="{{spec.value}}">
+ name="{{name}}" value="{{spec.value | escape}}">
{% elsif type == 'enum' or type == 'foreign-key' %}
<select
name="{{name}}">
@@ -32,9 +32,9 @@
<input name="{{name}}[width]" value="{{spec.value.width}}" type="hidden" class="video-width" hidden>
<input name="{{name}}[height]" value="{{spec.value.height}}" type="hidden" class="video-height" hidden>
<label>Title</label>
- <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
+ <input name="{{name}}[title]" type="text" value="{{spec.value.title | escape}}" class="video-title">
<label>Thumbnail</label>
- <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
+ <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb | escape}}" class="video-thumb">
</div>
{% elsif type == 'image' %}
<div class="image group {% if spec.value.uri %}loaded{% endif %}">
@@ -47,8 +47,8 @@
</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}}">
+ <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption | escape}}</textarea>
+ <img src="{{spec.value.uri}}" alt="{{spec.value.caption | escape}}">
<button class="remove">x</button>
</div>
</div>
@@ -78,7 +78,7 @@
{% elsif type == 'tag-list' %}
<div class="tag-list">
<input name="{{name}}"
- value="{{spec.value}}"
+ value="{{spec.value | escape}}"
placeholder="Enter a comma separated list of tags.">
</div>
@@ -90,13 +90,13 @@
<div class="handle"></div>
<input
name="{{name}}[{{forloop.index0}}][text]"
- value="{{link.text}}"
+ value="{{link.text | escape}}"
type="text"
placeholder="Link text"
class="link-input link-text">
<input
name="{{name}}[{{forloop.index0}}][uri]"
- value="{{link.uri}}"
+ value="{{link.uri | escape}}"
type="text"
placeholder="URL"
class="link-input link-uri">
@@ -142,8 +142,8 @@
<div class="media-list group loaded">
<div class="fields">
<div class="add-image-button">
- <input type="file" accept="image/*" multiple>
- <button>+ Add images</button>
+ <input type="file" accept="image/*,video/*,audio/*" multiple>
+ <button>+ Add media</button>
</div>
<input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL">
</div>
@@ -177,6 +177,23 @@
</li>
</script>
+ <script type="text/html" class="audio-template">
+ <li class="audio-element">
+ <div style="float: left">
+ <input name="{{name}}[][type]" type="hidden" class="audio-type" hidden>
+ <input name="{{name}}[][token]" type="hidden" class="audio-token" hidden>
+ <input name="{{name}}[][uri]" type="hidden" class="audio-uri" hidden>
+ <input name="{{name}}[][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+ <label>Caption</label>
+ <input name="{{name}}[][title]" type="text" class="audio-title">
+ <label>Thumbnail</label>
+ <input name="{{name}}[][thumb]" type="text" class="audio-thumb">
+ </div>
+ <img>
+ <button class="remove">x</button>
+ </li>
+ </script>
+
<script type="text/html" class="link-template">
<li class="link-element">
<input class="uri" type="text" name="{{name}}[][uri]" value="">
@@ -197,19 +214,34 @@
<input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
<input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
<label>Caption</label>
- <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title">
+ <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="video-title">
<label>Thumbnail</label>
<input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
</div>
<img src="{{image.thumb}}">
<button class="remove">x</button>
</li>
+ {% elsif image.type and (image.type == "audio" or image.type == "soundcloud") %}
+ <li class="audio-element">
+ <div style="float: left">
+ <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="audio-type" hidden>
+ <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="audio-token" hidden>
+ <input name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}" type="hidden" class="audio-uri" hidden>
+ <input name="{{name}}[{{forloop.index0}}][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+ <label>Caption</label>
+ <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="audio-title">
+ <label>Thumbnail</label>
+ <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="audio-thumb">
+ </div>
+ <img src="{{image.thumb}}">
+ <button class="remove">x</button>
+ </li>
{% elsif image.type and image.type == "link" %}
<li class="link-element">
<label>URL</label>
<input class="uri" type="text" name="{{name}}[][uri]" value="{{image.uri}}">
<label>Caption</label>
- <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption}}</textarea>
+ <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption | escape}}</textarea>
<input type="hidden" name="{{name}}[][type]" value="link">
<button class="remove">x</button>
</li>
@@ -217,7 +249,7 @@
<li class="image-element">
<label>Caption</label>
<input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
- <textarea class="caption" name="{{name}}[][caption]">{{image.caption}}</textarea>
+ <textarea class="caption" name="{{name}}[][caption]">{{image.caption | escape}}</textarea>
<input type="hidden" name="{{name}}[][type]" value="image">
<img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
<button class="remove">x</button>
@@ -249,7 +281,7 @@
{% for image in spec.value %}
<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>
+ <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
<img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
<button class="remove">x</button>
</li>
@@ -282,8 +314,8 @@
<img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
<button class="remove">x</button>
<input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
- <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}" placeholder="Name">
- <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption}}" placeholder="Email">
+ <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
+ <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}" placeholder="Email">
</li>
{% endfor %}
</ol>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:16:48 +0000