22

✏️ Editing: wpo-images-view.js

WP_Optimize_Images_View = function(settings) {

var $ = jQuery,
		defaults = {
			container: '',
			image_container_class: 'wpo_unused_image',
			image_container_custom_classes: 'wpo_unused_image_row',
			image_container_blog_class_prefix: 'wpo_unused_image_site_',
			view_image_btn_link_class: 'wpo_unused_image_view_link',
			view_image_btn_text: wpoptimize.view_image_link_text,
			row_selector: '.wpo_unused_image_row',
			row_id_class: 'wpo_unused_images_row_id',
			row_thumb_class: 'wpo_unused_images_row_thumb',
			row_file_class: 'wpo_unused_images_row_file',
			row_action_class: 'wpo_unused_images_row_action',
			/**
			 * Array with buttons shown in the list view mode.
			 *
			 *  [
			 *    {
			 *  	'class': 'button_class',
			 *  	'title': 'Button title',
			 *  	'hint': 'Tooltip text'
			 * 	  },
			 * 	  ...
			 * 	]
			 */
			row_action_buttons: [],
			label_class: 'wpo_unused_image_thumb_label',
			loader_additional_html: '',
			action_btn_text: 'Remove',
			action_btn_class: 'button button-primary wpo_unused_images_remove_single',
			checkbox_class: 'wpo_unused_image__input',
			list_mode_class: 'wpo_unused_image_list_view',
			no_images_found_message: 'No images found',
			related_elements: [],
			action_buttons: [],
			hide_when_empty: [],
			load_next_page_callback: null,
			onclear: null
		},
		options = jQuery.extend({}, defaults, settings),
		IMAGES_VIEW_MODE = {
			GRID: 'grid',
			LIST: 'list'
		},
		images_view_mode = IMAGES_VIEW_MODE.GRID,
		images_view_container = options.container,
		image_container_selector = '.' + options.image_container_class,
		checkbox_selector = '.' + options.checkbox_class,
		last_clicked_image_id = '',
		images_loaded_count = {};

/**
	 * Handle scroll in the images container.
	 */
	images_view_container.on('scroll mousewheel', function() {
		load_next_page_if_need();
		update_loader_position();
	});

/**
	 * Handle Shift key state.
	 */
	var ctrl_shift_on_image_held = false;

images_view_container.on('mousedown', options.row_selector, function (e) {
		ctrl_shift_on_image_held = e.shiftKey || e.ctrlKey;
	});

images_view_container.on('mouseup', options.row_selector, function (e) {
		ctrl_shift_on_image_held = e.shiftKey || e.ctrlKey;
	});

/**
	 * Handle checked status changed for single unused image.
	 */
	images_view_container.on('click' , '.'+options.image_container_class , function(e) {
		
		var check_box = $(this).find('.'+options.checkbox_class);
		var image_id = check_box.attr('id');

// Toggle class on image container
		if (true === check_box.prop('checked')) {
			$(this).addClass('selected');
		} else {
			$(this).removeClass('selected');
		}
		if (ctrl_shift_on_image_held) {

if (true === check_box.prop('checked')) {
				$(this).removeClass('selected');
				check_box.prop('checked',false);
			} else {
				$(this).addClass('selected');
				check_box.prop('checked',true);
			}
			if (1 <= get_selected_images().length) {
				if (true === $("#"+last_clicked_image_id).prop('checked')) {
					select_images(last_clicked_image_id, image_id, true === check_box.prop('checked'));
				}
				
			}
		}
		last_clicked_image_id = image_id;
		disable_action_buttons(0 == get_selected_images().length);
			
	});

/**
	 * Select or deselect images from #first_id to #last_id in the lis of unused images
	 *
	 * @param {string} first_id - first image id in the list
	 * @param {string} last_id  - last image id in the list
	 * @param {bool}   checked  - select or deselect images
	 *
	 * @return void
	 */
	function select_images(first_id, last_id, checked) {
		var image_id = first_id,
			index1,
			index2,
			current,
			first,
			last,
			done = false;

// if set first and last ids then go through the list.
		if (last_id && first_id) {
			// get positions in then list.
			index1 = $(checkbox_selector).index($('#' + first_id));
			index2 = $(checkbox_selector).index($('#' + last_id));

// check if both item exists. (posibly one of them was deleted)
			if (-1 == index1) index1 = index2;
			if (-1 == index2) index2 = index1;

// get correct first and last item.
			if (index1 < index2) {
				current = $(checkbox_selector).eq(index1).closest(image_container_selector);
				last_id = $(checkbox_selector).eq(index2).attr('id');
			} else {
				current = $(checkbox_selector).eq(index2).closest(image_container_selector);
				last_id = $(checkbox_selector).eq(index1).attr('id');
			}

// select images.
			while (!done) {
				if (checked) {
					current.addClass('selected');
					$(checkbox_selector, current).prop('checked', checked);
				} else {
					current.removeClass('selected');
					$(checkbox_selector, current).prop('checked', checked);
				}

if ($(checkbox_selector, current).attr('id') == last_id) done = true;

current = current.next();
			}
		} else {
			// if just one the first id passed then change just the first element state.
			if (checked) {
				$('#' + image_id).closest(image_container_selector).addClass('selected');
			} else {
				$('#' + image_id).closest(image_container_selector).removeClass('selected');
			}
		}

disable_action_buttons(0 == get_selected_images().length);
	}

/**
	 * Disable/enable controls.
	 *
	 * @param {boolean} disabled
	 */
	function disable_action_buttons(disabled) {
		if (!options.action_buttons) return;

$.each(options.action_buttons, function(i, el) {
			el.prop('disabled', disabled)
		});
	}

/**
	 * Update view in case when then images list is empty.
	 */
	function hide_when_empty_elements() {
		if (options.hide_when_empty) {
			var images_count = $(['.', options.image_container_class,':visible'].join(''), images_view_container).length;

if (0 === images_count) {
				// show message - no images found.
				if (0 == $('.wpo-images-view-empty', images_view_container).length) {
					images_view_container.append($('<div class="wpo-images-view-empty wpo-fieldgroup" />').text(options.no_images_found_message));
				}

$('.wpo-images-view-empty', images_view_container).show();
			} else {
				$('.wpo-images-view-empty', images_view_container).hide();
			}

$.each(options.hide_when_empty, function(i, el) {
				if (images_count > 0) {
					el.show();
				} else {
					el.hide();
				}
			});
		}
	}

/**
	 * Update view when images are changed.
	 */
	function update_view() {
		if (!is_visible()) return;

hide_when_empty_elements();
		disable_action_buttons(0 == get_selected_images().length);
	}

/**
	 * Load the next part images if images container scrolled to the bottom.
	 */
	function load_next_page_if_need() {
		if (images_view_container.scrollTop() + images_view_container.height() + 100 > images_view_container[0].scrollHeight) {
			if ('function' == typeof options.load_next_page_callback) {
				options.load_next_page_callback();
			}
		}
	}

/**
	 * Append an image to the list.
	 *
	 * @param {int}    blog_id       image blog id
	 * @param {string} value		 value that will returned if image selected
	 * @param {string} href			 url opened when image clicked
	 * @param {string} thumbnail_url url to the image thumbnail
	 * @param {string} title         image title
	 * @param {string} row_file_text text for displaying near image in the list view mode
	 */
	function append_image(blog_id, value, href, thumbnail_url, title, row_file_text) {
		var random_id = 'image_' + (((1+Math.random())*0x10000)|0).toString(16).substring(1),
			row_actions_html = '',
			i;

// build button
		if (options.row_action_buttons) {
			for (i in options.row_action_buttons) {

if (!options.row_action_buttons.hasOwnProperty(i)) continue;

row_actions_html += [
					'<button href="javascript: ;" class="',(options.row_action_buttons[i].class ? options.row_action_buttons[i].class : ''),'"',
					' title="',(options.row_action_buttons[i].hint ? options.row_action_buttons[i].hint : ''),'">',(options.row_action_buttons[i].title ? options.row_action_buttons[i].title : ''),'</button>'
				].join('');
			}
		}

// count added image.
		if (!images_loaded_count.hasOwnProperty(blog_id)) images_loaded_count[blog_id] = 0;
		images_loaded_count[blog_id]++;

images_view_container.append(['\
			<div class="',options.image_container_class,' ',options.image_container_custom_classes,' ',options.image_container_blog_class_prefix,blog_id,'">\
				<a class="button ',options.view_image_btn_link_class,'" href="',href,'" target="_blank">',
			options.view_image_btn_text,
			'</a>',
			'<div class="',options.row_id_class,'">\
					<input id="',random_id,'" type="checkbox" class="',options.checkbox_class,'" value="',value,'">\
				</div>\
				<div class="',options.row_thumb_class,'">\
					<a href="',href,'" target="_blank">\
						<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="',thumbnail_url,'" title="',title,'" alt="',title,'">\
					</a>\
				</div>\
				<div class="',options.row_file_class,'">\
					<a href="',href,'" target="_blank">',row_file_text,'</a>\
				</div>\
				<div class="',options.row_action_class,'">',row_actions_html,'</div>\
				<label for="',random_id,'" class="',options.label_class,'">\
					<div class="thumbnail">\
						<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="',thumbnail_url,'" title="',title,'" alt="',title,'">\
					</div>\
				</label>\
			</div>'
		].join(''));
	}

/**
	 * Show only images for the selected blog.
	 *
	 * @param {int} blog_id
	 */
	function filter_by_site(blog_id) {
		$(image_container_selector, images_view_container).hide();
		$(['.',options.image_container_blog_class_prefix, blog_id].join(''), images_view_container).show();
		update_view();
	}

/**
	 * Get count of loaded images for the selected blog.
	 *
	 * @param {int} blog_id
	 *
	 * @return {number}
	 */
	function get_images_count(blog_id) {
		if (!images_loaded_count.hasOwnProperty(blog_id)) return 0;

return images_loaded_count[blog_id];
	}

/**
	 * Get count of loaded images currently displayed in the view container.
	 *
	 * @param {int} blog_id
	 */
	function get_visible_images_count(blog_id) {
		return $(['.',options.image_container_blog_class_prefix, blog_id].join(''), images_view_container).length;
	}

/**
	 * Switch view mode grid/list.
	 *
	 * @param mode
	 */
	function switch_view_mode(mode) {
		if (mode === images_view_mode) return;

images_view_mode = mode;

if (mode === IMAGES_VIEW_MODE.GRID) {
			images_view_container.removeClass(options.list_mode_class);
		}

if (mode === IMAGES_VIEW_MODE.LIST) {
			images_view_container.addClass(options.list_mode_class);
		}
	}

/**
	 * Get list of selected images.
	 *
	 * @return {Array}
	 */
	function get_selected_images() {
		var selected_images = [];

// if no any selected images then exit.
		if (0 == $('input[type="checkbox"]', images_view_container).length) return selected_images;

// build list of visible selected images .
		$(['.',options.image_container_class,':visible input:checked'].join(''), images_view_container).each(function() {
			selected_images.push($(this).val());
		});

return selected_images;
	}

/**
	 * Remove selected images.
	 */
	function remove_selected_images() {
		var image_container_selector = ['.',options.image_container_class].join('');
		$([image_container_selector,':visible input:checked'].join(''), images_view_container).each(function() {
			$(this).closest(image_container_selector).remove();
		});
	}

/**
	 * Show images container.
	 */
	function show() {
		images_view_container.show();

$(options.related_elements).each(function() {
			$(this).show();
		});

update_view();

load_next_page_if_need();
	}

/**
	 * Hide images container.
	 */
	function hide() {
		images_view_container.hide();

$(options.related_elements).each(function() {
			$(this).hide();
		});
	}

/**
	 * Check if images container element is visible.
	 *
	 * @return {boolean}
	 */
	function is_visible() {
		return images_view_container.is(':visible');
	}

/**
	 * Show loader.
	 */
	function show_loader() {
		show_custom_loader(wpoptimize.loading_data, '', options.loader_additional_html);
	}

/**
	 * Show loader with custom content.
	 *
	 * @param {string} title
	 * @param {string} message
	 * @param {string} custom_html
	 */
	function show_custom_loader(title, message, custom_html) {
		message = message ? message : '';
		custom_html = custom_html ? custom_html : '';

images_view_container.css({ 'min-height' : '220px' });
		images_view_container.append([
			'<div class="wpo_shade">',
			'<div class="wpo_shade_inner">',
			'<span class="dashicons dashicons-update-alt wpo-rotate"></span>',
			'<h4>',title,'</h4>',
			'<p class="wpo-shade-progress-message">',message,'</p>',
			custom_html,
			'</div>',
			'</div>',
		].join(''));

update_loader_position();
	}

/**
	 * Hide loader.
	 */
	function hide_loader() {
		images_view_container.css('min-height', 'initial');
		$('.wpo_shade', images_view_container).remove();
	}

/**
	 * Update top property for shade div with loader.
	 */
	function update_loader_position() {
		$('.wpo_shade', images_view_container).css('top', images_view_container.scrollTop() + 'px');
	}

/**
	 * Set message for under loader icon.
	 *
	 * @param {string} message
	 */
	function loader_message(message) {
		$('.wpo-shade-progress-message', images_view_container).html(message);
	}

/**
	 * Select all images.
	 */
	function select_all() {
		$('.wpo_unused_image__input').each(function() {
			if (!$(this).prop('checked')) {
				$(this).closest('.wpo_unused_image').addClass('selected');
				$(this).prop('checked', true);
				last_clicked_image_id = null;
				disable_action_buttons(0 == get_selected_images().length);

}
		 });
	}

/**
	 * Deselect all images.
	 */
	function select_none() {
		$('.wpo_unused_image__input').each(function() {
			if ($(this).prop('checked')) {
				$(this).closest('.wpo_unused_image').removeClass('selected');
				$(this).prop('checked', false);
				last_clicked_image_id = null;
				disable_action_buttons(0 == get_selected_images().length);
			}
		 });
	}

/**
	 * Clear images container.
	 */
	function clear() {
		$(['.', options.image_container_class].join(''), images_view_container).remove();
		images_loaded_count = {};
		disable_action_buttons(true);

// if defined on clear event then call it.
		if ('function' === typeof options.onclear) {
			options.onclear();
		}
	}

/**
	 * Reload view items.
	 */
	function reload() {
		clear();
		load_next_page_if_need();
	}

return {
		show: show,
		hide: hide,
		clear: clear,
		reload: reload,
		show_loader: show_loader,
		show_custom_loader: show_custom_loader,
		hide_loader: hide_loader,
		loader_message: loader_message,
		append_image: append_image,
		get_selected_images: get_selected_images,
		remove_selected_images: remove_selected_images,
		get_images_count: get_images_count,
		get_visible_images_count: get_visible_images_count,
		load_next_page_if_need: load_next_page_if_need,
		filter_by_site: filter_by_site,
		switch_view_mode: switch_view_mode,
		select_all: select_all,
		select_none: select_none,
		is_visible: is_visible,
		update_view: update_view
	}
};

MR SKB