image-widget.deprecated.js
1 year ago
image-widget.deprecated.upload-fixer.js
1 year ago
image-widget.js
2 months ago
index.php
1 year ago
image-widget.js
126 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 | imageWidget.render( widget_id, widget_id_string, attachments[0] ); |
| 24 | }); |
| 25 | |
| 26 | frame.open(); |
| 27 | return false; |
| 28 | }, |
| 29 | |
| 30 | // Output Image preview and populate widget form. |
| 31 | render : function( widget_id, widget_id_string, attachment ) { |
| 32 | |
| 33 | var $attachment_id = $( document.getElementById( widget_id_string + 'attachment_id' ) ); |
| 34 | var $image_url = $( document.getElementById( widget_id_string + 'imageurl' ) ); |
| 35 | |
| 36 | $("#" + widget_id_string + 'preview').html(imageWidget.imgHTML( attachment )); |
| 37 | |
| 38 | $("#" + widget_id_string + 'fields').slideDown(); |
| 39 | |
| 40 | // update the attachment id if it has changed |
| 41 | if ( $attachment_id.val() !== attachment.id ) { |
| 42 | $attachment_id.val( attachment.id ).trigger( 'change' ); |
| 43 | } |
| 44 | |
| 45 | // update the url if it has changed |
| 46 | if ( $image_url.val() !== attachment.url ) { |
| 47 | $image_url.val( attachment.url ).trigger( 'change' ); |
| 48 | } |
| 49 | |
| 50 | $("#" + widget_id_string + 'aspect_ratio').val(attachment.width/attachment.height); |
| 51 | $("#" + widget_id_string + 'width').val(attachment.width); |
| 52 | $("#" + widget_id_string + 'height').val(attachment.height); |
| 53 | |
| 54 | $("#" + widget_id_string + 'size').val('full'); |
| 55 | $("#" + widget_id_string + 'custom_size_selector').slideDown(); |
| 56 | imageWidget.toggleSizes( widget_id, widget_id_string ); |
| 57 | |
| 58 | imageWidget.updateInputIfEmpty( widget_id_string, 'title', attachment.title ); |
| 59 | imageWidget.updateInputIfEmpty( widget_id_string, 'alt', attachment.alt ); |
| 60 | imageWidget.updateInputIfEmpty( widget_id_string, 'description', attachment.description ); |
| 61 | // attempt to populate 'description' with caption if description is blank. |
| 62 | imageWidget.updateInputIfEmpty( widget_id_string, 'description', attachment.caption ); |
| 63 | }, |
| 64 | |
| 65 | // Update input fields if it is empty |
| 66 | updateInputIfEmpty : function( widget_id_string, name, value ) { |
| 67 | var field = $("#" + widget_id_string + name); |
| 68 | if ( field.val() == '' ) { |
| 69 | field.val(value); |
| 70 | } |
| 71 | }, |
| 72 | |
| 73 | // Escape a string for safe use inside an HTML attribute. |
| 74 | escAttr : function( str ) { |
| 75 | var div = document.createElement( 'div' ); |
| 76 | div.appendChild( document.createTextNode( str ) ); |
| 77 | return div.innerHTML.replace( /"/g, '"' ).replace( /'/g, ''' ); |
| 78 | }, |
| 79 | |
| 80 | // Render html for the image. |
| 81 | imgHTML : function( attachment ) { |
| 82 | var img_html = '<img src="' + imageWidget.escAttr( attachment.url ) + '" '; |
| 83 | img_html += 'width="' + imageWidget.escAttr( String( attachment.width ) ) + '" '; |
| 84 | img_html += 'height="' + imageWidget.escAttr( String( attachment.height ) ) + '" '; |
| 85 | if ( attachment.alt != '' ) { |
| 86 | img_html += 'alt="' + imageWidget.escAttr( attachment.alt ) + '" '; |
| 87 | } |
| 88 | img_html += '/>'; |
| 89 | return img_html; |
| 90 | }, |
| 91 | |
| 92 | // Hide or display the WordPress image size fields depending on if 'Custom' is selected. |
| 93 | toggleSizes : function( widget_id, widget_id_string ) { |
| 94 | if ( $( '#' + widget_id_string + 'size' ).val() == 'tribe_image_widget_custom' ) { |
| 95 | $( '#' + widget_id_string + 'custom_size_fields').slideDown(); |
| 96 | } else { |
| 97 | $( '#' + widget_id_string + 'custom_size_fields').slideUp(); |
| 98 | } |
| 99 | }, |
| 100 | |
| 101 | // Update the image height based on the image width. |
| 102 | changeImgWidth : function( widget_id, widget_id_string ) { |
| 103 | var aspectRatio = $("#" + widget_id_string + 'aspect_ratio').val(); |
| 104 | if ( aspectRatio ) { |
| 105 | var width = $( '#' + widget_id_string + 'width' ).val(); |
| 106 | var height = Math.round( width / aspectRatio ); |
| 107 | $( '#' + widget_id_string + 'height' ).val(height); |
| 108 | //imageWidget.changeImgSize( widget_id, widget_id_string, width, height ); |
| 109 | } |
| 110 | }, |
| 111 | |
| 112 | // Update the image width based on the image height. |
| 113 | changeImgHeight : function( widget_id, widget_id_string ) { |
| 114 | var aspectRatio = $("#" + widget_id_string + 'aspect_ratio').val(); |
| 115 | if ( aspectRatio ) { |
| 116 | var height = $( '#' + widget_id_string + 'height' ).val(); |
| 117 | var width = Math.round( height * aspectRatio ); |
| 118 | $( '#' + widget_id_string + 'width' ).val(width); |
| 119 | //imageWidget.changeImgSize( widget_id, widget_id_string, width, height ); |
| 120 | } |
| 121 | } |
| 122 | |
| 123 | }; |
| 124 | |
| 125 | }); |
| 126 |