Архив рубрики: WEB

WEB

Загрузка js и css «по требованию»

25.05.2021 Павел Грибов Оставить комментарий

Задача: по какому то условию (ну в моем случае это загрузка скрипта «Тура по сайту» если вдруг пользователь его не проходил), необходимо до грузить дополнительные JS и CSS файлы, а по завершению их загрузки — запустить.

Решение:

function TourStart(){
    if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){
        element = document.createElement("script");
        element.src = "https://shepherdjs.dev/dist/js/shepherd.js";
        element.addEventListener('load', () => {
            console.log("--загружаем тур!");
            element = document.createElement("script");
            element.src = "/js/tour.min.js";
            document.body.appendChild(element);
        });
        document.body.appendChild(element);
        element = document.createElement("link");
        element.href = "https://shepherdjs.dev/dist/css/shepherd.css";
        element.rel="stylesheet"
        document.body.appendChild(element);        
        
    };
};

console.log("-- main.js загружен");
$(document).ready(function() {
   TourStart(); // стартовать тур по странице если нужно..
});

function TourStart(){

if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){

element = document.createElement("script");

element.src = "https://shepherdjs.dev/dist/js/shepherd.js";

element.addEventListener('load', () => {

console.log("--загружаем тур!");

element = document.createElement("script");

element.src = "/js/tour.min.js";

document.body.appendChild(element);

});

document.body.appendChild(element);

element = document.createElement("link");

element.href = "https://shepherdjs.dev/dist/css/shepherd.css";

element.rel="stylesheet"

document.body.appendChild(element);

};

console.log("-- main.js загружен");

$(document).ready(function() {

TourStart(); // стартовать тур по странице если нужно..

});

WEB

Скачивание файла посредством JQuery

11.05.2021 Павел Грибов Оставить комментарий

В принципе алгоритм следующий и простой: при нажатии некой кнопки например, мы создаем ссылку с атрибутом download и программно её нажимаем. Код, что-то вроде:

	var link = document.createElement('a');
	link.setAttribute('href',  'https://цувцу.ru/u/'+POPUP_CODE_SMS.value);
	link.setAttribute('download', 'uvцувцувed.pdf');
	link.click();

var link = document.createElement('a');

link.setAttribute('href', 'https://цувцу.ru/u/'+POPUP_CODE_SMS.value);

link.setAttribute('download', 'uvцувцувed.pdf');

link.click();

WEB

Сборка JS и CSS для продакшена при помощи npm grunt

22.04.2021 Павел Грибов Оставить комментарий

В жизни каждого ~~программиста~~ мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.

Установка:

npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev

npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev

Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:

module.exports = function(grunt) {
  grunt.initConfig({
    // 1.  эти файлы сжимаем
    uglify: {
            my_target: {
                files: {
                    'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'],
                    'public/js/main.min.js': ['assets/js/main.js']
                }
        }
    },
    // 2. задача по отслеживанию изменений
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'],
        tasks: ['uglify'], //сжимаем
        options: {
          livereload: true
        }
      }
    }    
    
    });               
    // 3. Сообщаем, какие плагины мы собираемся использовать
    grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие
 
    // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.
    grunt.registerTask('default', ['uglify']);
    grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений
};

module.exports = function(grunt) {

grunt.initConfig({

// 1. эти файлы сжимаем

uglify: {

my_target: {

files: {

'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'],

'public/js/main.min.js': ['assets/js/main.js']

}

// 2. задача по отслеживанию изменений

watch: {

source: {

files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'],

tasks: ['uglify'], //сжимаем

options: {

livereload: true

}

});

// 3. Сообщаем, какие плагины мы собираемся использовать

grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие

// 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.

grunt.registerTask('default', ['uglify']);

grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений

};

Теперь если в консоли введёте:

grunt watch

1 2	grunt watch

То запустится и будет висеть задача отслеживания изменений и минимификации файлов.

WEB

JavaScript именованные массивы как набор записей

18.03.2021 Павел Грибов Оставить комментарий

Обычно для этой цели используют конструкцию Map, однако лично мне не нравится его синтаксис, когда для доступа необходимо использовать get /set. Поэтому я обычно использую создание объекта. Т.е. получается что-то вроде:

// набор записей
TBokings=new Object();
TBokings={
  x:0,
  x1:0,
  starttime:"12:00",
  endtime:"13:00",
  status:"busy"
};
// сам массив
ArrBooking=new Array();

///добавление в массив
  TBokings.x=startRectX;
  TBokings.x1=EndRectX;
  TBokings.starttime=item.DtFrom_UTC;
  TBokings.endtime=item.DtTo_UTC;
  TBokings.status="busy";
  ArrBooking.push(Object.assign({}, TBokings));      

// перебор массива

ArrBooking.forEach(function(item){
	console.log(item);
});

// набор записей

TBokings=new Object();

TBokings={

x:0,

x1:0,

starttime:"12:00",

endtime:"13:00",

status:"busy"

};

// сам массив

ArrBooking=new Array();

///добавление в массив

TBokings.x=startRectX;

TBokings.x1=EndRectX;

TBokings.starttime=item.DtFrom_UTC;

TBokings.endtime=item.DtTo_UTC;

TBokings.status="busy";

ArrBooking.push(Object.assign({}, TBokings));

// перебор массива

ArrBooking.forEach(function(item){

console.log(item);

});

WEB

CSS: Выравнивание содержимого блоков по вертикали

05.03.2021 Павел Грибов Оставить комментарий

Чтобы получилось нечто подобное:

HTML:

    <div class="tile2">
        <div class="icons_left"><img height="32px" src="/images/list.png"></div>
        <div class="icons_right" ><img height="32px" src="/images/heart.png"></div>
    </div>

</div>

CSS:

.tile2{
    grid-template-columns: 50% 50%;
    display: flex;
    height: 100%;    
}
.tile2>.icons_left {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: end;
    margin:  auto;
    cursor: pointer;
} 
.tile2>.icons_right {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: left;
    margin:  auto;
    cursor: pointer;
}

.tile2{

grid-template-columns: 50% 50%;

display: flex;

height: 100%;

}

.tile2>.icons_left {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: end;

margin: auto;

cursor: pointer;

}

.tile2>.icons_right {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: left;

margin: auto;

cursor: pointer;

}

Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

ЖЗГ

Архив рубрики: WEB

Загрузка js и css «по требованию»

Скачивание файла посредством JQuery

Сборка JS и CSS для продакшена при помощи npm grunt

JavaScript именованные массивы как набор записей

CSS: Выравнивание содержимого блоков по вертикали

Жизнь замечательных грибов