Ответы пользователя по тегу JavaScript
  • Как Дублировать поле input?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Когда поле заполнено (модалка вызвана или ещё что-то - создай ивент...)
    contactValue = $('#contact').val()
    phoneInput = $('#contact-phone')
    phoneInput.ready ->
     phoneInput.val(contactValue)
    Ответ написан
  • На что ругаетcя Gulp при запуcке шаблона?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    import в js ... у тебя наверно babel не стоит. import это ведь require в ES6
    Ответ написан
    Комментировать
  • Npm 5 вместо bower?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    css через import 'node_modules/...'
    js через package = require('package')
    Ответ написан
  • Как разбить файл?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Есть такая фишка - gulp-load-plugins
    На моём гитхабе есть репа с генетаротом - там таски разбиты на файлы.
    https://github.com/WebKieth/yeogurt-glob
    Ответ написан
    Комментировать
  • Почему не работает formData с jquery ajax?

    ShadowOfCasper
    @ShadowOfCasper Автор вопроса
    Middle User Interface Web Developer
    UPD:
    Я решил свою проблему. Как оказалось данные в FormData формировались верно и отправлялись на сервер как надо. Однако свою роль сыграла проблема FormIt, с которой часто встречаются люди, заставляя работать несколько форм с FormIt на странице. Чтобы создать несколько форм, в вызов сниппета необходимо поместить параметр submitVar, а в отправляемых данных сформировать значение этого параметра в виде submitParam=submitParam. В скрипте выше этот фрагмент отмечен комментарием #bug solution for "submitVar param of FormIt".
    По итогу я сормировал данные в FormData, вложив туда по аналогии одинаковые ключ-значение submit-кнопки. Вышло как-то так:
    thisClassMod = thisActiveSubmitter.attr 'name'
            formData = new FormData()
            $.fn.serializefiles = (formData)->
                obj = $ this
                $.each $(obj).find("input[type='file']"), (i, tag) ->
                  $.each $(tag)[0].files, (i, file) ->
                    console.log tag.name, file
                    formData.append tag.name, file
                    return formData
                params = $(obj).serializeArray();
                submitName = {
                  name: thisClassMod
                  value: thisClassMod
                }
                params.push submitName
                console.log params
                $.each params, (i, val) ->
                  console.log val.name, val.value
                  formData.append val.name, val.value
                  return formData
                return formData;
            formData = thisMod.serializefiles(formData)

    В будущем я обновлю описание и оставлю ссылку на github с описанием применения модуля. Я нахожу его куда более лёгким и универсальным, чем ajaxForm Наумкина по трём причинам:
    1) Скрипт можно подружить не только с FormIt
    2) Он написан более чисто и хорошо масштабируется (например, вся валидация вынесена в отдельный свитчер и опирается на data-type в полях, а не на данные в вызове сниппета, что в свою очередь требует от сервера лишнего req-res)
    3) Скрипт написан только на jquery и не требует form.jquery.js и jgrowl - в .done -> и .fail -> можно вызвать любую модалку, которую хочется вызвать. Лично я написал свои, поскольку, опять же, плагины на js генерят динамические модалки, лишний раз нагружая браузер рендером разметки.
    Ответ написан
    Комментировать
  • В чем основные проблемы моего убогого слайдера?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Велосипедируете, господа.
    У swiper есть freemode и в его api стопроц можно докодить автоскроллинг с нужной скоростью.
    idangero.us/swiper/demos/09-freemode.html
    idangero.us/swiper/api
    Ответ написан
  • Как применить transition-эффкты к лайтбоксу (модальному окну) в плагине Wordpress Shortcodes Ultimate?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    На js анимации уже никто не пишет. Если и остались реализации, то только самых простых примеров переходов, типа .toggleSlide или .fadeOut, fadeIn от jQuery. Но такой способ не самый производительный. Лучше всего при переходах от одного к другому состоянию компонента использовать манипуляцию классов и переходы на css. Их бесчисленное множество
    https://codepen.io/anon/pen/ZKeNMy
    Ответ написан
    Комментировать
  • Как сделать добавление изображение к записи обязательным?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    input(type='file' value='path/to/file.jpg')
    Тебе нужно проверять value. В этом тебе поможет jquery, метод val() и наглядный работающий пример использования можешь найти тут:
    Проверка на val:
    https://github.com/WebKieth/Black-UI/blob/master/s...

    Работа с данными inputfile:
    https://github.com/WebKieth/Black-UI/blob/master/s...

    Советую покопаться - мне одно время пришлось углубиться в это и я посохранял всё в модули. демка есть:
    dropcogs.pro/Black-UI
    Ответ написан
    Комментировать
  • Как сделать onclick что бы срабатывало один раз?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Я просто оставлю это здесь
    api.jquery.com/one
    Ответ написан
    Комментировать
  • Не работает "ненавязчивая" проверка достоверности подгружаемой AJAX формы?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Дело в том, что если скрипт валидации ajax-формы был подгружен раньше разметки этой формы, то работать он не будет. Тебе нужно обернуть всю твою ajax-валидацию формы в отдельную функцию и вызвать её после подтяжки с сервера самой формы.
    Ответ написан
    2 комментария
  • Как подключить .js файл на macOS?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    js файл исполняется через nodejs. Убедись что он у тебя установлен, желательно версии не ниже 4.
    https://nodejs.org/en/download/
    далее через npm ставишь nodemon
    npm i nodemon -g
    исполняешь файл командой nodemon test.js
    Ответ написан
    Комментировать
  • Как сжать js файлы эффективно?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    gulp-uglify ничего не сжимает. Он переименовывает переменные. А jsmin сжимает
    https://www.npmjs.com/package/gulp-jsmin
    Ответ написан
    8 комментариев
  • Как правильно проверять заполненность формы на Javascript?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    У меня есть готовый модуль по БЭМ.
    Валидирует спам, проверяет по паттерну мыло, телефон, заполненность полей.
    https://github.com/WebKieth/Black-UI/tree/master/s...

    Демочка
    dropcogs.pro/Black-UI
    Ответ написан
  • Как оптимизировать стартовый шаблон для верстки?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Видимо, о скаффолдинге ты не слышал.
    Ставь yeo man + yeogurt и не *би му-му. А лучше вообще на Bem stack

    Ссылки:
    yeoman.io
    https://habrahabr.ru/post/246349/

    И вот мой любимый ген:
    https://github.com/larsonjj/generator-yeogurt

    Ну а про БЭМ читай тут. Правда яваскрипт нужен хороший. Если плохо его шаришь - не стоит.
    https://ru.bem.info/
    Ответ написан
  • Как сравнить строковые переменные js?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    https://learn.javascript.ru/comparison
    Если у тебя i - число и b строка - они уже не будут равны. Несмотря на схожесть содержимого.

    И, блин, что значит не работает? Что тут вообще может работать?))) Даже если ты напишешь правильный оператор - ничего не заработает))) В тело условия нужно что-то положить, хотя бы console.log(i != b) - тебе правильный булеан в консоль упадёт
    Ответ написан
  • Какой select на Javascript использовать?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    В моей библиотеке компонентов есть select, он тоже на jQuery, но там всего 21 строка. Можно вдуматься и конвертнуть в ванильный js.
    https://github.com/WebKieth/Black-UI/tree/master/s...
    Ответ написан
    Комментировать
  • Кроп как в твитере?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    а в чём сложность самому написать? у нас блок с overflow:hidden. Внутри картинка. Это во-первых - не делай через background-image - это неправильно. Правильно зарусовать в блок картинку, а на картинку написать несколько коллбэков. 1) ontouchstart - хватать оффсеты картинки и передавать в transform: translate(). 2) По ontouchmove следить на позицией курсора и обновлять transform: translate().
    Я писал что-то подобное на одном проекте, постараюсь найти и сделать UPD
    Нашёл. Но тут ещё и scale есть, так как я делал приближалку для галереи - оно почти одинаково реализуется. Он тебе не нужен. Я выделнул кусок из своей галереи, так что просто установить чтоб сразу работал не выйдет - переопредели переменные.
    var swipeStart	 = 0,
    						swipeEnd	 = 0,
    						imagePosLeft = 0;
    						
    						var startCoordX = 0, startCoordY = 0, currentCoordX = 0, currentCoordY = 0, translateX = 0, translateY = 0;
        				
                           
                            var scale = 2.5,
                            translate = { x: 0, y: 0 },
                            startCoords,
                            currentCoords;
                            console.log(image);
                            var updateImgTransform = function (withScale) {
                                var translateX = currentCoords.x - startCoords.x + translate.x,
                                translateY = currentCoords.y - startCoords.y + translate.y;
                                if (withScale) {
                                    image.css({"transform":"scale(" + scale + ") translate(" + translateX / scale + "px, " + translateY / scale + "px)"});
                                } else {
                                   image.css({"transform":"translate(" + translateX + "px, " + translateY + "px)"});
                                }
                            };
                            
                            var ontouchstart = function (e) {
                                startCoords = currentCoords = {
                                    x: e.originalEvent.touches[0].clientX,
                                    y: e.originalEvent.touches[0].clientY
                                };
                            
                                updateImgTransform(true);
                                image.on("touchmove", ontouchmove);
                                image.on("touchend", ontouchend);
                            };
                            
                            var ontouchmove = function (e) {
                                image.addClass('looped');
                                currentCoords = {
                                    x: e.originalEvent.touches[0].clientX,
                                    y: e.originalEvent.touches[0].clientY
                                };
                            
                                updateImgTransform(true);
                            };
                            
                            var ontouchend = function (e) {
                                updateImgTransform(true);
                            
                                translate.x += currentCoords.x - startCoords.x;
                                translate.y += currentCoords.y - startCoords.y;
                            
                                image.off("touchmove", ontouchmove);
                                image.off("touchend", ontouchend);
                            };
                            
                            image.on("touchstart", ontouchstart);
    Ответ написан
  • Почему прерывается поток трансляции в audio?

    ShadowOfCasper
    @ShadowOfCasper Автор вопроса
    Middle User Interface Web Developer
    В firefox всё работало, проблема была только в chrome. Перековыряя весь stackoverflow я наткнулся на решение. buzz.jaysalvat.com
    Собственно запилил скрипт по докам и всё пашет грамотно и без косяков
    Ответ написан
    Комментировать
  • Сработает ли трюк динамической подставки .url в ajax отправке письма?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Во-первых, при добавлении каждой новой формы ты будешь открывать скрипт и кидать в $() новый идентификатор. Удобно?
    Во-вторых ^*%^$^*&WTF - ты серьёзно решил для каждой формы писать отдельный php? Ну флаг в руки конешн...
    В-треьих, тебе бы валидацию добавить, раз уж по сабмиту аяксишь, перед аяксом валидируй правильность заполнения полей, установи защиту от спама....

    Как пример кину тебе небольшой скрипт ajax, который я применял в последнем проекте для валидации отправки номеров телефонов и мыл. Скрипт написан с учётом того что форм на странице может быть много.

    var ajaxFastForms = function (){
        var moduleName = 'fastform';
        var fastform = $('.'+moduleName+':not(.'+moduleName+'--calltracker)');
        fastform.submit(function(e){
            e.preventDefault();
            var thisForm = $(this),
            thisSubmitter = thisForm.find('.'+moduleName+'__submit'),
            thisField = thisForm.find('.'+moduleName+'__input'),
            thisFieldValue = thisField.val(),
            thisFieldSpamValue = thisForm.find('.'+moduleName+'__spamkiller').val();
            
            if(thisFieldSpamValue === ''){
                //если скрытое поле пусто
                if(thisFieldValue != ''){ //если форма воода заполнена
                    var regNumber = new RegExp("^[0-9]{11}");
                    var regMail = new RegExp("^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$");
                    if( regMail.test(thisFieldValue) || regNumber.test(thisFieldValue)){
                        //если проходит тесты паттернов
    
                        var url = (typeof thisForm.attr("action") == 'undefined') ? "[[~[[*id]]]]" : thisForm.attr("action"); //берём урлу страницы, если таковая есть в action
    
                        //формируем запрос к серверу
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: thisForm.serialize(),
                            success: function(response){
                                notie.alert(1,'Форма успешно отправлена. Наши менеджеры свяжутся с вами в ближайшее время', 4);
                            }
                        }).fail(function(error){
                            console.log(error);
                            notie.alert(3, 'Возникла ошибка на сервере<br> Очистите кэш браузера,  перезагрузите страницу и попробуйте снова', 5);
                        });
    
    
                    }else{//если не проходит тесты паттернов
                        notie.alert(2,'В форме содержатся ошибки.Проверьте правильность заполнения полей:<br> вводите номер только цифрами, например 89991112233',5);
                    }
                }else{
                    //если Форма ввода не заполнена
                    notie.alert(2,'Форма ввода не заполнена',2.5);
                };
    
            }else{
                //если скрытое поле заполнено
                notie.alert(3,'Валидация на СПАМ не пройдена.<br>Перезагрузите страницу и попробуйте снова',2.5);
            };
        });
    }
    module.exports = ajaxFastForms;

    Тут на самом то деле не всё гладко. Можно было switch case заюзать. Но я плохо с ними знаком
    UPD
    Там url может показаться странным - [[~[[*id]]]] - это ссылка на текущий документ в MODX. Просто backend на MODX и писал под него. На странице вызывается плагин отправки FormIt, следовательно и скрипт находится в моём случае по текущему адресу. В твоём случае лучше всего будет писать url php-скрипта в action формы и подхватывать его в url функции ajax.
    Ответ написан
    6 комментариев
  • Как разобраться с npm?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Как всё запущено. Пациент скорее мёртв чем жив...

    sudo apt-get remove node npm
    sudo apt-get purge node npm
    sudo apt-get update && sudo apt-get upgrade
    curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
    sudo apt-get install -y nodejs
    Ответ написан
    Комментировать