image-widget.deprecated.js
13 years ago
image-widget.deprecated.upload-fixer.js
13 years ago
image-widget.js
13 years ago
image-widget.js
108 lines
| 1 | /** |
| 2 | * Tribe Image Widget Javascript |
| 3 | * @author Modern Tribe, Inc. |
| 4 | * Copyright 2013. |
| 5 | */ |
| 6 | jQuery(document).ready(function($){ |
| 7 | |
| 8 | imageWidget = { |
| 9 | |
| 10 | // Call this from the upload button to initiate the upload frame. |
| 11 | uploader : function( widget_id, widget_id_string ) { |
| 12 | |
| 13 | var frame = wp.media({ |
| 14 | title : TribeImageWidget.frame_title, |
| 15 | multiple : false, |
| 16 | library : { type : 'image' }, |
| 17 | button : { text : TribeImageWidget.button_title } |
| 18 | }); |
| 19 | |
| 20 | // Handle results from media manager. |
| 21 | frame.on('close',function( ) { |
| 22 | var attachments = frame.state().get('selection').toJSON(); |
| 23 | console.log( attachments ); |
| 24 | imageWidget.render( widget_id, widget_id_string, attachments[0] ); |
| 25 | }); |
| 26 | |
| 27 | frame.open(); |
| 28 | return false; |
| 29 | }, |
| 30 | |
| 31 | // Output Image preview and populate widget form. |
| 32 | render : function( widget_id, widget_id_string, attachment ) { |
| 33 | |
| 34 | $("#" + widget_id_string + 'preview').html(imageWidget.imgHTML( attachment )); |
| 35 | |
| 36 | $("#" + widget_id_string + 'fields').slideDown(); |
| 37 | |
| 38 | $("#" + widget_id_string + 'attachment_id').val(attachment.id); |
| 39 | $("#" + widget_id_string + 'imageurl').val(attachment.url); |
| 40 | $("#" + widget_id_string + 'aspect_ratio').val(attachment.width/attachment.height); |
| 41 | $("#" + widget_id_string + 'width').val(attachment.width); |
| 42 | $("#" + widget_id_string + 'height').val(attachment.height); |
| 43 | |
| 44 | $("#" + widget_id_string + 'size').val('full'); |
| 45 | $("#" + widget_id_string + 'custom_size_selector').slideDown(); |
| 46 | imageWidget.toggleSizes( widget_id, widget_id_string ); |
| 47 | |
| 48 | imageWidget.updateInputIfEmpty( widget_id_string, 'title', attachment.title ); |
| 49 | imageWidget.updateInputIfEmpty( widget_id_string, 'alt', attachment.alt ); |
| 50 | imageWidget.updateInputIfEmpty( widget_id_string, 'description', attachment.description ); |
| 51 | // attempt to populate 'description' with caption if description is blank. |
| 52 | imageWidget.updateInputIfEmpty( widget_id_string, 'description', attachment.caption ); |
| 53 | }, |
| 54 | |
| 55 | // Update input fields if it is empty |
| 56 | updateInputIfEmpty : function( widget_id_string, name, value ) { |
| 57 | var field = $("#" + widget_id_string + name); |
| 58 | if ( field.val() == '' ) { |
| 59 | field.val(value); |
| 60 | } |
| 61 | }, |
| 62 | |
| 63 | // Render html for the image. |
| 64 | imgHTML : function( attachment ) { |
| 65 | var img_html = '<img src="' + attachment.url + '" '; |
| 66 | img_html += 'width="' + attachment.width + '" '; |
| 67 | img_html += 'height="' + attachment.height + '" '; |
| 68 | if ( attachment.alt != '' ) { |
| 69 | img_html += 'alt="' + attachment.alt + '" '; |
| 70 | } |
| 71 | img_html += '/>'; |
| 72 | return img_html; |
| 73 | }, |
| 74 | |
| 75 | // Hide or display the WordPress image size fields depending on if 'Custom' is selected. |
| 76 | toggleSizes : function( widget_id, widget_id_string ) { |
| 77 | if ( $( '#' + widget_id_string + 'size' ).val() == 'tribe_image_widget_custom' ) { |
| 78 | $( '#' + widget_id_string + 'custom_size_fields').slideDown(); |
| 79 | } else { |
| 80 | $( '#' + widget_id_string + 'custom_size_fields').slideUp(); |
| 81 | } |
| 82 | }, |
| 83 | |
| 84 | // Update the image height based on the image width. |
| 85 | changeImgWidth : function( widget_id, widget_id_string ) { |
| 86 | var aspectRatio = $("#" + widget_id_string + 'aspect_ratio').val(); |
| 87 | if ( aspectRatio ) { |
| 88 | var width = $( '#' + widget_id_string + 'width' ).val(); |
| 89 | var height = Math.round( width / aspectRatio ); |
| 90 | $( '#' + widget_id_string + 'height' ).val(height); |
| 91 | //imageWidget.changeImgSize( widget_id, widget_id_string, width, height ); |
| 92 | } |
| 93 | }, |
| 94 | |
| 95 | // Update the image width based on the image height. |
| 96 | changeImgHeight : function( widget_id, widget_id_string ) { |
| 97 | var aspectRatio = $("#" + widget_id_string + 'aspect_ratio').val(); |
| 98 | if ( aspectRatio ) { |
| 99 | var height = $( '#' + widget_id_string + 'height' ).val(); |
| 100 | var width = Math.round( height * aspectRatio ); |
| 101 | $( '#' + widget_id_string + 'width' ).val(width); |
| 102 | //imageWidget.changeImgSize( widget_id, widget_id_string, width, height ); |
| 103 | } |
| 104 | } |
| 105 | |
| 106 | }; |
| 107 | |
| 108 | }); |