Занятие на вечер: ресайзинг элементов на pure JS

    Выдался ещё один свободный вечер, сегодня будем делать полноценный resizable в любую сторону для любых элементов (div, изображений, чего угодно) на чистом JavaScript.

    Демо-страничка: Resizable.js

    Подход №0

    Сделать восемь висячих дивов-ресайзеров: четыре из них — полоски по вдоль боков элемента, ещё четыре — по углам. При ресайзе изменять размеры элемента, а также тащить дивы-ресайзеры.

    Минусы очевидны:

    • Много повторяющегося кода
    • Неудобно: придётся работать и с элементом, и с ресайзерами
    • Просто стыдно показывать кому-то такой скрипт

    Подход №1

    При mousemove элемента проверять, не находится ли курсор у края элемента. Если да, назначаем соответствующий стиль курсора (например, при наведении на верхний правый край будет ne-resize), если нет — назначаем курсор default.

    При mousedown элемента делаем такую же проверку. Если да — начинаем ресайз в нужную сторону, если нет — ничего не делаем.

    Пишем вспомогательную функцию direction(), которая и будет определять, на каком крае элемента находится курсор. Она будет возвращать либо число от 0 до 7 (0 — ресайз вверх, 1 — вправо и т.д.; 4 — ресайз вверх и вправо, 5 — вправо и вниз и т.д. по часовой стрелке). Если 8 — курсор не у края элемента, ресайз не начинать.

    function direction( elem, event, pad ) {
    	var res = 8;
    	var pad = pad || 4;
    	var pos = elem.getBoundingClientRect();
    	var top = pos.top;
    	var left = pos.left;
    	var width = elem.clientWidth;
    	var height = elem.clientHeight;
    	var eTop = event.clientY;
    	var eLeft = event.clientX;
    	// [...]
    

    Названия аргументов говорят за себя: elem — элемент, подлежащий ресайзингу, event — объект события mousemove или mousedown элемента, а pad — максимальный отступ от границ в пикселях (по умолчанию 4px), при котором можно начинать ресайз. Т.е. при наведении мышью ближе чем на 4 пикселя к краю изменится курсор и при нажатии мыши начнётся ресайз.

    Отталкиваясь от размеров и координат элемента, а также от координат события, выясняем у какого края находится курсор:

    var isTop = eTop - top < pad;
    var isRight = left + width - eLeft < pad;
    var isBottom = top + height - eTop < pad;
    var isLeft = eLeft - left < pad;
    if ( isTop ) res = 0;
    if ( isRight ) res = 1;
    if ( isBottom ) res = 2;
    if ( isLeft ) res = 3;

    Это ещё не всё — надо также учесть ресайз по диагонали:

    if ( isTop && isRight ) res = 4;
    if ( isRight && isBottom ) res = 5;
    if ( isBottom && isLeft ) res = 6;
    if ( isLeft && isTop ) res = 7;
    return res;		// если ни одно из условий не сработает,
    			// то res так и останется 8

    Введём вспомогательную переменную для назначения стиля курсора. Она понадобится нам в дальнейшем.

    var cursors = "n w s e ne se sw nw".split(" ");

    Теперь приступим непосредственно к написанию кода Resizable().

    function Resizable( elem, options ) {
    	options = options || {};
    	options.max = options.max || [1E17, 1E17];
    	options.min = options.min || [10, 10];
    	options.allow = (options.allow || "11111111").split("");
    	// [...]
    

    Здесь max и min — максимальные и минимальные размеры элемента, а allow — разрешённые направления (например, значение «11110000» запретит ресайз по диагонали).

    Меняем курсор при наведении мышки близко к краю:

    elem.addEventListener( "mousemove", function ( e ) {
    	var dir = direction( this, e );
    	if ( options.allow[dir] == "0" ) return;
    	this.style.cursor = dir == 8 ? "default" : cursors[ dir ] + "-resize";
    	// вот и пригодилась cursors
    } );

    При mousedown элемента вызываем функцию resizeStart, код которой будет дальше. Также запрещаем выделение текста при ресайзе.

    elem.addEventListener( "mousedown", resizeStart );
    document.body.onselectstart = function (e) { return false };

    Значения options уже не будут доступны в resizeStart, поэтому закэшируем их, чтобы пользоваться в будущем.

    elem.min = options.min;
    elem.max = options.max;
    elem.allow = options.allow;
    elem.pos = elem.getBoundingClientRect();

    Половина работы уже сделана — осталось только менять размеры элемента, основываясь на direction(). С ресайзом вправо и вниз всё просто — надо лишь менять высоту и ширину, а вот при ресайзе вверх и влево придётся менять и координаты элемента. Но обо всём по порядку.

    function resizeStart( ev ) {
    	var dir = direction( this, ev ); // вычисляем направление
    	if ( this.allow[dir] == "0" ) return; // если направление не разрешено, отменяем ресайз
    	document.documentElement.style.cursor = this.style.cursor = cursors[ dir ] + "-resize";
    	var pos = this.getBoundingClientRect();
    	var elem = this; // для работы в mousemove документа
    	var height = this.clientHeight;
    	var width = this.clientWidth;
    	// при каждом движении мыши на документе будет
    	// срабатывать resize(). Её определение будет ниже.
    	document.addEventListener( "mousemove", resize );
    	// при отпускании кнопки мыши удаляем обработчик
    	// и ставим стандартный курсор
    	document.addEventListener( "mouseup", function () {
    		document.removeEventListener( "mousemove", resize );
    		document.documentElement.style.cursor = elem.style.cursor = "default";
    		document.body.onselectstart = null;
    	});
    };

    Последний рубеж — внутренняя функция resize(), которая и будет осуществлять всю работу.

    function resize ( e ) {
    	// при ресайзе вверх либо вверх и вправо либо вверх и влево
    	// изменяем высоту и отступ сверху
    	// все остальные if-ы работают так же
    	if ( dir == 0 || dir == 4 || dir == 7 ) {
    		elem.style.top = e.clientY - ev.clientY + pos.top;
    		elem.style.height = height + ev.clientY - e.clientY;
    	}
    	if ( dir == 1 || dir == 4 || dir == 5 ) {
    		elem.style.width = e.clientX - pos.left;
    	}
    	if ( dir == 2 || dir == 5 || dir == 6 ) {
    		elem.style.height = e.clientY - pos.top;
    	}
    	if ( dir == 3 || dir == 6 || dir == 7 ) {
    		elem.style.left = e.clientX - ev.clientX + pos.left;
    		elem.style.width = width + ev.clientX - e.clientX;
    	}

    Дополнительные ограничения: при ресайзе сверху вниз либо справа влево при достижении минимальной высоты либо ширины соотвественно, элемент начинает сдвигаться вниз либо вправо без изменения размеров. Поэтому делаем такую проверку:

    if ( e.clientY + elem.min[1] > ev.clientY + height ) return;
    if ( e.clientX + elem.min[0] > ev.clientX + width ) return;

    Также проверяем, если достигнут минимальный или максимальный размер:

    if ( elem.clientHeight < elem.min[1] ) elem.style.height = elem.min[1];
    if ( elem.clientWidth < elem.min[0] ) elem.style.width = elem.min[0];
    if ( elem.clientHeight > elem.max[1] ) elem.style.height = elem.max[1];
    if ( elem.clientWidth > elem.max[0] ) elem.style.width = elem.max[0];
    if ( e.clientY < pos.bottom - elem.max[1] ) elem.style.top = pos.bottom - elem.max[1];
    if ( e.clientX < pos.right - elem.max[0] ) elem.style.left = pos.right - elem.max[0];

    Не знаю, можно ли это было сделать элегантнее… В любом случае, надо работать и с размером элемента, и с его координатами, и с координатами события, и всё это опираясь на результат direction(), да ещё и с учётом мин./макс. размеров.

    В общем, плагин готов. Исходник на js здесь, а пример работы как всегда в самом начале.

    Бонус: анимированный resizable


    Демо-страничка: Resizable 2.0

    Принцип работы схож, только ресайзится не сам элемент, а создаваемый див:

    var helper = document.createElement( "DIV" );
    document.body.appendChild( helper );
    helper.style.cssText = "position: fixed; border: 1px dashed black";
    helper.style.width = width;
    helper.style.height = height;
    helper.style.top = pos.top;
    helper.style.left = pos.left;

    В if-ах, написанных выше, вместо elem будет helper.

    При mouseup документа анимируем элемент до размеров хелпера, а хелпер удаляем:

    document.addEventListener( "mouseup", function () {
    	document.removeEventListener( "mousemove", resize );
    	document.documentElement.style.cursor = elem.style.cursor = "default";
    	document.body.onselectstart = null;
    	var newpos = helper.getBoundingClientRect();
    	var start = new Date().getTime();
    	setTimeout( animate, 10 );
    	function animate() {
    		var m = (new Date().getTime() - start) / 300;
    		if (m > 1) m = 1;
    		elem.style.top = pos.top + (newpos.top - pos.top) * m;
    		elem.style.left = pos.left + (newpos.left - pos.left) * m;
    		elem.style.height = height + (helper.clientHeight - height) * m;
    		elem.style.width = width + (helper.clientWidth - width) * m;
    		if (m < 1) setTimeout( animate, 10 );
    	}
    	setTimeout( function () {document.body.removeChild( helper );}, 310 );
    });
    

    Вот впрочем и всё, что я хотел сказать.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 53
    • +12
      Курсор мерцает и продолжаете учить вредному setTimeout, эх вы
      • –4
        Request Animation frame для DOM почти никак не лучше(только куллер жужжать начинает сильнее и, как мне показалось, на Linux в FF дело еще плачевнее чем с SetTimeout ибо тормозит). Да и баг связанный с превышением расчетной величины в ожидаем заданный интервал существует и тут и там.

        В Safari ничего не мерцает.
        • –1
          requestAnimationFrame тут тоже совершенно не нужен
          • +1
            Он должен задействовать GPU для перерисовки и не более. В этом примере это действительно слишком мелочный вариант применения. А в setTimeout ничего плохого нет, а то скоро начнут рекомендовать все подрят на Request AF делать, что будет бесспорным идиотизмом.
            • +2
              И в setTimeout, и в requestAnimationFrame плохо то, что их обоих с успехом заменяет CSS3 transition+transform. Они оба не нужны ни тут, ни в предыдущем посте автора (о чём я там уже писал)
              • –3
                А вы сами попробуйте этот пример решить на tran\ition\form и посмотрите что получится. Вам все равно придется анимировать какие-то величины и что из этого хорошего выйдет. Это опять же мне так кажется злоупотребление технологией. И вообще не понимаю почему люди тут же стремятся все перековеркать на CSS лад. Разве то что. пытаются сделать средствами CSS не является костылем с нетипичным исходом? Зачем?
                • +3
                  Спервадобейся? Да пожалуйста: https://home.andreymal.org/files/resizable2/
                  Только вот по пути выяснилось, что в скрипте ещё очень много косяков (да он даже в HTML5 не работает блин!), и его бы по-хорошему с нуля переписать, но у меня дела поважнее есть
                  • –1
                    Да не в этом дело. Если у этого блока будут еще тени и градиенты он начнет дёргаться в Linux. у них вообще все плохо с графикой, что уж о GPU говорить. Только это меня останавливает использования transform и transition для таких вещей как resize. Можно всякие hover эффекты делать это здорово, но опять же взять IE 11 — там тоже до сих пор все туго.
                    • +1
                      А, ну это уже другая тема. Но это сильно зависит от браузера, ОС, фазы Луны и хз чего ещё: у меня transform умудрялся глючить и на Safari в macOS, в то же время в моём Firefox на Linux всё прекрасно (в IE11 под виртуалбоксом, емнип, тоже), да и от юзеров моих сайтов жалоб не поступало. Если это основная причина использования setTimeout, тогда ладно
                      • –1
                        А что сделать с теми пользователями которые до сих пор сидят на Win7 и старом железе иначе? Это большинство государственных учреждений и они как бы тоже платежеспособны, если для вас решающим, к примеру, является фактор выгоды и все хотите при этом делать максимально современно.

                        Как бы есть конечно сегменты, где это не так важно, но в основном обратите внимание на то, что так почти никто не поступает сегодня и наврядли начнет поступать завтра.

                        Мне почему то казалось что вопрос доступности не «другой», а основной.
                        • +1
                          Важна доступность или рюшечки?

                          Если первое, то ничего страшного в редких глюках transform нет, или даже вообще в отсутствии transform: некоторые из моих сайтов активно юзают сие и при этом прекрасно работают в IE8, просто без анимаций. Госучреждениям анимашки тоже не особо важны.

                          Если второе, то… не надо так. Лично я старательно избегаю таких случаев, сайты должны пользу приносить, а не хвастаться анимашками и скруглёнными уголками div'ов
                          • 0
                            Подсознательно не хочу возвращаться в тот ад когда поддерживал IE6. Дизайнеры рисовали кругленькое и с тенями, но CCS3 работал только в Chrome, FF и Opera. Приходилось использовать тяжеленные полифилы на htc расширениях и это все так неуклюже работалось что хотелось просто вернуться к таблицам и нарезке микроскопических скруленных уголков.

                            Оно не просто тормозило, оно реально через раз подвешивало страницу.

                            Из всего этого опыта люди не начали делать более гибкие полифилы, они начали убивать красивое и делать все плоским. Виной тому MS, хоть и IE6 и IE7 подохли наконец-то.

                            Собственно, я сейчас смотрю на такие же явления в области JS. Модные фреймворки и ES6 или ES7, тонны полифилов и перекомпиляторов в традиционно поддерживаемый формат.

                            Я почему то думаю, что опять же из-за IE\Edge эти варианты убьют в скором времени. Ибо, всему свое время и спешить в принципе смысла нет.

                            Ни к чему это делать. Мир не изменится в одночасье…

                            Собсно, сабж, имхо.
                            • 0
                              Подсознательно не хочу возвращаться в тот ад когда поддерживал IE6.

                              Не возвращайтесь. Изящную деградацию для того и придумали.
                              Из всего этого опыта люди не начали делать более гибкие полифилы, они начали убивать красивое и делать все плоским. Виной тому MS, хоть и IE6 и IE7 подохли наконец-то.

                              Мода на плоский дизайн появилась и распространялась теми, кто на IE6 даже не смотрел. Майкрософт с его метро ну никак не рассчитан на старые браузеры и ОС, они МС как ком в горле, Apple c их последними iOS уж точно не думаю ни про IE 6, ни даже про IE11.
                              Я уж молчу про то, что причиной убийства всего «красивого» было то, что эти рюшечки всем надоели, людям нужно использовать сайты по назначению, а не глядеть на красивые кругленькие кнопочки с тенями.
                              • 0
                                Кому надоели? MS не захотели потратиться на дизайнеров и как следствие получился унылый деградрющий UI, а сотни разработчиков, которые этим вдохновились начали петь дифирамбы.

                                Разве Apple себе позволили сделать систему столь убогой?

                                Да и к чему это все про метро и киоск. Подойдите к любому киоску например для выдачи талонов на прием в больнице, пните по нему и увидите там или Win Xp или 7.

                                Это никому нахрен не нужно.
                                • 0
                                  Кому надоели?

                                  Да большинству. Вы что, из тех, кому нравится тенюшки, градиенты и сквеморфизм вместо функциональности?
                                  MS не захотели потратиться на дизайнеров и как следствие получился унылый деградрющий UI

                                  На деле МС сильно потратился на специалистов по UI.
                                  Разве Apple себе позволили сделать систему столь убогой?

                                  Вы iOS 7 и выше разве не видели?
                                  Подойдите к любому киоску например для выдачи талонов на прием в больнице, пните по нему и увидите там или Win Xp или 7.

                                  Потому что там всё равно одна программа, развёрнутая на весь экран, и там действительно не важно, что стоит внутри. Хоть ms-dos.
                                  • 0
                                    > Да большинству. Вы что, из тех, кому нравится тенюшки, градиенты и сквеморфизм вместо функциональности?

                                    А что наличие фреймворка или какой-то методологии это что тоже показатель функциональности? jQuery к примеру убьет функциональностью любой Фреймворк если взять в расчет плагины. Потому что это наглядно и эффектно. Тоже самое касается рюшечек как вы их называете они наглядные. Потребителю насрать на код.

                                    > Вы iOS 7 и выше разве не видели?

                                    Что вы хотите этим сказать? Если сравнить с Windows mobile — то все очевидно. Как жопу с пальцем.

                                    > Потому что там всё равно одна программа, развёрнутая на весь экран, и там действительно не важно, что стоит внутри. Хоть ms-dos.

                                    Я чета ни на одном терминале не видел Flat design и отсутствия рюшечек как в интерфейсе убогой Win 8-10. Все как-то стараются сделать красиво ;)

                                    • 0
                                      Тоже самое касается рюшечек как вы их называете они наглядные.

                                      Как градиент на кнопке увеличивает её наглядность?
                                      Что вы хотите этим сказать?

                                      Что там убили сквеморфизм, вестимо.
                                      Я чета ни на одном терминале не видел Flat design

                                      Да они вообще выглядят ужасно, и обновляются разве что в сторону увеличения количества рекламы и ненужных действий.
                                      убогой Win 8-10

                                      Вин10 выглядит отлично, как по мне. Не хуже моей WinXP.
                                      • 0
                                        > Как градиент на кнопке увеличивает её наглядность?

                                        Правильный.

                                        > Что там убили сквеморфизм, вестимо.

                                        А ну это уже винду вините :) Они не сделали и остальные подумали 'А зачем, если они не сделали'. Мне Aero стеклышки в 7 нравились.

                                        > Да они вообще выглядят ужасно, и обновляются разве что в сторону увеличения количества рекламы и ненужных действий.

                                        Ой не все. Загляните в пенсионный фонд или больницу.

                                        > Вин10 выглядит отлично, как по мне. Не хуже моей WinXP.

                                        Что отличного то? Я вот пока тему оформления не поменял и не понаставил патчей пользоваться ей вообще не хотелось. Да и то не прокатилась из-за того что интерфейс делан двумя разными людьми(пример проводник и панель настроек — два разных типа окон и туда даже тема не применяется). А эти модные квадратные переключатели, а эти битые шрифты у которых даже сглаживания почему-то нет даже в приложениях типа Edge. А это алфавитное говно в некогда прекрасном меню пуск? Вы все это находите оригинальным и достойным называться прорывом чтоли?

                                        Хотя мне насрать, я на Mac OS X сижу уже лет 8 и вижу что кое что в плане сквеморфизма изменилось и тут, но просто Apple сделать все настолько говном себе не позволили. Даже Linux такого говна не сделали.

                                        • 0
                                          Правильный.

                                          Как? Вот прямо под этим окном, в котором я набираю текст, есть кнопки без теней и градиента. И они прекрасно видны.
                                          А ну это уже винду вините :)

                                          Apple повелась на поводу у Microsoft?
                                          Загляните в пенсионный фонд или больницу.

                                          Я там работаю, в больнице. Стоит один убогий аппарат для галочки, с убогим интерфейсом и невнятным предназначением. И им вообще никто не пользуется, ну разве что потыкают, перепутав с терминалом пополнения.
                                          а эти битые шрифты у которых даже сглаживания почему-то нет

                                          Там прекрасное монохромное сглаживание.
                                          А это алфавитное говно в некогда прекрасном меню пуск?

                                          С этим полностью согласен, раскрывающийся список из ХР на порядок удобнее.
                                          Хотя мне насрать, я на Mac OS X сижу уже лет 8 и вижу что кое что в плане сквеморфизма изменилось и тут

                                          Толи ещё будет.
                                          • 0
                                            > Как? Вот прямо под этим окном, в котором я набираю текст, есть кнопки без теней и градиента. И они прекрасно видны.

                                            15 секунд. Код из гереатора без подбора цвета.

                                            http://hostingkartinok.com/show-image.php?id=dc613cbd25c61a9510ac0af6aa83f827

                                            > Apple повелась на поводу у Microsoft?

                                            Как бы печально ни было, но этим говном свойственны вдохновляться не только пользователи. Хотя здесь скорее сыграло на руку отсутствие внятной конкуренции.

                                            > Там прекрасное монохромное сглаживание.

                                            У меня как ни странно все шрифты в песке по краям, не считая тех, которые на рабочем столе с тенями. видно не вооруженным глазом.

                                            > С этим полностью согласен, раскрывающийся список из ХР на порядок удобнее.

                                            Скажите спасибо, что они хоть это сделали. Мы с разработчиками над ними месяц издевались через прослушку и угорали над убогостью меню, еле уговорив MS сделать хотя б алфавитный порядок. Это единственное что они сделали.

                                            Вот с Apple приятно иметь дело, они не только нейрочипы разрабатывают, но и реально откликаются на привольные предложения.

                                            Даже Siri без проблем оснастили нужным функционалом для голосовых команд и русский язык поддержали как надо(чуть чуть сыровато).

                                            Я просил сделать мне биомод чтобы зрение было в спектре сепиа и цвета к вечеру теплели. Выяснилось что на данный момент это делать сложно, но они так и сказали «Мы щас тебе в систему это засунем» и запилили Night Shift.

                                            Как-то так. MS морально и патологически лажают. Это уже просто пережиток считайте.

                                            Мы нейро-систему разрабатываем уже лет 5 и лично мне все эти интернеты уже не так интересны, но в ближайшее время интегрировать внятный нейро-интерфейс и обойтись аккаунтом на сервере не предоставляется возможным. По крайней мере для РФ и большинства других стран.

                                            Поэтому привычно набирать текст на клавиатуре и тратиться на кусочки пластика с электронной начинкой вместо компактного чипа, который в зуб человека вмещается придется еще долго.

                                            Но, поверьте, MS и Андроид с его слегка устаревшим видением Augmented Reality — это не то на что стоит равняться. Это устарело уже еще не успев появиться толком. И ни к чему тратиться на паттерны и фреймворки при разработке обычных сайтов. Это все протухнет лет через 10-15.

                                            • 0
                                              15 секунд. Код из гереатора без подбора цвета.

                                              И стало хуже. Конечно основную кнопку не помешало бы выделить, но градиенты тут совершенно ни к лицу.
                                              У меня как ни странно все шрифты в песке по краям, не считая тех, которые на рабочем столе с тенями. видно не вооруженным глазом.

                                              Скриншот можно?
                                              • 0
                                                >Скриншот можно?

                                                А вот на скриншоте этого почти не видно. Как будто переодически лагает видеодрайвер или что-то еще. При любых прокрутках и изменении размеров окна это становится ощутимо виднее.

                                                image

                                                А вот два разных типа окон про которые я говорил. И это еще очень хорошая тема — на ней косяков MS почти не видно. На других остаются артефакты по кромке окон и вообще все отвратительно.

                                                http://www.picshare.ru/uploads/170215/79vll7S2MA.jpg
                                                • 0
                                                  Как будто переодически лагает видеодрайвер или что-то еще.

                                                  Так может проблема в этом?
                                                  И это еще очень хорошая тема — на ней косяков MS почти не видно.

                                                  Так это сторонняя тема, её проблемы. На стандартной всё органично.
                                                  • 0
                                                    > Так может проблема в этом?

                                                    HD520 — проблема MS.

                                                    > Так это сторонняя тема, её проблемы. На стандартной всё органично.

                                                    Они все сторонние и все лучшее чем стандартные. Не считая тх элементов где тема не применима.

                                                    Кароче в любом случаем, у мен есть разработчики и я буду курировать развитие интерфейса Windows. Вопрос лишь стоит за лояльностью MS.

                                                    Вы поймите. Нам насрать что разрабатывать… Мы делаем это для себя и сами этим же пользуемся. Пока отклик минимальный.
                                                    • 0
                                                      Не понял ни что вы делаете, ни как связаны с МС. Я что-то упустил?
                                                      • 0
                                                        Вы будете защищать баги или реально поймете что проблемы есть и они напрямую касаются MS.

                                                        Я вам уже намекнул о том, что современная система с возможностью интеграции в нервную систему не работает на поделиях MS, но вы меня очевидно не услышали.

                                                        Это все устарело, а в плане дизайна и UI — это вообще Атас. Вы хотите в своей «башке» видеть такие же интерфейсы какие предлагает MS? Я что-то не особо.

                                                        Если вы этого вообще не хотите или боитесь — это другое, но как по мне, так все очевидно.
                                                        • 0
                                                          А пруфы существования таких систем будут?
                                                          • 0
                                                            гуглите биохакинг, биомодинг, гриндеры, нейропроцессоры или биопроцессоры, но вы наверное сегодня ничего кроме фантастики не найдете и дибилов, которые готовы ради жалкого NFC себе под кожу спичечны коробок засунуть.

                                                            но я могу договориться чтобы вам поставили эту систему бесплатно.
                                                            что хотите поучаствовать в разработке?

                                                            когда я учился и делал доклад по теме — такой процессор можно было не так уж и задорого купить у Intel или ibm. даже прайсы где-то в шарага вместе с докладом сохранились.

                                                            сейчас по понятным причинам это не разглашается.
                                                            • 0
                                                              гуглите

                                                              Я прекрасно знаю всё это, активно за эти слежу.
                                                              Как только кто-то запилит двухсторонний нейроинтерфейс, тут же побегу в очередь вставать.
                                                              но я могу договориться чтобы вам поставили эту систему бесплатно.
                                                              что хотите поучаствовать в разработке?

                                                              Да даже за деньги. Но я в упор не слышал, чтобы в России сейчас разрабатывали что-то вживляемое.
                                                              Если есть интересные данные, можете писать в личку.
                                                              • 0
                                                                > Я прекрасно знаю всё это, активно за эти слежу.
                                                                Как только кто-то запилит двухсторонний нейроинтерфейс, тут же побегу в очередь вставать.

                                                                Ну на данный момент у нас есть нечто вроде телефона. Работает круглосуточно, но после того как привыкнешь вполне круто. Дает круглосуточную связь с разработчиками и «прослушкой».

                                                                Прослушка нужна для того, чтобы интерпретировать русский на английский, французский и так далее, ну и вообще чтобы разрабатываться.

                                                                Есть возможность передавать ощущения, но это многих на первых порах пугает. Мозгу трудно привыкнуть к тому что вами могут манипулировать, хотя у нас такое после инструктажа и разработки почти не происходит. Только по доброй воле(у меня например программа стоит. выкуриваю больше суточной дозы никотина и не могу даже первую затяжку сделать — сразу может вырвать. своеобразная блокировка).

                                                                > Да даже за деньги. Но я в упор не слышал, чтобы в России сейчас разрабатывали что-то вживляемое.

                                                                Ну сами понимаете. Классически это ставят в затылочную область. Размер меньше горошины. Не мешается ничем. Работает кажется через сотовую связь. Я в лес пробовал уходить — все равно не выключается. Протоколы и трафик все идет по своим каналам. Никакой стоимости обслуживания(для своих, пока).

                                                                Есть возможность маленько подсматривать за другими. Из глаз в глаза, но это работает крайне редко и чаще всего на 3-4 секунды если у кого-то что-то прикольное или ржачное произошло.

                                                                Есть возможность смотреть FullHD с ощущениями но мы после того как понимаем что это пока ограничивает жизнь от этого сами отказываемся.

                                                                Сразу предупреждают чтобы 15 месяцев не выходил из дома. Иначе как меня трамвай собьем или еще что нибудь. Отвлекает. Но кстати, сейчас привык уже могу на ходу на доли секунд поглядывать что либо.

                                                                Интересная вещь.

                                                                А интерфейсы они будут. Только нужно придумывать какие и как. Разработчики у нас есть.

                                                                Да что в личку — может кто захочет? С удовольствием поделюсь, а то компания приедается и иногда хочется свежего мяска поприкалываться вместе.

                                                                Есть спортивная мотивирующая программа. Стимулирует накачку. Сам лично пол года занимался и делал программу с веществами для спорта, если будет интересно. Разработчики эти тоже есть и из Германии и из Америки. Будут много рассказывать про Шварца.

                                                                Даже виртуальный секс есть, но c него крыша уезжает ибо это розыгрыш такой. Будет стоять и не сможете кончить месяца полтора безостановочно пока письками не запахнет, а вся прослушка будет ржать над вашей застенчивостью.

                                                                Собсно как-то так. Подробнее рассказывать не буду. Есть моменты которые хотелось бы от ментов убрать подальше. У нас тут иногда препараты разрабатывают для стимуляции в форме просто записи волны.

                                                                • 0
                                                                  Как вы понимаете, очень похоже на выдумку. Давайте адреса, явки, пароли, конкретику в общем.
                                                                  • 0
                                                                    Скажите, пожалуйста, а где вы работаете? Интересно же
                                                                    • 0
                                                                      Ну, и, собственно, что вы с такой спецификой делаете во фронтенде?
                                                                      • 0
                                                                        Работаю во фронт енде(сайты и порталы делаю). А деже мне еще работать? Не в полиции же или федеральной службе потому как не имею ни чина ни образования соответствующего… Да и вообще со временем вижу перспективы гораздо больше в той сфере в которой я уже имею не мало опыта или просто в бизнесе потому что есть возможность предугадывать и влиять на будущие технологии.

                                                                        Все равно ту технологию от которой мы сегодня просто балдеем будут внедрять и как ни крути за ней будущее, на мой взгляд, скажем как за интернетом. Она экономичная, экономичная и очень эффективная.

                                                                        Нужно лишь дождаться внедрения повсеместно.
                                                                        • 0
                                                                          Все равно ту технологию от которой мы сегодня просто балдеем будут внедрять и как ни крути за ней будущее, на мой взгляд, скажем как за интернетом.
                                                                          Ну, то есть вы этим все-таки не занимаетесь, понятно.
                                                                          • 0
                                                                            Что понятно. Вы этот свой хабаровский сленг бросьте и читайте внимательнее.

                                                                            Вам не интересно — как хотите. У меня есть возможность выделить людей на разработку еще людей, но лично от вас конкретно начинают исходить какие-то подозрения.

                                                                            Не нравится мне этот сайт.

                                                                            И подцепить на понт меня этим выражением вы не сможете.

                                                                            Могу или не могу. Могу всем пенсионерам по 5000 рублей через правительство через прослушку дать по приколу и Путин реально дает. Могу заставить MS изменить меню пуск и MS реально меняет.

                                                                            А что вы там думаете — это уже не так важно.

                                                                            Нет у нас пока интерфейсов — жить с ними тяжело, но связь постоянная есть всегда и разговариваем мы с закрытым ртом беспалива.
                                                                            • 0
                                                                              Этот пользователь поехал, несите следующего.
                                                                              • 0
                                                                                > Этот пользователь поехал, несите следующего.

                                                                                Ладно. Ждите. Через 5-15 месяцев вас загрузят вместе с такими-же зелеными и тупыми в общую кучу и все «расскажут». Может раньше.

                                                                                Я даже IP вычислять не стану ;)

                                                                                Советую сделать себе либо пенсию либо другую аммортизацию на то время пока вас разрабатывают. Аминь…
                                                                                • 0
                                                                                  Через 5-15 месяцев

                                                                                  Окей, 26 мая 2018 года встречаемся здесь.
                                                                                  • 0
                                                                                    > Окей, 26 мая 2018 года встречаемся здесь.
                                                                                    +
                                                                                • 0
                                                                                  p.s.: сразу предупреждаю. на мою «прослушку» отбор почти как в космонавты. за недоверие ничего вам пособлять не буду из принципа, сами всего добивайтесь. просто включу в систему.
                                                                                  • 0
                                                                                    Этот пользователь поехал, несите следующего.
                                                                                    Чип вживленный барахлит, видимо
                            • 0
                              Кстати, только сейчас внимательнее глянул ваш код. А где вы использовали transform? Transition вижу, но это просто присадка ;)
                              • 0
                                У transform логика изменения размером другая, так что конкретно тут он оказался мало применим) Вот скрипт из предыдущего поста автора с transform написать точно можно, там размеры не меняются
                        • +3
                          requestAnimationFrame не задействует gpu, а лишь откладывает операцию до следующего шага отрисовки, тем самым позволяя вам избежать ненужных вычислений. Таким образом raf не зависит от времени выполнения, а setTimeout же, выполняясь в основном и единственном потоке, не гарантирует выполнения через указанный промежуток времени, так как может быть подвешен любой долгой операцией. Разница ощутима.
                          • 0

                            Raf группирует анимации, чтобы избежать ненужных вычислений. Что Вы будете делать, когда у Вас таймеров будет 10? 100? Это как раз подвешивает интерфейс и нагружает систему даже в неактивных вкладках. А raf отработает тогда, когда нужно, за раз выполнит все анимации вместе с css трансформациями и будет экономить процессорное время для фоновых вкладок. В случае сильной аллергии на raf или необходимости поддерживать старые браузеры хотя бы нужно сделать один setInterval для обработки анимации и в нем выполнять все вычисления.

                          • 0
                            А что нужно, если не setTimeout и не requestAnimationFrame?
                      • +3
                        Размер элемента некорректно резко изменяется в меньшую сторону при вытягивании его границы за пределы окна браузера.
                        • +5
                          У вас перепутаны курсоры для левой и правой сторон.
                          • +2
                            А document.body.onselectstart вы намеренно убиваете в onmouseup, задавая только при инициализации? Он так и просится в resizeStart… И сохранение/восстановление его же, а не сброс на null.
                            • +4
                              Странные вещи творятся: если добавить <!DOCTYPE html> к странице, то скрипт перестаёт работать.
                              • –2
                                А ведь хороший пост-то! Придумал, воплотил, поделился.
                                Автор, пиши ещё
                                • 0

                                  Не кроссбраузерно, но можно и так:


                                  https://css-tricks.com/almanac/properties/r/resize/

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.