Category Archives: JS

JavaScript печать элемента на странице

Для вызова печати контента средствами JS реализуем такую функцию:

function printElement(selector) {
    const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');
    WinPrint.document.write('');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.write('');
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
}

function printElement(selector) {

const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');

WinPrint.document.write('');

WinPrint.document.write(prtContent.innerHTML);

WinPrint.document.write('');

WinPrint.document.close();

WinPrint.focus();

WinPrint.print();

}

И вызовем ее:

printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

1	printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

JavaScript поиск массива в массиве

Дано: Фильтр по услугам: клейка обоев, выравнивание полов, покраска стен. Список работников, работник может делать что-то одно или несколько услуг. Фильтр (множество чекбоксов) Результаты (множество) Нужно вывести работников которые соответствуют хотя бы одному из фильтров по услугам. Представим что в фильтре выбраны некие услуги [1,2,3,5,6] Трансформации массива map

// вернет [true, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([1,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [true, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([1,10].indexOf(element) !== -1) {

return true;

}

});

// вернет [undefined, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([21,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [undefined, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([21,10].indexOf(element) !== -1) {

return true;

}

});

findIndex Вернет индекс из… Read More »

Js пример класса для slick Slider

Js ООП Class Slick slider

class SlickSlider {
    constructor(id, countShow, countScroll, idArrows, idDots) {
        this.elem = id;
        this.slidesToShow = countShow;
        this.slidesToScroll = countScroll;
        this.appendArrows = $(idArrows);
        this.appendDots = $(idDots);
        this.responsives = [];
    }

    get initSlider() {
        return this.init();
    }

    init() {
        let options = this.slider();
        if (this.responsives) {
            options.responsive = this.responsives;
        }
        $(this.elem).slick(options);
    }
    slider() {
        return {
            slidesToShow: this.slidesToShow,
            slidesToScroll: this.slidesToScroll,
            dots: true,
            appendArrows: this.appendArrows,
            appendDots: this.appendDots,
            touchThreshold: 10
        }
    }
    addResponsive(weight, mobileShow, mobileScroll) {
        let obj =  {
            breakpoint: weight,
            settings: {
                slidesToShow: mobileShow,
                slidesToScroll: mobileScroll
            }
        };

        this.responsives.push(obj);
    }
}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);
slider.addResponsive(1580, 2, 1);

slider.initSlider;

class SlickSlider {

constructor(id, countShow, countScroll, idArrows, idDots) {

this.elem = id;

this.slidesToShow = countShow;

this.slidesToScroll = countScroll;

this.appendArrows = $(idArrows);

this.appendDots = $(idDots);

this.responsives = [];

}

get initSlider() {

return this.init();

}

init() {

let options = this.slider();

if (this.responsives) {

options.responsive = this.responsives;

}

$(this.elem).slick(options);

}

slider() {

return {

slidesToShow: this.slidesToShow,

slidesToScroll: this.slidesToScroll,

dots: true,

appendArrows: this.appendArrows,

appendDots: this.appendDots,

touchThreshold: 10

}

addResponsive(weight, mobileShow, mobileScroll) {

let obj = {

breakpoint: weight,

settings: {

slidesToShow: mobileShow,

slidesToScroll: mobileScroll

}

};

this.responsives.push(obj);

}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);

slider.addResponsive(1580, 2, 1);

slider.initSlider;

jQuery check init plugin for element

Проверка плагина примененного к элементу jQuery

$('.catalog_filter_list:data(flickity)')

1	$('.catalog_filter_list:data(flickity)')

Нужно применить атрибут

$('ELEMENT:data(ПЛАГИН)')

1	$('ELEMENT:data(ПЛАГИН)')

pjax reload containter

$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

1	$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

Jquery no submit input key enter

Запретить отправку формы при нажатие на Enter в input можно следующим способом:

$('#formID').on('keyup keypress', function(e) {
    let keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        e.preventDefault();
        return false;
    }
});

$('#formID').on('keyup keypress', function(e) {

let keyCode = e.keyCode || e.which;

if (keyCode === 13) {

e.preventDefault();

return false;

}

});

