| Server IP : 37.220.80.31 / Your IP : 3.15.206.105 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/landing/ui/panel/ |
Upload File : |
;(function() {
"use strict";
BX.namespace("BX.Landing.UI.Panel");
/**
* Implements interface for works with image library
*
* @extends {BX.Landing.UI.Panel.Content}
*
* @param {string} id - Panel id
* @constructor
*/
BX.Landing.UI.Panel.Unsplash = function(id)
{
if (BX.Landing.UI.Panel.Unsplash.instance)
{
return BX.Landing.UI.Panel.Unsplash.instance;
}
BX.Landing.UI.Panel.Content.apply(this, arguments);
this.onChangeHandler = null;
this.onSearchWithDebounce = BX.debounce(this.onSearchWithDebounce, 1000, this);
this.layout.classList.add("landing-ui-panel-unsplash");
this.searchContainer = BX.create("div", {props: {className: "landing-ui-panel-unsplash-search-container"}});
this.loader = BX.create("div", {props: {className: "landing-ui-panel-unsplash-search-loader-container"}});
this.loader.appendChild(BX.create("div", {props: {className: "landing-ui-panel-unsplash-search-loader"}}));
(this.searchInputField = new BX.Landing.UI.Field.Unit({
onInput: this.onSearchInput.bind(this),
className: "landing-ui-panel-unsplash-search-field",
placeholder: BX.Landing.Loc.getMessage("UNSPLASH_SEARCH_FIELD_PLACEHOLDER"),
title: BX.Landing.Loc.getMessage("UNSPLASH_SEARCH_FIELD_LABEL")
})).enableTextOnly();
this.searchContainer.appendChild(this.searchInputField.layout);
this.content.appendChild(this.searchContainer);
this.searchInputField.input.type = "text";
this.searchInputField.input.min = null;
this.searchInputField.input.max = null;
this.content.appendChild(this.loader);
this.imagesList = BX.create("div", {props: {className: "landing-ui-panel-unsplash-images-list"}});
this.content.appendChild(this.imagesList);
document.body.appendChild(this.layout);
this.makeLayouts();
};
/**
* Stores instance
* @static
* @type {BX.Landing.UI.Panel.Unsplash}
*/
BX.Landing.UI.Panel.Unsplash.instance = null;
/**
* Gets panel instance
* @static
* @returns {BX.Landing.UI.Panel.Unsplash}
*/
BX.Landing.UI.Panel.Unsplash.getInstance = function()
{
if (!BX.Landing.UI.Panel.Unsplash.instance)
{
BX.Landing.UI.Panel.Unsplash.instance = new BX.Landing.UI.Panel.Unsplash("unsplash");
}
return BX.Landing.UI.Panel.Unsplash.instance;
};
BX.Landing.UI.Panel.Unsplash.prototype = {
constructor: BX.Landing.UI.Panel.Unsplash,
__proto__: BX.Landing.UI.Panel.Content.prototype,
show: function(onChange)
{
BX.Landing.UI.Panel.Content.prototype.show.call(this);
this.onChangeHandler = onChange;
},
hide: function()
{
BX.Landing.UI.Panel.Content.prototype.hide.call(this);
this.onChangeHandler = null;
},
showLoader: function()
{
this.imagesList.innerHTML = "";
this.loader.classList.add(this.classShow);
},
hideLoader: function()
{
this.loader.classList.remove(this.classShow);
},
isLoaderShown: function()
{
return this.loader.classList.contains(this.classShow);
},
onSearchInput: function(field)
{
var query = field.getValue();
if (!!query && query.length)
{
this.showLoader();
this.onSearchWithDebounce(query);
}
else
{
this.makeLayouts();
}
},
onSearchWithDebounce: function(query)
{
var unsplash = new BX.Landing.Client.Unsplash.getInstance();
unsplash.search(query).then(function(res) {
this.hideLoader();
this.imagesList.innerHTML = "";
res.forEach(function(item) {
var card = new BX.Landing.UI.Card.ImagePreview({
image: item.urls.small,
onClick: function() {
this.onChange(item.urls.full);
}.bind(this)
});
this.imagesList.appendChild(card.layout);
}, this);
}.bind(this));
},
makeLayouts: function()
{
var unsplash = new BX.Landing.Client.Unsplash.getInstance();
this.showLoader();
unsplash.popular().then(function(res) {
this.hideLoader();
this.imagesList.innerHTML = "";
res.forEach(function(item) {
var card = new BX.Landing.UI.Card.ImagePreview({
image: item.urls.small,
onClick: function() {
this.onChange(item.urls.full);
}.bind(this)
});
this.imagesList.appendChild(card.layout);
}, this);
}.bind(this));
},
onChange: function(path)
{
if (typeof this.onChangeHandler === "function")
{
this.onChangeHandler(path);
}
this.hide();
}
};
})();