169 lines
9.9 KiB
PHP
169 lines
9.9 KiB
PHP
<?php
|
|
// no direct access
|
|
defined('_JEXEC') or die;
|
|
|
|
use Pagebuilderck\CKfof;
|
|
use Pagebuilderck\CKFramework;
|
|
|
|
require_once PAGEBUILDERCK_PATH . '/helpers/defines.js.php';
|
|
|
|
CKFramework::load();
|
|
|
|
if (!defined('PAGEBUILDERCK_MEDIA_URI')) {
|
|
define('PAGEBUILDERCK_MEDIA_URI', JUri::root(true) . '/media/com_pagebuilderck');
|
|
}
|
|
$imagespath = PAGEBUILDERCK_MEDIA_URI . '/images/';
|
|
$input = JFactory::getApplication()->input;
|
|
$fieldid = $input->get('fieldid', '', 'string');
|
|
$lang = JFactory::getLanguage();
|
|
$langs = ['cs', 'da', 'de', 'en', 'es', 'fr', 'id', 'it', 'hu', 'nl', 'no', 'pl', 'pt', 'ro', 'sk', 'fi', 'sv', 'tr', 'vi', 'th', 'bg', 'ru', 'el', 'ja', 'ko', 'zh'];
|
|
?>
|
|
|
|
<style scope>
|
|
.flex-images { overflow: hidden; }
|
|
.flex-images .pixabay-item { float: left; margin: 4px; background: #f3f3f3; box-sizing: content-box; overflow: hidden; position: relative; }
|
|
.flex-images .pixabay-item > img { display: block; width: auto; height: 100%; }
|
|
|
|
.flex-images .download {
|
|
opacity: 0; transition: opacity .3s; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
|
|
cursor: pointer; background: rgba(0,0,0,.65); color: #eee;
|
|
text-align: center; font-size: 14px; line-height: 1.5;
|
|
}
|
|
.flex-images .pixabay-item:hover .download, .flex-images .pixabay-item.uploading .download { opacity: 1; }
|
|
.flex-images .download img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 32px; opacity: .7; }
|
|
.flex-images .download div { position: absolute; left: 0; right: 0; bottom: 15px; padding: 0 5px; }
|
|
.flex-images .download a { color: #eee; }
|
|
</style>
|
|
<div id="ckpixabay" class="ckinterface">
|
|
<form id="pixabay_images_form" style="margin:0">
|
|
<a href="https://pixabay.com/" target="_blank" style="margin:3px 15px 5px 0;font-size:12px;line-height:1.7;color:#555;display:inline-block;padding:9px 12px 6px;border:1px solid #ccc">
|
|
<i style="display:block;width:68px;height:18px;overflow:hidden"><img src="<?php echo $imagespath ?>/pixabay/logo.png" style="width:94px"></i> Free Images
|
|
</a>
|
|
<div style="line-height:1.5;margin:0;max-width:500px;position:relative; display:inline-block;width:100%;vertical-align: bottom;">
|
|
<input id="q" type="text" value="" style="width:100%;padding:7px 32px 7px 9px; box-sizing: border-box; height:40px;" autofocus placeholder="<?php echo htmlspecialchars(JText::_('Search for "red roses", "flowers -red", "city OR town", etc.')); ?>">
|
|
<button type="submit" style="background:#fff;border:0;cursor:pointer;position:absolute;right:5px;top:10px;outline:0" title="<?php echo JText::_('Search'); ?>"><img src="<?= PAGEBUILDERCK_MEDIA_URI . '/images/pixabay/search.png' ?>"></button>
|
|
</div>
|
|
<select id="pixabaylang" style="display: inline-block;width: 60px;vertical-align: bottom;height: 40px;">
|
|
<?php foreach ($langs as $l) {
|
|
$selected = substr($lang->getTag(), 0, 2) === $l;
|
|
echo '<option value="' . $l . '" ' . ($selected ? 'selected' : '') .'>' . $l . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
<div style="margin:1em 0;padding-left:2px;line-height:2;">
|
|
<?php /* <label style="margin-right:15px;white-space:nowrap"><input type="checkbox" id="filter_photos"><?php echo JText::_('Photos'); ?></label>
|
|
<label style="margin-right:20px;white-space:nowrap"><input type="checkbox" id="filter_cliparts"><?php echo JText::_('Cliparts'); ?></label>
|
|
*/ ?>
|
|
<label style="margin-right:15px;white-space:nowrap"><input type="checkbox" id="filter_horizontal" ><?php echo JText::_('Horizontal'); ?></label>
|
|
<label style="margin-right:25px;white-space:nowrap"><input type="checkbox" id="filter_vertical"><?php echo JText::_('Vertical'); ?></label>
|
|
</div>
|
|
</form>
|
|
<div id="pixabay_results" class="flex-images" style="margin-top:20px;padding-top:25px;border-top:1px solid #ddd"></div>
|
|
</div>
|
|
<script>
|
|
// flexImages
|
|
!function(t){function e(t,a,r,n){function o(t){r.maxRows&&d>r.maxRows||r.truncate&&t&&d>1?w[g][0].style.display="none":(w[g][4]&&(w[g][3].attr("src",w[g][4]),w[g][4]=""),w[g][0].style.width=l+"px",w[g][0].style.height=u+"px",w[g][0].style.display="block")}var g,l,s=1,d=1,f=t.width()-2,w=[],c=0,u=r.rowHeight;for(f||(f=t.width()-2),i=0;i<a.length;i++)if(w.push(a[i]),c+=a[i][2]+r.margin,c>=f){var m=w.length*r.margin;for(s=(f-m)/(c-m),u=Math.ceil(r.rowHeight*s),exact_w=0,l,g=0;g<w.length;g++)l=Math.ceil(w[g][2]*s),exact_w+=l+r.margin,exact_w>f&&(l-=exact_w-f),o();w=[],c=0,d++}for(g=0;g<w.length;g++)l=Math.floor(w[g][2]*s),h=Math.floor(r.rowHeight*s),o(!0);n||f==t.width()||e(t,a,r,!0)}t.fn.flexImages=function(a){var i=t.extend({container:".pixabay-item",object:"img",rowHeight:180,maxRows:0,truncate:0},a);return this.each(function(){var a=t(this),r=t(a).find(i.container),n=[],o=(new Date).getTime(),h=window.getComputedStyle?getComputedStyle(r[0],null):r[0].currentStyle;for(i.margin=(parseInt(h.marginLeft)||0)+(parseInt(h.marginRight)||0)+(Math.round(parseFloat(h.borderLeftWidth))||0)+(Math.round(parseFloat(h.borderRightWidth))||0),j=0;j<r.length;j++){var g=r[j],l=parseInt(g.getAttribute("data-w")),s=l*(i.rowHeight/parseInt(g.getAttribute("data-h"))),d=t(g).find(i.object);n.push([g,l,s,d,d.data("src")])}e(a,n,i),t(window).off("resize.flexImages"+a.data("flex-t")),t(window).on("resize.flexImages"+o,function(){e(a,n,i)}),a.data("flex-t",o)})}}(jQuery);
|
|
function getCookie(k){return(document.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2]}
|
|
function setCookie(n,v,d,s){var o=new Date;o.setTime(o.getTime()+864e5*d+1000*(s||0)),document.cookie=n+"="+v+";path=/;expires="+o.toGMTString()}
|
|
function escapejs(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,"\\'");}
|
|
|
|
// set checkbox filters
|
|
jQuery("input[id^='filter_']").each(function(){
|
|
if (getCookie('px_'+this.id) != '0') this.checked = true;
|
|
jQuery(this).change(function(){ setCookie('px_'+this.id, this.checked ? 1 : 0, 365); });
|
|
});
|
|
|
|
var post_id =
|
|
lang = jQuery('#pixabaylang').val(),
|
|
safesearch = true,
|
|
per_page = 30, form = jQuery('#pixabay_images_form'), hits, q, image_type, orientation;
|
|
|
|
form.submit(function(e){
|
|
jQuery(window).off('scroll');
|
|
e.preventDefault();
|
|
q = jQuery('#q', form).val();
|
|
|
|
if (jQuery('#filter_photos', form).is(':checked') && !jQuery('#filter_cliparts', form).is(':checked')) image_type = 'photo';
|
|
else if (!jQuery('#filter_photos', form).is(':checked') && jQuery('#filter_cliparts', form).is(':checked')) image_type = 'clipart';
|
|
else image_type = 'all';
|
|
if (jQuery('#filter_horizontal', form).is(':checked') && !jQuery('#filter_vertical', form).is(':checked')) orientation = 'horizontal';
|
|
else if (!jQuery('#filter_horizontal', form).is(':checked') && jQuery('#filter_vertical', form).is(':checked')) orientation = 'vertical';
|
|
else orientation = 'all';
|
|
jQuery('#pixabay_results').html('');
|
|
|
|
call_api(q, 1);
|
|
});
|
|
|
|
function call_api(q, p){
|
|
lang = jQuery('#pixabaylang').val();
|
|
$ck.ajax({
|
|
type: "GET",
|
|
url: 'https://pixabay.com/api/?key=27347-23fd1708b1c4f768195a5093b&lang='+lang+'&safesearch='+safesearch+'&image_type='+image_type+'&orientation='+orientation+'&per_page='+per_page+'&page='+p+'&search_term='+encodeURIComponent(q),
|
|
cache: true,
|
|
data: {
|
|
|
|
}
|
|
}).done(function(code) {
|
|
// var data = JSON.parse(code);
|
|
var data = code;
|
|
if (!(data.totalHits > 0)) {
|
|
jQuery('#pixabay_results').html('<div style="color:#bbb;font-size:24px;text-align:center;margin:40px 0">—— <?php echo JText::_('No matches', 'pixabay_images') ?> ——</div>');
|
|
return false;
|
|
}
|
|
render_px_results(q, p, data);
|
|
}).fail(function() {
|
|
alert(CKApi.Text._('CK_FAILED', 'Failed'));
|
|
});
|
|
return false;
|
|
}
|
|
|
|
function render_px_results(q, p, data){
|
|
hits = data['hits']; // store for upload click
|
|
pages = Math.ceil(data.totalHits/per_page);
|
|
var s = '';
|
|
jQuery.each(data.hits, function(k, v) {
|
|
s += '<div class="pixabay-item pixabay-upload" data-url="'+v.largeImageURL+'" data-user="'+v.user+'" data-w="'+v.webformatWidth+'" data-h="'+v.webformatHeight+'"><img src="'+v.previewURL.replace('_150', v.previewURL.indexOf('cdn.') > -1 ? '__340' : '_340')+'"><div class="download"><img src="<?= PAGEBUILDERCK_MEDIA_URI.'/images/pixabay/download.png' ?>"><div>'+(v.webformatWidth*2)+'×'+(v.webformatHeight*2)+'<br><a href="https://pixabay.com/users/'+v.user+'/" target="_blank"">'+v.user+'</a> @ <a href="'+v.pageURL+'" target="_blank">Pixabay</a></div></div></div>';
|
|
});
|
|
jQuery('#pixabay_results').html(jQuery('#pixabay_results').html()+s);
|
|
jQuery('#load_animation').remove();
|
|
if (p < pages) {
|
|
jQuery('#pixabay_results').after('<div id="load_animation" style="clear:both;padding:15px 0 0;text-align:center"><img style="width:60px" src="<?= PAGEBUILDERCK_MEDIA_URI.'/images/pixabay/loading.png' ?>"></div>');
|
|
jQuery(window).scroll(function() {
|
|
if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 400) {
|
|
jQuery(window).off('scroll');
|
|
call_api(jQuery('#q', form).val(), p+1);
|
|
}
|
|
});
|
|
}
|
|
|
|
jQuery('.flex-images').flexImages({rowHeight: 260});
|
|
}
|
|
|
|
jQuery(document).on('click', '.pixabay-upload', function(e) {
|
|
if (jQuery(e.target).is('a')) return;
|
|
jQuery(document).off('click', '.pixabay-upload');
|
|
// loading animation
|
|
jQuery(this).addClass('uploading').find('.download img').replaceWith('<img src="<?= PAGEBUILDERCK_MEDIA_URI.'/images/pixabay/loading.png' ?>" style="height:80px !important">');
|
|
var myurl = PAGEBUILDERCK.URIPBCK + "&task=pixabay.upload&" + PAGEBUILDERCK.TOKEN;
|
|
$ck.ajax({
|
|
type: "POST",
|
|
url: myurl,
|
|
data: {
|
|
image_url : jQuery(this).data('url')
|
|
}
|
|
}).done(function(code) {
|
|
var result = JSON.parse(code);
|
|
if (result.status == '1') {
|
|
window.parent.ckSelectFile(result.file, '<?php echo $fieldid ?>');
|
|
window.parent.CKBox.close('#ckfilesmodal .ckboxmodal-button');
|
|
} else {
|
|
alert(CKApi.Text._('CK_FAILED', 'Failed') + ' : ' + result.message);
|
|
}
|
|
}).fail(function() {
|
|
alert(CKApi.Text._('CK_FAILED', 'Failed'));
|
|
});
|
|
return false;
|
|
});
|
|
</script>
|
|
</div>
|