Lazy load images/Отложенная загрузка картинок

let images = $('div.images img')
$.each(images, function( i, img ){
    let src = $(img).data('src');

    // check if img set
    if(src.length == 0){
        return;
    }

    // show image
    $(img).attr('src', src);

});

let images = $('div.images img')

$.each(images, function( i, img ){

let src = $(img).data('src');

// check if img set

if(src.length == 0){

return;

}

// show image

$(img).attr('src', src);

});

example

function lazyLoaderReady() {
    let banners = $('.slider_banner .slider_banner_item a img[data-src]');
    if (banners.length !== 0) {
        lazyShowImages(banners);
    }

    let slidersWithProducts = $('.itemSlider div li a .itemImg img[data-src]');
    if (slidersWithProducts.length !== 0) {
        lazyShowImages(slidersWithProducts);
    }
}
lazyLoaderReady();

function itemsInCategory() {
    let products = $('#products-list-view .items .item li a .itemImg img[data-src]');
    if (products.length > 0) {
        lazyShowImages(products);
    }
}

function lazyShowImages(images) {
    $.each(images, function( i, img ){
        let src = $(img).data('src');
        console.log(src);
        console.log($(img).attr('data-src'));
        // check if img set
        if (src) {
            if (src.length === 0) {
                return;
            }

            $(img).fadeTo(500,0.30, function() {
                $(img).attr("src", src);
            }).fadeTo(500,1);
            $(img).attr('data-src', null);
        }
    });
}

function lazyLoaderReady() {

let banners = $('.slider_banner .slider_banner_item a img[data-src]');

if (banners.length !== 0) {

lazyShowImages(banners);

}

let slidersWithProducts = $('.itemSlider div li a .itemImg img[data-src]');

if (slidersWithProducts.length !== 0) {

lazyShowImages(slidersWithProducts);

}

lazyLoaderReady();

function itemsInCategory() {

let products = $('#products-list-view .items .item li a .itemImg img[data-src]');

if (products.length > 0) {

lazyShowImages(products);

}

function lazyShowImages(images) {

$.each(images, function( i, img ){

let src = $(img).data('src');

console.log(src);

console.log($(img).attr('data-src'));

// check if img set

if (src) {

if (src.length === 0) {

return;

}

$(img).fadeTo(500,0.30, function() {

$(img).attr("src", src);

}).fadeTo(500,1);

$(img).attr('data-src', null);

}

});

}

Yii2 прелоудер/preloader для формы

$('#auth-form').on('ajaxBeforeSend', function (event, jqXHR, settings) {
    $('section.authForm .loader').show();
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
    $('section.authForm .loader').hide();
});

$('#auth-form').on('ajaxBeforeSend', function (event, jqXHR, settings) {

$('section.authForm .loader').show();

}).on('ajaxComplete', function (event, jqXHR, textStatus) {

$('section.authForm .loader').hide();

});

Добавление картинки при загрузке JS предпросмотр

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#image').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInput").change(function(){
    readURL(this);
});

//http://jsfiddle.net/YJG79/16/

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#image').attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

}

$("#imgInput").change(function(){

readURL(this);

});

//http://jsfiddle.net/YJG79/16/

JS загрузку и обработка файла

