Поскольку мой ноутбук починить не смогли, но я смог обменять его на новый, фреймворк продолжу писать на Linux(тошнит от венды а сборку хакинтош пока никто завести не сумел. в общем жду пока). Немного тяжеловато вспоминать как оно, но, тем не менее вроде бы как больше никаких подводных камней с IE не предвидится и можно кодить на линухе.

В этом году перепишу систему немного на другой стиль, чтобы удобство API соответствовало тому, что мы видим у jQuery. Хотя делать этого очень не хочется(может просто похмелье:).

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

Присоединяйтесь ;)

v.1.5.9

https://github.com/xShiftx/javascrip...ework/releases

Добавлена поддержка короткого формата записей для CSS3 transforms анимаций. Например translate(10px,20px,30px) будет автоматически транслирован в translate по всем трем осям X,Y,Z.

Накидал простенький логотип ... Может такой и останется

Наконец то завел Хакинош, все настроил и появилось время чтобы снова писать framework.

в version 1.6 добавлены модные хипсерские методы Foreach, map и filter. Хотя я до сих пор не понимаю зачем они нужны - все таки сделал. Может кому-то понадобятся.

Готовлюсь внедрить один из паттернов программировани и координально изменить архитектуру приложения. Сейчас у меня используется идея модулей и SOLID. Но почему-то хипстерам и прочим фаперам на паттерны она не нравится. Придется пойти по моде и слегка уступить этим людям.

Вот еще мысли. я хотел сделать модуль роутера, но на реальном сайте SPA у меня вышло на тупую несколько строчек кода для реализации простой загрузки страниц на AJAX и выполнения каких-то стартовых функций.

Выглядит это примерно так:

<script src="./app/evolution.js?production=1.5.9" id="evolution">

	function liveRun() { // restart selectors on ajax or document load

		/* animations */
		$.dom( '#logotype img','style', ['width:10px','height:10px'] );
		$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );

		$.dom( '#logotype span','style', ['opacity:0'] );
		$.dom( '#logotype span','animate', ['opacity:1:3500'] );

		/* slider init */
		$.rotate('#rotate div', null, 6000);

		/* increase and descrease text size if telephone hovered */ 
		$.event('#logotype i', 'mouseover', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1.5,1.5) translateX(-40px):400']);
		});

		$.event('#logotype i', 'mouseleave', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1,1) translateX(0px):400']);
		});

		/* scroll top */
		$.event('#footer li:last-child a', 'click', function(e) {
			e.preventDefault();
			$.scroll();
		});

		/* route ajax path */
		$.event('#menu li a, #bottom-menu li:not(:last-child) a', 'click', function(e) {
			e.preventDefault();
			clearInterval(rotate);
			getPageLive(e.target.href, e.target.text);
		});

		// simple router
		function getPageLive(url, title) {
			$.ajax(url,'GET', null, 'dom', function() {
				$.dom('#shell','del');
				$.insert($.dom('body'), this[0].outerHTML);
				
				document.title = title;
				window.history.pushState({"pageTitle": title}, "", url);
				
				$.scroll();
				liveRun();
			});
		}

	}

	liveRun();

	</script>

Теперь я задумался над тем, а стоит ли перегружать Фреймворк такой мелочью как роутер если он пишется буквально за 5 минут и вполне нормально работает. Ведь то уже просто подачка тем, кто не хочет и не умеет программировать. С другой стороны нужно бы это сделать.

В будущих версиях будет модуль history, который я назову как-то по типу locations или наподобие.

v 1.6.1

добавлено location API для косметической смены адреса и заголовка страницы с поддержкой callback. Модуль работает корректно вплоть до отрицательного значения state(ловушка на событие для установки title из стека и ловушка на запоминание нулевого индекса).

'$.location('Page Title','http://somedomain.com/index.html', function(){console.log(this)})'

