Mobile lightbox refactored

dkhlystov · Aug 29, 2016 · ab19bef · ab19bef
1 parent 7586a48
commit ab19bef
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 130 deletions.
diff --git a/lightbox/Module.php b/lightbox/Module.php
@@ -2,37 +2,9 @@
 
 namespace dkhlystov\lightbox;
 
-use Yii;
-
 /**
  * Lightbox module
  */
 class Module extends \yii\base\Module
 {
-
-	/**
-	 * @inheritdoc
-	 */
-	public function init()
-	{
-		parent::init();
-
-		static::addTranslation();
-	}
-
-	/**
-	 * Adding translation to i18n
-	 * @return void
-	 */
-	public static function addTranslation()
-	{
-		if (!isset(Yii::$app->i18n->translations['lightbox'])) {
-			Yii::$app->i18n->translations['lightbox'] = [
-				'class' => 'yii\i18n\PhpMessageSource',
-				'sourceLanguage' => 'en-US',
-				'basePath' => __DIR__ . '/messages',
-			];
-		}
-	}
-
 }
diff --git a/lightbox/actions/Lightbox.php b/lightbox/actions/Lightbox.php
diff --git a/lightbox/assets/TouchAsset.php b/lightbox/assets/TouchAsset.php
@@ -13,7 +13,7 @@ class TouchAsset extends AssetBundle {
 	];
 
 	public $js = [
-		'lightbox-touch.js',
+		'lightbox-touch' . (YII_DEBUG ? '' : '.min') . '.js',
 	];
 
 	public $depends = [

diff --git a/lightbox/assets/touch/lightbox-touch.js b/lightbox/assets/touch/lightbox-touch.js
@@ -1,113 +1,116 @@
 $(function() {
 	var $body = $('body'), $header = $('.header span'), $container = $('.container'), $blocks = $container.find('.block');
 
-	//установка размеров блоков
 	function setBlockSize() {
-		//размеры страницы
+		//page size
 		var bw = $body.width(), bh = $body.height();
-		//размеры блоков
+
 		$blocks.each(function() {
-			//размер блока
+			//block size
 			$(this).css({
 				'width': bw,
 				'height': bh
 			});
 		});
-		//размер контейнера
+
+		//container size
 		$container.css({
 			'height': bh,
-			'margin-left': -bw*$container.data('touch'),
+			'margin-left': -bw * $container.data('touch'),
 			'width': $blocks.length * bw
 		});
-	}
+	};
 
-	//установка размеров изображения
 	function setImageSize($b) {
 		var load = $b != undefined
 		if (!load) $b = $blocks;
-		//размеры страницы
-		var bw = $body.width(), bh = $body.height(), ba = bw/bh;
+		//page size
+		var bw = $body.width(), bh = $body.height(), ba = bw / bh;
 		$b.each(function() {
-			//размеры изображения
+			//image size
 			var $this = $(this), $loading = $this.find('.loading'), $buffer = $this.find('.buffer img'), $image = $this.find('.preview');
 			if ($loading.css('opacity') == 0 || load) {
-				var w = $buffer.width(), h = $buffer.height(), a = w/h;
+				var w = $buffer.width(), h = $buffer.height(), a = w / h;
 				if (a > ba) {
 					w = bw;
-					h = w/a;
+					h = w / a;
 				} else {
 					h = bh;
-					w = h*a;
-				}
+					w = h * a;
+				};
 				$image.css({
 					'height': h,
-					'margin-left': -w/2,
-					'margin-top': -h/2,
+					'margin-left': -w / 2,
+					'margin-top': -h / 2,
 					'width': w
 				}).attr('src', $buffer.attr('src')).animate({'opacity': 1}, 200);
 				$loading.css('opacity', 0);
-			}
+			};
 		});
-	}
+	};
 
-	//изображения
 	function setBlockSrc() {
 		$blocks.each(function() {
 			var $this = $(this);
 			$this.find('.buffer img').attr('src', $this.data('src'));
 		});
-	}
+	};
 
-	//загружен буфер
 	function bufferLoad() {
 		setImageSize($(this).closest('.block'));
-	}
+	};
 
-	//изменение размера экрана
 	function windowResize() {
 		setBlockSize();
 		setImageSize();
-	}
+	};
 
-	//тач
+	//touch
 	var timestamp = null, lastX = null, speedX = null;
 	function touchstart(event) {
-		//координата
+		//coord
 		var x = event.pageX;
-		if (x == undefined) x = event.originalEvent.touches[0].pageX;
-		//заканчиваем анимацию
+		if (x == undefined)
+			x = event.originalEvent.touches[0].pageX;
+		//stop animation
 		$(':animated').stop(true, true);
-		//параметры перетаскивания
+		//drag params
 		$container.data({
 			'x': x,
 			'left': parseInt($container.css('margin-left'))
 		});
-		//обработчик
+		//handler
 		$body.bind('touchmove', touchmove);
-	}
+	};
 	function touchend(event) {
-		//обработчик
+		//handler
 		$body.unbind('touchmove', touchmove);
-		//определяем индекс
-		var bw = $body.width(), touch = Math.round(-parseInt($container.data('left'))/bw);
-		if (speedX < -0.05) touch++;
-		else if (speedX > 0.05) touch--;
-		if (touch > $blocks.length - 1) touch = $blocks.length - 1;
+		//determine index
+		var bw = $body.width(),
+			touch = Math.round(-parseInt($container.data('left')) / bw);
+		if (speedX < -0.05) {
+			touch++;
+		} else if (speedX > 0.05) {
+			touch--;
+		};
+		if (touch > $blocks.length - 1)
+			touch = $blocks.length - 1;
 		if (touch < 0) touch = 0;
-		//устанавливаем смещение
-		$container.data('touch', touch).animate({'margin-left': -touch*bw}, 200);
-		//заголовок
-		$header.text(touch+1);
-	}
+		//offset
+		$container.data('touch', touch).animate({'margin-left': -touch * bw}, 200);
+		//title
+		$header.text(touch + 1);
+	};
 	function touchmove(event) {
-		//координата
+		//coord
 		var x = event.pageX;
-		if (x == undefined) x = event.originalEvent.touches[0].pageX;
-		//изменение
-		var dx = x-$container.data('x');
-		//корректируем положение
-		$container.css('margin-left', $container.data('left')+dx);
-		//скорость
+		if (x == undefined)
+			x = event.originalEvent.touches[0].pageX;
+		//shift
+		var dx = x - $container.data('x');
+		//place correction
+		$container.css('margin-left', $container.data('left') + dx);
+		//speed
 		if (timestamp === null) {
 			timestamp = Date.now();
 			lastX = x;
@@ -116,23 +119,23 @@ $(function() {
 			speedX = dx / dt;
 			timestamp = now;
 			lastX = x;
-		}
-	}
+		};
+	};
 