document.addEventListener("DOMContentLoaded", function() {
    var progress_cat = 0;
    var progress_file = 0;
    var progress_button = 0;
    var progress_upload = 0;
    var progress_converting = 0;
    var progress_handler = 0;
    document.getElementById('upload').onclick = function() {
        select = parseInt(document.getElementById('category_choose').value);
        name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;
        file_value = document.forms.upload_file.elements.file_excel.value;
        if (progressRefresh() >= 60) {
            UIkit.notification({
                message: 'Процесс уже запущен!',
                pos: 'bottom-right',
                status: 'warning'
            });
        } else {
            if (!select) {
                UIkit.notification({
                    message: 'Укажите категорию!',
                    pos: 'bottom-right',
                    status: 'warning'
                });
            } else {
                if (file_value) {
                    UIkit.notification({
                        message: 'Идет загрузка файла...',
                        pos: 'bottom-right',
                        status: 'primary'
                    });
                    progress_button = 20;
                    progressRefresh();
                }
                document.getElementById('spinner').classList.toggle('uk-hidden');
                uploadFile();
            }
        }
        return false;
    }
    document.getElementById('file_excel').onclick = function() {
        select = parseInt(document.getElementById('category_choose').value);
        if (!select) {
            UIkit.notification({
                message: 'Укажите категорию!',
                pos: 'bottom-right',
                status: 'warning'
            });
            return false;
        }
    }
    function uploadFile() {
        var form = document.forms.upload_file;
        var formData = new FormData(form);
        var req = new XMLHttpRequest();
        req.open("POST", 'handler.php');
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                request = JSON.parse(req.responseText);
                if (request.result) {
                    UIkit.notification({
                        message: request.success,
                        pos: 'bottom-right',
                        status: 'success'
                    });
                    progress_converting = 10;
                    progressRefresh();
                    handlerParse(select, request.name);
                } else {
                    UIkit.notification({
                        message: request.error,
                        pos: 'bottom-right',
                        status: 'danger'
                    });
                    progress_converting = 0;
                    progressRefresh();
                }
            }
        }
        req.upload.onprogress = function(event) {
            progressSuccess = event.loaded * 100 / event.total;
            progressBarUpload(progressSuccess);
        }
        req.send(formData);
    }
    document.getElementById('category_choose').onchange = function() {
        if (this.value > 0) {
            progress_cat = 20;
        } else {
            progress_cat = 0;
        }
        progressRefresh();
    }
    document.getElementById('file_excel').onchange = function() {
        file = document.forms.upload_file.elements.file_excel.value;
        if (file) {
            progress_file = 20;
        } else {
            progress_file = 0;
        }
        progressRefresh();
    }
    function progressBarUpload(progress) {
        UIkit.util.ready(function() {
            var bar = document.getElementById('js-progressbar-uploadFile');
            var divBar = document.getElementById('progress-upload');
            if (!divBar.style.display) {
                divBar.style.display = 'block';
            }
            bar.value = progress;
            if (bar.value >= 100) {
                divBar.style.display = "";
                UIkit.notification({
                    message: 'Файл загружен на сервер...',
                    pos: 'bottom-right',
                    status: 'success'
                });
                progress_upload = 20;
                progressRefresh();
            }
        });
    }
    function progressRefresh() {
        progress = progress_cat +
            progress_file +
            progress_button +
            progress_upload +
            progress_converting +
            progress_handler;
        document.getElementById('js-progressbar').value = progress;
        return progress;
    }
    function handlerParse(group, path) {
        var req = new JsHttpRequest();
        UIkit.notification({
            message: 'Идет обработка файла...',
            pos: 'bottom-right',
            status: 'primary'
        });
        req.open(null, 'handler_update.php', true);
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                request = JSON.parse(req.responseText);
                if (request.result) {
                    UIkit.notification({
                        message: request.success,
                        pos: 'bottom-right',
                        status: 'success'
                    });
                    progress_handler = 10;
                    progressRefresh();
                    setTimeout(success, 2000);
                } else {
                    UIkit.notification({
                        message: "Произошла ошибка!",
                        pos: 'bottom-right',
                        status: 'danger'
                    });
                    progress_handler = 0;
                    progressRefresh();
                }
            }
        }
        req.send({
            group: group,
            path: path
        });
    }
    function success() {
        name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;
        UIkit.modal.alert('Файл загружен и обработан: ' + name_category);
        document.getElementById('category_choose').value = document.getElementById('category_choose').options[0].text;
        document.getElementById('upload_file').reset();
        progress_cat = 0;
        progress_file = 0;
        progress_button = 0;
        progress_upload = 0;
        progress_converting = 0;
        progress_handler = 0;
        document.getElementById('spinner').classList.toggle('uk-hidden');
        progressRefresh();
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

document.addEventListener("DOMContentLoaded", function() {

var progress_cat = 0;

var progress_file = 0;

var progress_button = 0;

var progress_upload = 0;

var progress_converting = 0;

var progress_handler = 0;

document.getElementById('upload').onclick = function() {

select = parseInt(document.getElementById('category_choose').value);

name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;

file_value = document.forms.upload_file.elements.file_excel.value;

if (progressRefresh() >= 60) {

UIkit.notification({

message: 'Процесс уже запущен!',

pos: 'bottom-right',

status: 'warning'

});

} else {

if (!select) {

UIkit.notification({

message: 'Укажите категорию!',

pos: 'bottom-right',

status: 'warning'

});

} else {

if (file_value) {

UIkit.notification({

message: 'Идет загрузка файла...',

pos: 'bottom-right',

status: 'primary'

});

progress_button = 20;

progressRefresh();

}

document.getElementById('spinner').classList.toggle('uk-hidden');

uploadFile();

}

return false;

}

document.getElementById('file_excel').onclick = function() {

select = parseInt(document.getElementById('category_choose').value);

if (!select) {

UIkit.notification({

message: 'Укажите категорию!',

pos: 'bottom-right',

status: 'warning'

});

return false;

}

function uploadFile() {

var form = document.forms.upload_file;

var formData = new FormData(form);

var req = new XMLHttpRequest();

req.open("POST", 'handler.php');

req.onreadystatechange = function() {

if (req.readyState == 4) {

request = JSON.parse(req.responseText);

if (request.result) {

UIkit.notification({

message: request.success,

pos: 'bottom-right',

status: 'success'

});

progress_converting = 10;

progressRefresh();

handlerParse(select, request.name);

} else {

UIkit.notification({

message: request.error,

pos: 'bottom-right',

status: 'danger'

});

progress_converting = 0;

progressRefresh();

}

req.upload.onprogress = function(event) {

progressSuccess = event.loaded * 100 / event.total;

progressBarUpload(progressSuccess);

}

req.send(formData);

}

document.getElementById('category_choose').onchange = function() {

if (this.value > 0) {

progress_cat = 20;

} else {

progress_cat = 0;

}

progressRefresh();

}

document.getElementById('file_excel').onchange = function() {

file = document.forms.upload_file.elements.file_excel.value;

if (file) {

progress_file = 20;

} else {

progress_file = 0;

}

progressRefresh();

}

function progressBarUpload(progress) {

UIkit.util.ready(function() {

var bar = document.getElementById('js-progressbar-uploadFile');

var divBar = document.getElementById('progress-upload');

if (!divBar.style.display) {

divBar.style.display = 'block';

}

bar.value = progress;

if (bar.value >= 100) {

divBar.style.display = "";

UIkit.notification({

message: 'Файл загружен на сервер...',

pos: 'bottom-right',

status: 'success'

});

progress_upload = 20;

progressRefresh();

}

});

}

function progressRefresh() {

progress = progress_cat +

progress_file +

progress_button +

progress_upload +

progress_converting +

progress_handler;

document.getElementById('js-progressbar').value = progress;

return progress;

}

function handlerParse(group, path) {

var req = new JsHttpRequest();

UIkit.notification({

message: 'Идет обработка файла...',

pos: 'bottom-right',

status: 'primary'

});

req.open(null, 'handler_update.php', true);

req.onreadystatechange = function() {

if (req.readyState == 4) {

request = JSON.parse(req.responseText);

if (request.result) {

UIkit.notification({

message: request.success,

pos: 'bottom-right',

status: 'success'

});

progress_handler = 10;

progressRefresh();

setTimeout(success, 2000);

} else {

UIkit.notification({

message: "Произошла ошибка!",

pos: 'bottom-right',

status: 'danger'

});

progress_handler = 0;

progressRefresh();

}

req.send({

group: group,

path: path

});

}

function success() {

name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;

UIkit.modal.alert('Файл загружен и обработан: ' + name_category);

document.getElementById('category_choose').value = document.getElementById('category_choose').options[0].text;

document.getElementById('upload_file').reset();

progress_cat = 0;

progress_file = 0;

progress_button = 0;

progress_upload = 0;

progress_converting = 0;

progress_handler = 0;

document.getElementById('spinner').classList.toggle('uk-hidden');

progressRefresh();

}

});