И все таки принято решение не использовать предложенную в этом топике семантическую модель версий. Использовать мажорные цифры буду только при смене API, а все остальные изменения обозначать минорными и дробными числами. Также как разрабатывается Clover. Не имеет смысла прогнозировать количество нововведений, но на данный момент запаса 39 версий мне вполне хватает до запланированного изменения API.

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

v 1.6.2 добавлен модуль хинтов. (еще маленько в ядро и остальное в репозиторий плагинов)

Звучит внушительно.
Пример можно?

На самом деле это грязный хак поскольку по умолчанию у всех элементов если не указано это свойство то параметр имеет значение none. Если казано только значение трансформации осей X и Y - браузер выставляет значение в transform 2D матрицу, но как только указано значение Z то матрица сразу приобретает вид 3D трансформации.

Чтобы написать как можно короче и эффективнее мне не осталось ничего другого кроме как вручную устанавливать параметры матрицы автоматически в 3D режим путем перепарса Computed Style и перегруппировки.

Вот кусок оригинального кода:

// get matrix and set a default value if not present
						var matrixStart = (window.getComputedStyle(e[x], null)[prop] === 'none') ? 'matrix(1, 0, 0, 1, 0, 0)' : window.getComputedStyle(e[x], null)[prop];
						
						var M2D = $.arguments(this.getValFromPropsBrackets('matrix',matrixStart)[1], ',');

						// set matrix from 2D to 3D
						if( M2D.length <= 6) {
							var matrix3D = 'matrix3d('+ M2D[0] +', '+ M2D[1] +', 0, 0, '+ M2D[2] +', '+ M2D[3] +', 0, 0, 0, 0, 1, 0,'+ M2D[4] +','+ M2D[5] +', 0, 1)'
						} 
						else {
							var matrix3D = window.getComputedStyle(e[x], null)['transform'];
						}
												
						// extract matrix values
						var M3D = $.arguments(this.getValFromPropsBrackets('matrix3d',matrix3D)[1], ',');

						//console.log(M3D);
						/*
						matrix3d pattern
						   1, 0, 0, 0,    1 scalex 6 scaley 11 scalez
						   0, 1, 0, 0,    5 skewX  2 skewY
						   0, 0, 1, 0,    10 rotateX 9 rotateY 1 rotateZ  
						   tx, ty , tz, 1 13 translateX 14 translateY 15 translateZ
						   				  12 - perspective
						*/

В результате затрагиваемый элемент дом сразу же снабжается переупакованной матрицей 4x4 из 16ти значений. Я кстати задействовал не все параметры, которые мог и можно было достичь интересных эффектов типа блика солнечных лучей на камере если затрагивать перспективу, но это уж недокументированная фича.

Собственно. 1). считываем текущую конфигурацию матрицы. Если none, то прописывает дефолтные параметры трансформации не затрагивая и не искажая ничего 2). переупаковываем 2D матрицу в 3D матрицу с учетом 2D трансформации. 3). запускаем анимацию с параметрами полученными при "оригинальной" прописи свойства transform как по стандарту CSS, дробим все это на сегменты и запускаем анимацию каждого вектора отдельным контекстом через RAF.

В результате получаем обрисованный по матрице 3D элемент по всем трем осям если эти значения отличны от 0.

Например:

$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );

Меняем ширину с bounce, трансформируем перспективу и вращаем по всем трем осям за 900 миллисекунд используя тот же эффект bounce. Все элементарно просто на выходе.

Сейчас у меня код маленько с запашком, но я на первых порах работал в основном над самими механизмами и не внедрял никаких паттернов кроме SOLID и Module на Single Namespase. В будущем это будет переработано, но как я пока не могу придумать.

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

1.7.2

- Обнаружился баг связанный со скоростью иниуиализации Android browser: метод самоинициализации позаимствован у jQuery.

- Добавлен $.fireEvent для симуляции таких событий как click и submit и так далее.

- Частично переписано на ES6. Со временем полностью избавлюсь от Legacy кода(бабулю не предлагать - лишний мартышкин труд).

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