From c8eab703d468439a5b04dcfdeaf72db3eae4f966 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 9 Apr 2015 16:46:10 -0400 Subject: css and stuff --- themes/okadmin/public/js/upload.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index d9fd5ed..1c9094c 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -2,8 +2,7 @@ var OKUpload = { action: "/_services/image", - bind: function(){ - var el = document.getElementById("file") + bind: function(el){ if (! el) return el.addEventListener("change", OKUpload.handleFileSelect) }, -- cgit v1.2.3-70-g09d2 From b51455df828fde90edbee3143bd8d49b00cc3f1a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Apr 2015 14:04:10 -0400 Subject: single image upload field, abstract upload class a bit --- site/db.json | 6 +- site/index.js | 1 + site/public/assets/style.css | 3 +- site/templates/index.liquid | 2 + themes/okadmin/public/css/main.css | 25 +++++-- themes/okadmin/public/js/app.js | 93 +++++++++++++++++-------- themes/okadmin/public/js/upload.js | 91 +++++++++++------------- themes/okadmin/templates/partials/inputs.liquid | 52 +++++++++----- 8 files changed, 171 insertions(+), 102 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/site/db.json b/site/db.json index d0624e8..12ccb38 100644 --- a/site/db.json +++ b/site/db.json @@ -27,7 +27,11 @@ "caption": "CURABITUR BLANDIT TEMPUS PORTTITOR 4" } ], - "__index": "0" + "__index": "0", + "shape": { + "uri": "", + "caption": "" + } } ], "page": [ diff --git a/site/index.js b/site/index.js index 521b7d7..30e4a76 100644 --- a/site/index.js +++ b/site/index.js @@ -7,6 +7,7 @@ var projectSchema = { description: {type: 'text'}, video: {type: 'video'}, images: {type: 'captioned-image-list'}, + shape: {type: 'image'}, } var app = okcms.createApp({ diff --git a/site/public/assets/style.css b/site/public/assets/style.css index 3c2526b..28d0013 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -285,6 +285,7 @@ nav .middle { } nav .bottom { + height: 20%; width: 100%; background: #bbb; } @@ -489,7 +490,7 @@ nav .sub.active a { } .entry span div.content.noline { border-top: 0; - padding-top: 0px; + padding-top: 0; } .entry span div.content div { width:50%; diff --git a/site/templates/index.liquid b/site/templates/index.liquid index afb5de3..d18098c 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -110,9 +110,11 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends. {% endfor %} +
ABOUT
CONTACT
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index ec426f9..685e368 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -228,7 +228,9 @@ button, input[type=submit] { border: 0; display: none; } -.main.resource form .group.loaded input:first-child, +.main.resource form .group.image input, +.main.resource form .group.video input:first-child, +.main.resource form .group.loaded.video input[type=text], .main.resource form .group input:first-child { display: block; width: 25em; @@ -238,17 +240,24 @@ button, input[type=submit] { } .main.resource form .group.loaded input { display: block; - width: 20.05em; } -.main.resource form .group input { - display: none; +.main.resource form .group input[type=text] { + width: 20.05em; margin-bottom: 0.1em; } +.main.resource form .group.image .image-element, +.main.resource form .group.video input[type=text], .main.resource form .group.loaded input[hidden], +.main.resource form .group.image.loaded .fields, .main.resource form input[hidden] { display: none; } - +.main.resource form .group.image.loaded .image-element { + display: block; +} +.main.resource form .fields { + height: 3em; +} .main.resource form textarea { padding: 0.5em; height: 15em; @@ -280,6 +289,8 @@ button, input[type=submit] { width: 10em; max-height: 10em; border: 0; +} +.main.resource form .images img { cursor: -webkit-grab; cursor: grab; } @@ -313,10 +324,10 @@ button, input[type=submit] { margin: 0; padding: 0; cursor: pointer; } -li.image-element:hover .remove-image { +.image-element:hover .remove-image { display: block; } -li.image-element .remove-image:hover { +.image-element .remove-image:hover { color: red; } .remove-image { diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 22317f3..baa4873 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -1,38 +1,75 @@ var OKAdmin = function(){ - // initialize our (single) ajax image uploader with an element and a template - OKUpload.bind( document.getElementById("file") ) - OKUpload.add = function(data){ - var url = data[0].extra.Location - add_image(url) - } - - // also handle straight image urls - $("#add-image-url").keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })) + // initialize our multi-image uploader with an element and a template + $(".image-list").each(function(){ + var uploader = new OKUpload () + uploader.bind( $(".add-image-button input", this) ) + uploader.add = function(data){ + var url = data[0].extra.Location + add_image(url) + } + // also handle straight image urls + $(".add-image-url", this).keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + add_image(url) + })) + + // clone and populate template + function add_image(url){ + var imageTemplate = $("#captioned-image-template").html() + var $el = $(imageTemplate) + $el.find(".uri").val(url) + $el.find("img").attr("src", url) + $(".captioned-image-list ol").append($el) + } + }) + // delete image from gallery + $(document).on("mousedown", ".image-list .remove-image", function(){ + if (confirm("Delete this image?")) { + $(this).parent().remove() + } + }) - // clone and populate template - function add_image(url){ - var imageTemplate = $("#captioned-image-template").html() - var $el = $(imageTemplate) - $el.find(".uri").val(url) - $el.find("img").attr("src", url) - $(".captioned-image-list ol").append($el) - } + // initialize our single image uploader with existing DOM + $(".image").each(function(){ + var $el = $(this) + + var uploader = new OKUpload () + uploader.bind( $(".add-image-button input", this) ) + uploader.add = function(data){ + var url = data[0].extra.Location + add_image(url) + } + // also handle straight image urls + $(".add-image-url", this).keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + add_image(url) + })) + + // clone and populate template + function add_image(url){ + $el.find(".uri").val(url) + $el.find(".caption").val("") + $el.find("img").attr("src", url) + $el.addClass("loaded") + } + }) + // delete image from single image entry + $(document).on("mousedown", ".image .remove-image", function(){ + if (confirm("Delete this image?")) { + var $el = $(this).closest(".image") + $el.removeClass('loaded') + $el.find(".uri").val("") + $el.find(".caption").val("") + $el.find("img").attr("src", "") + } + }) // make the region sortable with drag-and-drop $(".captioned-image-list ol").sortable() $(".captioned-image-list ol").disableSelection() - - // delete image - $(document).on("mousedown", ".remove-image", function(){ - if (confirm("Delete this image?")) { - $(this).parent().remove() - } - }) // populate a video field with info from our url parser var last_url diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 1c9094c..39f7427 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -1,55 +1,48 @@ -var OKUpload = { - action: "/_services/image", - - bind: function(el){ - if (! el) return - el.addEventListener("change", OKUpload.handleFileSelect) - }, - - handleFileSelect: function(e) { - e.stopPropagation(); - e.preventDefault(); - - var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - - for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*')) { - continue; - } - OKUpload.upload(f) - } - }, +var OKUpload = function(){ + this.action = "/_services/image" +} +OKUpload.prototype.bind = function(el){ + if (el.length) el = el[0] + el.addEventListener("change", this.handleFileSelect.bind(this)) +} +OKUpload.prototype.handleFileSelect = function(e) { + e.stopPropagation(); + e.preventDefault(); - upload: function(f){ - var fd = new FormData() - fd.append('image', f) + var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - var request = $.ajax({ - url: OKUpload.action, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done(OKUpload.success) - }, - - success: function(media){ - if (media.error) { - console.log(media.error) - return + for (var i = 0, f; f = files[i]; i++) { + if ( ! f.type.match('image.*')) { + continue; } - OKUpload.add(media) - }, - - add: function(media){ - console.log(media) - }, - - error: function(error){ - throw error - }, + this.upload(f) + } +} +OKUpload.prototype.upload = function(f){ + var fd = new FormData() + fd.append('image', f) + var request = $.ajax({ + url: this.action, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done(this.success.bind(this)) +} +OKUpload.prototype.success = function(media){ + if (media.error) { + console.log(media.error) + return + } + this.add(media) +} +OKUpload.prototype.add = 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 253b275..c9a4d92 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -22,15 +22,48 @@ {% elsif type == 'video' %}
- - + +
+ {% elsif type == 'image' %} +
+
+
+ + +
+ +
+
+ + + {{spec.value.caption}} + +
+
{% elsif type == 'captioned-image-list' %} -
+
+
+
+ + +
+ +
+ + +
    {% for image in spec.value %}
  1. @@ -41,19 +74,6 @@
    2. {% endfor %}
-
- - -
- -
{% elsif type == 'meta' %} -- cgit v1.2.3-70-g09d2 From 3f26845f934e95a5c3f9486f83f715240347bbcd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Apr 2015 14:22:14 -0400 Subject: dry --- site/templates/index.liquid | 8 ++++---- themes/okadmin/public/js/app.js | 41 ++++---------------------------------- themes/okadmin/public/js/upload.js | 30 +++++++++++++++++++++------- 3 files changed, 31 insertions(+), 48 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/site/templates/index.liquid b/site/templates/index.liquid index d18098c..224803a 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -88,25 +88,25 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
retail
{% for project in retails %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
advertising
{% for project in advertisings %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
experiential
{% for project in experientials %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
content
{% for project in contents %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index baa4873..874b7e1 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -3,20 +3,8 @@ var OKAdmin = function(){ // initialize our multi-image uploader with an element and a template $(".image-list").each(function(){ var uploader = new OKUpload () - uploader.bind( $(".add-image-button input", this) ) - uploader.add = function(data){ - var url = data[0].extra.Location - add_image(url) - } - // also handle straight image urls - $(".add-image-url", this).keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })) - - // clone and populate template - function add_image(url){ + uploader.bind( this ) + uploader.add = function(url){ var imageTemplate = $("#captioned-image-template").html() var $el = $(imageTemplate) $el.find(".uri").val(url) @@ -36,20 +24,8 @@ var OKAdmin = function(){ var $el = $(this) var uploader = new OKUpload () - uploader.bind( $(".add-image-button input", this) ) - uploader.add = function(data){ - var url = data[0].extra.Location - add_image(url) - } - // also handle straight image urls - $(".add-image-url", this).keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })) - - // clone and populate template - function add_image(url){ + uploader.bind( this ) + uploader.add = function(url){ $el.find(".uri").val(url) $el.find(".caption").val("") $el.find("img").attr("src", url) @@ -173,15 +149,6 @@ var OKAdmin = function(){ $input.val(JSON.stringify(parsed)); }) }); - - function pressEnter(fn){ - return function(e){ - if (e.keyCode && e.keyCode !== 13) return - e.preventDefault() - console.log("hi") - fn.apply(this) - } - } } $(function(){ diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 39f7427..040654b 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -2,9 +2,14 @@ var OKUpload = function(){ this.action = "/_services/image" } -OKUpload.prototype.bind = function(el){ - if (el.length) el = el[0] - el.addEventListener("change", this.handleFileSelect.bind(this)) +OKUpload.prototype.bind = function(rapper){ + var uploader = this + $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) ) + $(".add-image-url", rapper).keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + uploader.add(url) + })) } OKUpload.prototype.handleFileSelect = function(e) { e.stopPropagation(); @@ -33,12 +38,13 @@ OKUpload.prototype.upload = function(f){ }) request.done(this.success.bind(this)) } -OKUpload.prototype.success = function(media){ - if (media.error) { - console.log(media.error) +OKUpload.prototype.success = function(data){ + if (data.error) { + console.log(data.error) return } - this.add(media) + var url = data[0].extra.Location + this.add(url) } OKUpload.prototype.add = function(media){ console.log(media) @@ -46,3 +52,13 @@ OKUpload.prototype.add = function(media){ OKUpload.prototype.error = function(error){ throw error } + + + +function pressEnter(fn){ + return function(e){ + if (e.keyCode && e.keyCode !== 13) return + e.preventDefault() + fn.apply(this) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 48923c16e00892fac916a83c8fdccca63800615f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Apr 2015 14:41:58 -0400 Subject: load shape images from posts --- site/db.json | 2 +- site/public/assets/javascripts/_env.js | 20 ++++++++++++-------- site/templates/index.liquid | 17 ++++++++--------- themes/okadmin/public/js/app.js | 10 ++++++---- themes/okadmin/public/js/upload.js | 4 ++-- 5 files changed, 29 insertions(+), 24 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/site/db.json b/site/db.json index 12ccb38..f1721a6 100644 --- a/site/db.json +++ b/site/db.json @@ -29,7 +29,7 @@ ], "__index": "0", "shape": { - "uri": "", + "uri": "http://okfocus.s3.amazonaws.com/2h/13.gif", "caption": "" } } diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index c4e9ace..b567a3d 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -7,8 +7,11 @@ environment.init = function(){ $("#scene").addClass("fade") var loader = new Loader(environment.ready, new HustleLoader) var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s }) - boxImages = $("#box-image-list").html().split("\n").filter(function(s){ return !!s }) - loader.preloadImages( preloadImages.concat(boxImages) ) + boxImages = $("#box-image-list").html().split("\n") + var postImages = $(".sub a").toArray().map(function(el){ return $(el).data("image") }) + + var images = preloadImages.concat(postImages).concat(boxImages).filter(function(s){ return !!s }) + loader.preloadImages( images ) loader.ready() } environment.ready = function(){ @@ -191,7 +194,7 @@ function build_scene () { controls.zoom(1000) strips.push( new Strip({ - images: boxImages.slice(0, 5), + images: $(".sub[data-type=advertising] a"), x: -100, y: 100, rotationY: PI/4, @@ -199,7 +202,7 @@ function build_scene () { }) ) strips.push( new Strip({ - images: boxImages.slice(5, 10), + images: $(".sub[data-type=retail] a"), x: 100, y: 100, rotationX: PI/4, @@ -208,7 +211,7 @@ function build_scene () { }) ) strips.push( new Strip({ - images: boxImages.slice(10, 15), + images: $(".sub[data-type=experiential] a"), x: 0, y: 100, z: 100, @@ -217,7 +220,7 @@ function build_scene () { }) ) strips.push( new Strip({ - images: boxImages.slice(15, 20), + images: $(".sub[data-type=content] a"), x: 0, y: 100, z: -50, @@ -455,9 +458,10 @@ var Strip = function( opt ){ root.addTo(scene) var prev = root - this.els = opt.images.map(function(url, i){ + this.els = opt.images.toArray().map(function(el, i){ + var data = $(el).data() var el = new MX.Image({ - src: url, + src: data.image, onload: function(img){ } }) diff --git a/site/templates/index.liquid b/site/templates/index.liquid index 224803a..db6bf20 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -86,27 +86,27 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
retail
-
+
{% for project in retails %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
advertising
-
+
{% for project in advertisings %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
experiential
-
+
{% for project in experientials %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
content
-
+
{% for project in contents %} - {{ project.menu }} + {{ project.menu }} {% endfor %}
@@ -238,7 +238,6 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends. + + + +
    + {% for image in spec.value %} + {% if image.token %} +
  1. + {{ JSON.stringify(spec.value) }} +
    2. + {% else %} +
  2. + + + {{image.caption}} + +
    3. + {% endif %} + {% endfor %} +
+
{% elsif type == 'captioned-image-list' %}
@@ -56,10 +105,10 @@
- +
- -- cgit v1.2.3-70-g09d2 From 56580705e3a62eaf1c498c1c0456fc33fe3b2f76 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 5 Apr 2016 14:05:35 -0400 Subject: broaden media support --- app/node_modules/okserver/index.js | 2 +- app/node_modules/okservices/oks3/index.js | 54 ++++++++++++++++++-- examples/db.json | 29 ++++++++++- examples/index.js | 5 ++ package.json | 2 +- themes/okadmin/public/css/main.css | 3 ++ themes/okadmin/public/js/app.js | 18 ++++++- themes/okadmin/public/js/parser.js | 31 +++++++++-- themes/okadmin/public/js/upload.js | 61 ++++++++++++++++------ themes/okadmin/templates/partials/inputs.liquid | 68 ++++++++++++++++++------- 10 files changed, 226 insertions(+), 47 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/app/node_modules/okserver/index.js b/app/node_modules/okserver/index.js index ee1b4fb..3428565 100644 --- a/app/node_modules/okserver/index.js +++ b/app/node_modules/okserver/index.js @@ -60,7 +60,7 @@ function OKServer(options) { app.use(router); // Add services if (services.s3) { - app.use('/_services/image', services.s3.middleware()); + app.use('/_services/s3', services.s3.middleware()); } if (services.twitter) { app.use('/_services/twitter', services.twitter.middleware()) diff --git a/app/node_modules/okservices/oks3/index.js b/app/node_modules/okservices/oks3/index.js index d556c20..dc0ca19 100644 --- a/app/node_modules/okservices/oks3/index.js +++ b/app/node_modules/okservices/oks3/index.js @@ -4,7 +4,7 @@ var skipperS3 = require('skipper-s3') // Hack to prevent this god-forsaken module from crashing our shit var d = require('domain').create() d.on('error', function (err) { - console.error('Stupid error in S3 upload. Image upload probably prematurely canceled') + console.error('Stupid error in S3 upload. Upload probably prematurely canceled') }) function OKS3(options) { @@ -20,9 +20,9 @@ function OKS3(options) { router.use(skipper()); - router.post('/', function(req, res) { - // req should have a method `file` on it which is - // provided by skipper. Use that to do AWS stuff + // req should have a method `file` on it which is + // provided by skipper. Use that to do AWS stuff + router.post('/image', function(req, res) { d.run(function () { req.file('image').upload({ adapter: skipperS3, @@ -38,7 +38,51 @@ function OKS3(options) { if (err) res.status(500).send(err) res.json(uploadedFiles); }); - }) + }); + }); + + router.post('/audio', function(req, res) { + d.run(function () { + if (! options.s3.allowAudioUploads) { + return res.status(500).json({ error: "audio uploading not permitted" }) + } + req.file('audio').upload({ + adapter: skipperS3, + key: options.s3.key, + secret: options.s3.secret, + bucket: options.s3.bucket, + dirname: options.s3.dirname, + maxBytes: options.s3.maxbytesAudio, + headers: { + 'x-amz-acl': 'public-read' + } + }, function (err, uploadedFiles) { + if (err) res.status(500).send(err) + res.json(uploadedFiles); + }); + }); + }); + + router.post('/video', function(req, res) { + d.run(function () { + if (! options.s3.allowVideoUploads) { + return res.status(500).json({ error: "video uploading not permitted" }) + } + req.file('video').upload({ + adapter: skipperS3, + key: options.s3.key, + secret: options.s3.secret, + bucket: options.s3.bucket, + dirname: options.s3.dirname, + maxBytes: options.s3.maxbytesVideo, + headers: { + 'x-amz-acl': 'public-read' + } + }, function (err, uploadedFiles) { + if (err) res.status(500).send(err) + res.json(uploadedFiles); + }); + }); }); this._middleware = router; diff --git a/examples/db.json b/examples/db.json index 1d045c3..3650355 100644 --- a/examples/db.json +++ b/examples/db.json @@ -174,7 +174,34 @@ "title": "Green", "__index": 1, "dateCreated": "Tue, 05 Apr 2016 15:17:57 GMT", - "media": [] + "media": [ + { + "type": "video", + "token": "https://ltho.s3.amazonaws.com/ee12b137-1c8a-400a-87e3-89cbee7b4da6.mp4", + "uri": "", + "width": "400", + "height": "400", + "title": "ee12b137-1c8a-400a-87e3-89cbee7b4da6.mp4", + "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + }, + { + "type": "youtube", + "token": "y_35kXCQxN4", + "uri": "", + "width": "640", + "height": "360", + "title": "dëf lëöpär¨d¨¨¨¨<>~!@~#!:I!@", + "thumb": "http://i.ytimg.com/vi/y_35kXCQxN4/hqdefault.jpg" + }, + { + "type": "audio", + "token": "http://asdf.us/clouds35.mp3", + "uri": "", + "duration": "225.645792", + "title": "clouds35.mp3", + "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + } + ] } ] } \ No newline at end of file diff --git a/examples/index.js b/examples/index.js index 81d9241..e9de0a3 100644 --- a/examples/index.js +++ b/examples/index.js @@ -40,6 +40,11 @@ var app = okcms.createApp({ key: process.env.S3_KEY, secret: process.env.S3_SECRET, bucket: process.env.S3_BUCKET, + allowVideoUploads: true, + allowAudioUploads: true, + maxsize: 200, + maxsizeVideo: 150000000, + maxsizeAudio: 150000000, } }, diff --git a/package.json b/package.json index c95a2bc..c3a7280 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "okcms", - "version": "0.1.24", + "version": "0.1.27", "description": "great", "main": "app/index.js", "scripts": { 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 @@ -52,6 +52,31 @@ var Parser = { tag: function (media) { return '
{% elsif type == 'image' %}
@@ -47,8 +47,8 @@
- - {{spec.value.caption}} + + {{spec.value.caption | escape}}
@@ -78,7 +78,7 @@ {% elsif type == 'tag-list' %}
@@ -90,13 +90,13 @@
@@ -142,8 +142,8 @@
- - + +
@@ -177,6 +177,23 @@ + + -- cgit v1.2.3-70-g09d2 From 180cf3eaa829fd04f759488d76641c4656caa245 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 11 Apr 2016 14:20:33 -0400 Subject: rewrite file upload code to use knox directly --- app/node_modules/okserver/index.js | 2 + app/node_modules/okservices/oks3/index.js | 136 +++++++++++++++----------- app/node_modules/okservices/oks3/package.json | 5 +- app/node_modules/okservices/oks3/upload.js | 80 +++++++++++++++ examples/index.js | 7 +- themes/okadmin/public/js/upload.js | 2 +- 6 files changed, 166 insertions(+), 66 deletions(-) create mode 100644 app/node_modules/okservices/oks3/upload.js (limited to 'themes/okadmin/public/js/upload.js') diff --git a/app/node_modules/okserver/index.js b/app/node_modules/okserver/index.js index 3428565..302911d 100644 --- a/app/node_modules/okserver/index.js +++ b/app/node_modules/okserver/index.js @@ -52,6 +52,8 @@ function OKServer(options) { * other middleware. */ + // Disable silly express header + app.disable('x-powered-by') // Serve user static files app.use(express.static(root)); // Serve admin interface static files diff --git a/app/node_modules/okservices/oks3/index.js b/app/node_modules/okservices/oks3/index.js index 34c5840..c636308 100644 --- a/app/node_modules/okservices/oks3/index.js +++ b/app/node_modules/okservices/oks3/index.js @@ -1,5 +1,5 @@ -var skipper = require('skipper'); -var skipperS3 = require('skipper-s3') +var upload = require("./upload") +var multer = require('multer') // Hack to prevent this god-forsaken module from crashing our shit var d = require('domain').create() @@ -20,7 +20,6 @@ function OKS3(options) { if (!options.s3.audio) options.s3.audio = {} if (!options.s3.video) options.s3.video = {} -/* // TODO: maxBytes property doesn't work - if you upload a large file, // it will just hang until you reload the browser, and then CRASH. @@ -34,85 +33,104 @@ function OKS3(options) { if (! ('maxbytes' in options.s3.audio)) options.s3.audio.maxbytes = options.s3.maxbytes } -*/ - if (options.s3.image.preserveFilename) - options.s3.image.preserveFilename = preserveFilename - if (options.s3.video.preserveFilename) - options.s3.video.preserveFilename = preserveFilename - if (options.s3.audio.preserveFilename) - options.s3.audio.preserveFilename = preserveFilename + if (typeof options.s3.image.allowed !== "boolean") + options.s3.image.allowed = true + if (typeof options.s3.video.allowed !== "boolean") + options.s3.video.allowed = false + if (typeof options.s3.audio.allowed !== "boolean") + options.s3.audio.allowed = false + + upload.init({ + key: options.s3.key, + secret: options.s3.secret, + bucket: options.s3.bucket, + }) var express = options.express; var router = express.Router(); - router.use(skipper()); + var mult = multer() - // req should have a method `file` on it which is - // provided by skipper. Use that to do AWS stuff - router.post('/image', function(req, res) { + router.post('/image', mult.single('image'), function(req, res) { d.run(function () { - var skip = req.file('image').upload({ - adapter: skipperS3, - key: options.s3.key, - secret: options.s3.secret, - bucket: options.s3.bucket, + + if (! options.s3.image.allowed) { + return res.status(500).json({ error: "Image uploading not permitted" }) + } + + upload.put({ + file: req.file, + preserveFilename: options.s3.image.preserveFilename, dirname: options.s3.dirname, - // maxBytes: options.s3.image.maxbytes, - saveAs: options.s3.image.preserveFilename, - headers: { - 'x-amz-acl': 'public-read' + types: { + 'image/gif': 'gif', + 'image/jpeg': 'jpg', + 'image/jpg': 'jpg', + 'image/png': 'png', + }, + unacceptable: function(err){ + res.json({ error: err }) + }, + success: function(url){ + res.json({ url: url }) } - }, function (err, uploadedFiles) { - if (err) return res.status(500).send(err) - res.json(uploadedFiles); - }); + }) + }); }); - router.post('/audio', function(req, res) { + router.post('/audio', mult.single('audio'), function(req, res) { d.run(function () { - if (! options.s3.allowAudioUploads) { - return res.status(500).json({ error: "audio uploading not permitted" }) + + if (! options.s3.image.allowed) { + return res.status(500).json({ error: "Audio uploading not permitted" }) } - req.file('audio').upload({ - adapter: skipperS3, - key: options.s3.key, - secret: options.s3.secret, - bucket: options.s3.bucket, + + upload.put({ + file: req.file, + preserveFilename: options.s3.audio.preserveFilename, dirname: options.s3.dirname, - // maxBytes: options.s3.audio.maxbytes, - saveAs: options.s3.audio.preserveFilename, - headers: { - 'x-amz-acl': 'public-read' + types: { + 'audio/mp3': 'mp3', + 'audio/mpeg': 'mp3', + 'audio/wav': 'wav', + 'audio/flac': 'flac', + }, + unacceptable: function(err){ + res.json({ error: err }) + }, + success: function(url){ + res.json({ url: url }) } - }, function (err, uploadedFiles) { - if (err) res.status(500).send(err) - res.json(uploadedFiles); - }); + }) + }); }); - router.post('/video', function(req, res) { + router.post('/video', mult.single('video'), function(req, res) { d.run(function () { - if (! options.s3.allowVideoUploads) { - return res.status(500).json({ error: "video uploading not permitted" }) + + if (! options.s3.image.allowed) { + return res.status(500).json({ error: "Video uploading not permitted" }) } - req.file('video').upload({ - adapter: skipperS3, - key: options.s3.key, - secret: options.s3.secret, - bucket: options.s3.bucket, + + upload.put({ + file: req.file, + preserveFilename: options.s3.video.preserveFilename, dirname: options.s3.dirname, - // maxBytes: options.s3.video.maxbytes, - saveAs: options.s3.video.preserveFilename, - headers: { - 'x-amz-acl': 'public-read' + types: { + 'video/mp4': 'mp4', + 'video/webm': 'webm', + }, + unacceptable: function(err){ + res.json({ error: err }) + }, + success: function(url){ + res.json({ url: url }) } - }, function (err, uploadedFiles) { - if (err) res.status(500).send(err) - res.json(uploadedFiles); - }); + }) + }); }); diff --git a/app/node_modules/okservices/oks3/package.json b/app/node_modules/okservices/oks3/package.json index 19a2d2a..35bb4ce 100644 --- a/app/node_modules/okservices/oks3/package.json +++ b/app/node_modules/okservices/oks3/package.json @@ -9,7 +9,8 @@ "author": "OKFocus", "license": "None", "dependencies": { - "skipper": "^0.5.9", - "skipper-s3": "^0.5.6" + "knox": "^0.9.2", + "multer": "^1.1.0", + "node-uuid": "^1.4.7", } } diff --git a/app/node_modules/okservices/oks3/upload.js b/app/node_modules/okservices/oks3/upload.js new file mode 100644 index 0000000..6b16d61 --- /dev/null +++ b/app/node_modules/okservices/oks3/upload.js @@ -0,0 +1,80 @@ + +var knox = require('knox') +var moment = require('moment') +var uuid = require('node-uuid') + +var s3 + +var acceptableuploadTypes = { + 'image/gif': 'gif', + 'image/jpeg': 'jpg', + 'image/jpg': 'jpg', + 'image/png': 'png', +} + +module.exports = {} + +module.exports.init = function (opt){ + s3 = knox.createClient({ + key: opt.key, + secret: opt.secret, + bucket: opt.bucket, + }) +} + +module.exports.put = function (opt) { + var filename + var err + var now = new Date() + + var file = opt.file + + var types = opt.types || acceptableuploadTypes + var extension = types[file.mimetype] + + if (opt.preserveFilename) { + filename = file.originalname + } + else { + filename = uuid.v1() + "." + extension; + } + + var remote_path = "/" + opt.dirname + "/" + filename + + if (! extension) { + err = "Unacceptable filetype." + } + else if (opt.maxSize && file.size > opt.maxSize) { + err = "File too large. Uploads can be a maximum of " + opt.maxSize + " bytes." + } + + if (err) { + console.error(">>>", err) + opt.unacceptable && opt.unacceptable(err) + return + } + + opt.acceptable && opt.acceptable(err) + + // console.log("upload >", remote_path) + s3.putBuffer(file.buffer, remote_path, { + 'Content-Length': file.size, + 'Content-Type': file.mimetype, + 'x-amz-acl': 'public-read' + }, function(err, s3res) { + if (err || s3res.statusCode !== 200) { + console.error(err); + if (s3res && s3res.resume) { + s3res.resume() + } + return; + } + + var file_url = s3res.url || s3res.req.url + + opt.success && opt.success(file_url) + }).on('error', function(err, s3res){ + console.error(err) + s3res && s3res.resume && s3res.resume() + }) +} diff --git a/examples/index.js b/examples/index.js index fe37954..31ae8d2 100644 --- a/examples/index.js +++ b/examples/index.js @@ -42,10 +42,9 @@ var app = okcms.createApp({ secret: process.env.S3_SECRET, bucket: process.env.S3_BUCKET, dirname: "okcms-example", - // TODO: maxbytes stuff isn't working, need to change underlying module - image: { preserveFilename: false, maxbytes: 20000 }, - video: { preserveFilename: true, maxbytes: 0 }, - audio: { preserveFilename: true, maxbytes: 150000000 }, + image: { allowed: true, preserveFilename: false, maxbytes: 2*1024*1024 }, + video: { allowed: true, preserveFilename: true, maxbytes: 200*1024*1024 }, + audio: { allowed: true, preserveFilename: true, maxbytes: 100*1024*1024 }, } }, diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 44a34b5..da23b1b 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -167,7 +167,7 @@ OKUpload.prototype.success = function(data){ console.log(data.error) return } - var url = data[0].extra.Location.replace(/%2F/, '\/') + var url = data.url console.log(url) this.parse(url) } -- cgit v1.2.3-70-g09d2 From 5922279561c1998a3e158c26f951348f4c031928 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 14 Apr 2016 14:17:00 -0400 Subject: support adding custom services per-project --- app/index.js | 42 ++++++++++++++++++------------- app/node_modules/okserver/index.js | 11 +++----- app/node_modules/okservices/oks3/index.js | 3 --- package.json | 5 ++-- themes/okadmin/public/js/upload.js | 3 --- 5 files changed, 32 insertions(+), 32 deletions(-) (limited to 'themes/okadmin/public/js/upload.js') diff --git a/app/index.js b/app/index.js index 1a8f97e..7fd88f4 100644 --- a/app/index.js +++ b/app/index.js @@ -94,19 +94,30 @@ function OKCMS(options) { errorHandler); // Create services - if (serviceConfig.s3) { - var s3Service = OKS3Service({ - express: express, - s3: serviceConfig.s3, - }); - } - - if (serviceConfig.twitter) { - var twitterService = OKTwitterService({ - express: express, - credentials: serviceConfig.twitter, - }) - } + var services = {} + Object.keys(serviceConfig).forEach(function(key){ + var config = serviceConfig[key] + switch (key) { + case 's3': + services.s3 = OKS3Service({ + express: express, + s3: config, + }); + break + case 'twitter': + services.twitter = OKTwitterService({ + express: express, + credentials: config, + }); + break + default: + services[key] = config.lib({ + express: express, + config: config, + }); + break + } + }); var server = this._server = new OKServer({ express: express, @@ -117,10 +128,7 @@ function OKCMS(options) { root: root, adminRoot: adminRoot, adminPath: adminPath, - services: { - s3: s3Service, - twitter: twitterService, - }, + services: services, errorHandler: errorHandler }); } diff --git a/app/node_modules/okserver/index.js b/app/node_modules/okserver/index.js index 302911d..a89676f 100644 --- a/app/node_modules/okserver/index.js +++ b/app/node_modules/okserver/index.js @@ -52,7 +52,7 @@ function OKServer(options) { * other middleware. */ - // Disable silly express header + // Disable x-powered-by express header app.disable('x-powered-by') // Serve user static files app.use(express.static(root)); @@ -61,12 +61,9 @@ function OKServer(options) { // Application router app.use(router); // Add services - if (services.s3) { - app.use('/_services/s3', services.s3.middleware()); - } - if (services.twitter) { - app.use('/_services/twitter', services.twitter.middleware()) - } + Object.keys(services).forEach(function(key){ + app.use('/_services/' + key, services[key].middleware()); + }) // Make sure this lady is last. Checks whether the desired // route has a trailing-slash counterpart and redirects there app.use(slash()); diff --git a/app/node_modules/okservices/oks3/index.js b/app/node_modules/okservices/oks3/index.js index c636308..cc40b71 100644 --- a/app/node_modules/okservices/oks3/index.js +++ b/app/node_modules/okservices/oks3/index.js @@ -20,9 +20,6 @@ function OKS3(options) { if (!options.s3.audio) options.s3.audio = {} if (!options.s3.video) options.s3.video = {} - // TODO: maxBytes property doesn't work - if you upload a large file, - // it will just hang until you reload the browser, and then CRASH. - // Make sure maxbytes property is there - it can be a number, // or zero/undefined (for no maximum upload size) if (options.s3.maxbytes) { diff --git a/package.json b/package.json index 2a927d5..bd5719b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "okcms", - "version": "0.1.30", + "version": "0.1.31", "description": "great", "main": "app/index.js", "scripts": { @@ -13,7 +13,8 @@ "dotenv": "^1.1.0", "express": "^4.12.3", "object-assign": "^2.0.0", - "q": "^1.2.0" + "q": "^1.2.0", + "request": "^2.71.0" }, "devDependencies": { "grunt": "^0.4.5", diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index da23b1b..6ff7ac9 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -177,9 +177,6 @@ OKUpload.prototype.add = function(media){ OKUpload.prototype.addMedia = function(media){ console.log(media) } -OKUpload.prototype.addAudio = function(media){ - console.log(media) -} OKUpload.prototype.error = function(error){ throw error } -- cgit v1.2.3-70-g09d2