diff options
Diffstat (limited to 'themes/okadmin/public/js/app.js')
| -rw-r--r-- | themes/okadmin/public/js/app.js | 346 |
1 files changed, 309 insertions, 37 deletions
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 4b8d98f..9891298 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -1,61 +1,333 @@ var OKAdmin = function(){ - - OKUpload.bind() - OKUpload.add = function(data){ - var url = data[0].extra.Location - add_image(url) - } - 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) - } - $(".captioned-image-list ol").sortable() - $(".captioned-image-list ol").disableSelection() - - $("#add-image-url").keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })}) - - $(document).on("click", ".remove-image", function(){ - if (confirm("Delete this image?")) { + + // 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(media){ + var url = media.url + var imageTemplate = $(".image-template", parent).html() + var $el = $(imageTemplate) + $el.find(".uri").val(media.url) + $el.find(".image-width").val(media.width) + $el.find(".image-height").val(media.height) + $el.find("img").attr("src", media.url) + $("ol", parent).prepend($el) + } + }) + // delete image from gallery + $(document).on("mousedown", ".image-list .remove", function(){ + if (confirm("Remove this image?")) { $(this).parent().remove() } }) - - $(".video .url").keydown(pressEnter(function(){ + + // Add default date + $('.date input').each(function(i, el){ + var value = el.getAttribute('value') + if (!value) { + el.setAttribute('value', toDateInputValue(new Date)) + } + + function toDateInputValue (date) { + var local = new Date(date); + local.setMinutes(date.getMinutes() - date.getTimezoneOffset()); + return local.toJSON().slice(0,10); + } + }) + + // 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(media){ + var url = media.url + var imageTemplate = $(".image-template", parent).html() + var $el = $(imageTemplate) + $el.find(".uri").val(media.url) + $el.find(".image-width").val(media.width) + $el.find(".image-height").val(media.height) + $el.find("img").attr("src", media.url) + $("ol", parent).prepend($el) + } + uploader.addMedia = function(media){ + switch (media.type) { + case 'youtube': + case 'vimeo': + case 'video': + 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-uri").val( media.uri ) + $el.find(".video-title").val( media.title ) + $el.find(".video-thumb").val( media.thumbnail ) + $el.find(".video-width").val( media.width ) + $el.find(".video-height").val( media.height ) + $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) + $el.addClass("loaded") + $el.find(".uri").val( media.url ) + $("ol", parent).prepend($el) + break + default: + alert("Unsupported link type!") + } + } + }) + // 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) + var uploader = new OKUpload () + uploader.bind( this ) + uploader.add = function(media){ + console.log(media) + $el.find(".uri").val(media.url) + $el.find(".caption").val("") + $el.find(".image-width").val(media.width) + $el.find(".image-height").val(media.height) + $el.find("img").attr("src", media.url).show() + $el.addClass("loaded") + } + }) + // delete image from single image entry + $(document).on("mousedown", ".image .remove", function(){ + if (confirm("Remove this image?")) { + var $el = $(this).closest(".image") + $el.removeClass('loaded') + $el.find(".uri").val("") + $el.find(".image-width").val("") + $el.find(".image-height").val("") + $el.find(".caption").val("") + $el.find("img").attr("src", "") + } + }) + + // make the region sortable with drag-and-drop + $(".media-list ol, .image-list ol, .link-list .links").sortable() + $(".media-list ol, .image-list ol").disableSelection() + + // populate a video field with info from our url parser + var last_url + $(".video .url").on("focus", function(){ + var $el = $(this) + last_url = $el.val() + }) + $(".video .url").on("keydown blur", pressEnter(function(){ var $el = $(this) var url = $el.val() + if (url == last_url) { return } Parser.parse( url, function(media){ console.log(url,media) $el.parent().addClass("loaded") $el.parent().find(".video-type").val( media.type ) $el.parent().find(".video-token").val( media.token ) + $el.parent().find(".video-uri").val( media.url ) $el.parent().find(".video-title").val( media.title ) $el.parent().find(".video-thumb").val( media.thumbnail ) + $el.parent().find(".video-width").val( media.width ) + $el.parent().find(".video-height").val( media.height ) }) - }})) - - $("form").submit(function(){ - $(".image-element").each(function(index){ - $(this).find("input,textarea").each(function(){ - var field = $(this).attr("name").replace(/\[\]/, "[" + index + "]") - $(this).attr("name", field) + })) + + // Add a new link to the list + $('.link-list').on('click', '.add-link-btn', function addNewLink (e) { + e.preventDefault && e.preventDefault() + e.stopPropagation && e.stopPropagation() + var $delegate = $(e.delegateTarget) + var $list = $delegate.find('.links') + var linkCount = $list.find("li").length + + var $linkText = $delegate.find(".link-input-new.link-text") + var $linkURI = $delegate.find(".link-input-new.link-uri") + + var template = $delegate.find(".link-template").html() + template = template.replace(/\[\]/g, "[" + linkCount + "]") + var $el = $(template) + $el.find(".link-text").val( $linkText.val() ) + $el.find(".link-uri").val( $linkURI.val() ) + $list.append($el) + $linkText.val("") + $linkURI.val("") + }) + + // Remove a link from the list + $('.link-list').on('click', '.remove-link-btn', function(e) { + e.preventDefault() + e.stopPropagation() + var $target = $(e.target) + $target.closest("li").remove() + }) + + // fix post indexing in list-driven inputs + $(".main.resource form").submit(function(e){ + var $id = $("[name=id]"), $title = $("[name=title]"), $menu = $("[name=menu]"), $section = $(".resource.main") + var id = $section.data("id"), type = $section.data("type") + + if ($title.length && ! $title.val()) { + $title.focus() + alert("Please enter a title") + e.preventDefault() + return + } + + if ($menu.length && ! $menu.val()) { + $menu.val( $title.val() ) + } + + // TODO: pass through whether this page is static + if (type === "page" && (id == "contact" || id == "about")) { + ; + } + else { + var slug = slugify( $title.val() ) + $id.val( slug ) + } + + // Parse date input + $('.property .date').each(function(i, el) { + var name = $(el).parent('.property').data('name') + var $input = $(el).find('input') + var date = new Date($input.val()) + // Set to middle of day so it is the same date + // for all locales + date.setUTCHours(12) + var dateString = date.toUTCString() + var normalizedInput = document.createElement('input') + $(normalizedInput).attr({ + name: name, + type: 'text', + value: dateString + }) + $input.remove() + $(el).append(normalizedInput) + }) + + // Modify flags checkboxes such that unchecked ones return "false" + // instead of nothing + $('.property input[type=checkbox]').each(function(i, el) { + var checked = !!el.checked + if (!checked) { + el.value = 'false' + el.setAttribute('checked', true) + } + }) + + $(".link-list").each(function(){ + var $inputs = $(this).find(".link-input-new") + if ($inputs.eq(0).val() && $inputs.eq(1).val()) { + $(this).find(".add-link-btn").trigger("click") + } + }) + + $("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 + } + else { + e.preventDefault() + } + }) + + // reorder items in categories + $(".resource-category:not(.grouped)").on("click", ".edit-btn", function(e) { + e.preventDefault(); + var $parent = $(e.delegateTarget) + var $editBtn = $parent.find(".edit-btn"); + var $cancelBtn = $parent.find(".cancel-btn"); + var $saveBtn = $parent.find(".save-btn"); + var $ol = $parent.find("ol"); + var toggles = [$parent, $cancelBtn, $saveBtn, $editBtn]; + + $ol.sortable(); + $ol.disableSelection(); + toggle(); + + $cancelBtn.one("click", function(e) { + $ol.sortable("cancel"); + $ol.enableSelection(); + toggle(); + }); + + $saveBtn.one("click", function(e) { + $ol.sortable(); + toggle(); + }); + + function toggle() { + toggles.forEach(function($el) { + $el.toggleClass('active'); + }) + } + }); + + // save new category order + $(".resource-category.root").on("submit", "form", function(e) { + var $parent = $(e.delegateTarget); + var $resources = $parent.find(".resource-input") + var isDescending = $parent.hasClass("descending") + $resources.each(function(index) { + var $input = $(this); + var parsed = JSON.parse($input.val()); + if (isDescending) { + parsed.__index = $resources.length - index; + } + else { + parsed.__index = index; + } + $input.val(JSON.stringify(parsed)); + }) + }); - function pressEnter(fn){ - return function(e){ - if (e.keyCode !== 13) return + $(window).on('keydown', function(e){ + if ( (e.ctrlKey || e.altKey || e.metaKey) && e.keyCode == 83 ) { e.preventDefault() + $("#resource_form").submit() } - } + }) +} $(function(){ window.app = new OKAdmin () }) + + +function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g, "-") } |