Ваше мнение о возможной реализации задания [хронологическая лента]

Вопрос-ответ Остальное
1

Всем привет. Интересно мнение, кто что предложит, как решить данную задачку.

task
task.jpg1011×100 12.7 KB

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

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

Заранее спасибо ;)

2

Ползунок влияет только на то какой год в центре?

3

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

4

Какой-то фреймверк есть на клиенте? Типа реакта или vuejs? Писать самостоятельно без фреймверка будет более муторно чем с ним.

Из доступных библиотек эта мне кажется самой подходящей для твоего случая http://visjs.org/timeline_examples.html. Но может оказаться что ни одна библиотека не подойдет под описанное поведение. В идеале дизайн должен был бы готовиться под существующий фремверк чтобы упростить разработку.

Если писать вручную то логика следующая: есть 3 скроллирующиеся части: список лет (назовем ее A), полоска с тем что соответствует годам (назовем его B), ползунок (пусть С). B и C связаны двусторонне (может событиями может общим состоянием), но в целом нужно написать функцию, которая синхронизирует положение C и B. При том в обе стороны (из положения C получить значение положения B). Прикрутить ее к функции типа goTo. goTo нужна чтобы перемещаться к конкретному содержимому в B. Cодержимое B должно иметь соотношение с годами из A. Тогда зная год, можно найти соответствующий элемент в B и вызвать goTo, которая в свою очередь синхронизирует положение C и B.

5

Спасибо большое ))), гляну, попробую разобраться )

6

Часть со скроллированием лучше сделать через библиотеку

7

Ох, в общем делал я, делал, и столкнулся с проблемой, теперь не знаю, как ее решить.

Сделал я не через скролл, а с помощью drag an drop jq ui.

Есть input по центру, и внизу список дат, при скроллинге измеряется offset инпута и элемента li, если они совпадают, то элементу li присваивается класс active, забирается его текст и подставляется в input, сам элемент получает opacity 0;

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

Вот код - https://jsfiddle.net/rtsnu3qf/5/

8

Есть такая тема. Обработчики событий выстреливают не более 60 раз в секунду (по количеству отрисовки кадров). Если дернуть скорлл очень быстро, то обработчики сработают не по всей длине сроллируемого объекта. И с этим ничего не поделать.

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

Посмотрел на код - с такой структурой далеко не уедешь. Код скорее всего станет неуправляемо сложный для такой задачи. Нужно разбивать задачу на сущности-классы и манимулировать ими. Прикинь из чего состоит виджет, какие данные его описывают, какие методы ему нужны чтобы реализовать поведение. Тебе нужна структура типа

class Widget {
	constructor (donNode, years) {

	},
	scrollToYear(year) {

	},
	_getYearForCurrentPosition() {

	}
}
9

Спасибо ) , я до такого уровня еще не дошел ).

Самое интересное то, что событие drag успевает обрабатываться при перемещении контейнера drag, даже если очень-очень быстро дернуть он успевает обработать, а вот корень проблемы кроется вот в этом условии, именно оно не успевает отработать

if (liOffsetLeft2 > inputoffSetLeft.left && liOffsetLeft2 < inputoffSetRight) {

					$('.year-item-wrap').find('.active').next().addClass('active');
					$('.year-item-wrap').find('.active').prev().removeClass('active');
				}
10

Вот писал когда-то галерею. Структурно у тебя будет похожее решение. Посмотри как функциональность разбита на функции. https://www.dropbox.com/s/8pk1m90bxsd9zph/slider.zip?dl=0

11

В общем я все переделал ))), не с такой конечно структурой, которую ты предлогал, все же она пока для меня непостижима ) , но теперь все работает даже с реактивной перемоткой ))). От drag and drop отказался, подключил плагин jScrollPane и с его api все запилил.(кстати сайт этого плагина заблочили, очень грустно, столько лет работал, работал, а тут и до него грязные руки дошли).

Еще работает центрирование по клику на определенную дату.

Вот рабочий код.
https://jsfiddle.net/fbLt0wdp/3/

1 лайк