-	//инициализация
+	//initialization
 	function init() {
-		//обработчики
-		$('.buffer img').bind('load', bufferLoad); //загрузка изображения
-		$(window).bind('orientationchange, resize', windowResize); //изменение размера
-		$body.bind('touchstart', touchstart); //тач
-		$body.bind('touchend', touchend); //тач
-		//размеры блоков
+		//handlers
+		$('.buffer img').bind('load', bufferLoad); //image loading
+		$(window).bind('orientationchange, resize', windowResize); //resize
+		$body.bind('touchstart', touchstart); //touch
+		$body.bind('touchend', touchend); //touch
+		//blocks size
 		setBlockSize();
-		//изображения
+		//images
 		setBlockSrc();
-	}
+	};
 
-	//инициализация блоков
+	//block initialization
 	init();
 
 });
diff --git a/lightbox/assets/touch/lightbox-touch.min.js b/lightbox/assets/touch/lightbox-touch.min.js
diff --git a/lightbox/controllers/TouchController.php b/lightbox/controllers/TouchController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace dkhlystov\lightbox\controllers;
+
+use Yii;
+use yii\web\Controller;
+
+/**
+ * Lightbox for mobile.
+ */
+class TouchController extends Controller
+{
+
+	/**
+	 * @var boolean Disable csrf validation.
+	 */
+	public $enableCsrfValidation = false;
+
+	/**
+	 * @var string Use custom layout.
+	 */
+	public $layout = '@dkhlystov/lightbox/views/layout';
+
+	/**
+	 * Render lightbox for mobile
+	 * @return void
+	 */
+	public function actionImage()
+	{
+		$request = Yii::$app->getRequest();
+
+		//read images
+		$src = $request->post('src', []);
+
+		//ckicked index
+		$touch = array_search($request->post('touch'), $src);
+
+		return $this->render('@dkhlystov/lightbox/views/lightbox', [
+			'src' => $src,
+			'touch' => (integer) $touch,
+		]);
+	}
+
+}
diff --git a/lightbox/messages/ru-RU/lightbox.php b/lightbox/messages/ru-RU/lightbox.php
diff --git a/lightbox/views/layout.php b/lightbox/views/layout.php
@@ -1,12 +1,12 @@
-<?php $this->beginPage() ?>
+<?php $this->beginPage(); ?>
 <!DOCTYPE html>
 <html xml:lang="<?= Yii::$app->language ?>" lang="<?= Yii::$app->language ?>" dir="ltr">
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-		<?php $this->head() ?>
+		<?php $this->head(); ?>
 	</head>
-	<body><?php $this->beginBody() ?>
+	<body><?php $this->beginBody(); ?>
 		<div class="wrapper"><?= $content ?></div>
-	<?php $this->endBody() ?></body>
+	<?php $this->endBody(); ?></body>
 </html>
-<?php $this->endPage() ?>
+<?php $this->endPage(); ?>
diff --git a/lightbox/views/lightbox.php b/lightbox/views/lightbox.php
@@ -1,13 +1,12 @@
 <?php
 
-use dkhlystov\lightbox\TouchAsset;
+use dkhlystov\lightbox\assets\TouchAsset;
 use yii\helpers\Html;
 
-//стили
 TouchAsset::register($this);
 
 ?>
-<div class="header"><span><?= $touch+1 ?></span>/<?= sizeof($src) ?></div>
-<?= Html::beginTag('div', ['class'=>'container', 'data-touch'=>$touch]) ?><?php foreach ($src as $s) { ?>
-<?= Html::beginTag('div', ['class'=>'block', 'data-src'=>$s]) ?><div class="loading"></div><div class="buffer"><img></div><img class="preview"><?= Html::endTag('div'); ?>
-<?php } ?><?= Html::endTag('div'); ?>
+<div class="header"><span><?= $touch + 1 ?></span>/<?= sizeof($src) ?></div>
+<?= Html::beginTag('div', ['class' => 'container', 'data-touch' => $touch]) ?><?php foreach ($src as $s) { ?>
+<?= Html::beginTag('div', ['class' => 'block', 'data-src' => $s]) ?><div class="loading"></div><div class="buffer"><img></div><img class="preview"><?= Html::endTag('div') ?>
+<?php } ?><?= Html::endTag('div') ?>