Skip to content

Commit 783e2dd

Browse files
author
kozhevnikov
committed
init
1 parent 1aa34e8 commit 783e2dd

19 files changed

+1380
-2
lines changed

‎Gallery.php

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<?php
2+
/**
3+
* Created by PhpStorm.
4+
* User: kozhevnikov
5+
* Date: 31.03.2016
6+
* Time: 14:44
7+
*/
8+
9+
namespace onmotion\gallery;
10+
11+
use yii\base\Widget;
12+
use yii\helpers\ArrayHelper;
13+
use yii\helpers\Html;
14+
use yii\helpers\Json;
15+
use yii\web\JsExpression;
16+
17+
/**
18+
* Class Gallery
19+
* @package onmotion\gallery
20+
*/
21+
class Gallery extends Widget
22+
{
23+
public $id;
24+
25+
public $items = [];
26+
27+
public $pluginOptions = [];
28+
29+
/**
30+
* @inheritdoc
31+
*/
32+
public function init()
33+
{
34+
parent::init();
35+
36+
37+
if (!isset($this->id))
38+
$this->id = $this->getId();
39+
}
40+
41+
/**
42+
* @inheritdoc
43+
*/
44+
public function run()
45+
{
46+
if (empty($this->items)) {
47+
return null;
48+
}
49+
$this->renderPreloader();
50+
$this->renderGallery();
51+
52+
$options = [];
53+
foreach ($this->pluginOptions as $k => $v) {
54+
$options[$k] = new JsExpression($v);
55+
}
56+
$options = Json::encode($options);
57+
$view = self::getView();
58+
$view->registerJs(
59+
<<<JS
60+
onmotion.gallery('$this->id', $options);
61+
JS
62+
);
63+
}
64+
65+
/**
66+
*
67+
*/
68+
public function renderGallery()
69+
{
70+
$links = [];
71+
foreach ($this->items as $item) {
72+
$originalImg = Html::encode($item['original']);
73+
$thumbImg = ArrayHelper::getValue($item, 'thumbnail', $originalImg); //if thumb is empty return original image, but it made render slowly.
74+
isset($item['options']['class']) ? $item['options']['class'] .= ' gallery-item' : $item['options']['class'] = 'gallery-item';
75+
$links[] = Html::a(Html::img($thumbImg), $originalImg, $item['options']);
76+
}
77+
$controls =
78+
Html::tag('div', '', ['class' => 'slides']) .
79+
Html::tag('h3', '', ['class' => 'title']) .
80+
Html::tag('a', '‹', ['class' => 'prev']) .
81+
Html::tag('a', '›', ['class' => 'next']) .
82+
Html::tag('a', '×', ['class' => 'close']) .
83+
Html::tag('a', '', ['class' => 'play-pause']);
84+
85+
echo Html::tag('div', implode("\n", array_filter($links)), ['id' => $this->id]);
86+
echo Html::tag('div', $controls, ['id' => 'blueimp-gallery', 'class' => 'blueimp-gallery blueimp-gallery-controls']);
87+
}
88+
89+
public function renderPreloader()
90+
{
91+
$inner = <<<HTML
92+
<div class="block">
93+
<div class="loading">
94+
<div data-loader="circle-side"></div>
95+
</div>
96+
</div>
97+
HTML;
98+
echo Html::tag('div', $inner,['id' => 'preloader', 'class' => 'preloader-hide', 'style' => 'background: rgba(0,0,0,.8)']);
99+
}
100+
101+
}

‎GalleryAsset.php

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
/**
3+
* Created by PhpStorm.
4+
* User: kozhevnikov
5+
* Date: 31.03.2016
6+
* Time: 14:47
7+
*/
8+
9+
namespace onmotion\gallery;
10+
11+
use yii\web\AssetBundle;
12+
13+
/**
14+
* Class GalleryAsset
15+
* @package onmotion\gallery
16+
*/
17+
class GalleryAsset extends AssetBundle
18+
{
19+
public $sourcePath = '@bower/blueimp-gallery';
20+
public $css = [
21+
'css/blueimp-gallery.min.css',
22+
];
23+
public $js = [
24+
'js/blueimp-gallery.min.js',
25+
];
26+
public $depends = [
27+
'yii\web\YiiAsset',
28+
];
29+
}

‎Module.php

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
3+
namespace onmotion\gallery;
4+
5+
/**
6+
* gallery module definition class
7+
*/
8+
class Module extends \yii\base\Module
9+
{
10+
/**
11+
* @inheritdoc
12+
*/
13+
public $controllerNamespace = 'onmotion\gallery\controllers';
14+
15+
/**
16+
* @inheritdoc
17+
*/
18+
public function init()
19+
{
20+
parent::init();
21+
$view = \Yii::$app->getView();
22+
GalleryAsset::register($view);
23+
OnmotionAsset::register($view);
24+
//route doesn't work
25+
\Yii::$app->getUrlManager()->addRules([
26+
'<module:gallery>/<action>' => 'gallery/default/<action>',
27+
], false);
28+
}
29+
30+
}

‎OnmotionAsset.php

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
/**
3+
* Created by PhpStorm.
4+
* User: kozhevnikov
5+
* Date: 31.03.2016
6+
* Time: 14:47
7+
*/
8+
9+
namespace onmotion\gallery;
10+
11+
use yii\web\AssetBundle;
12+
13+
/**
14+
* Class GalleryAsset
15+
* @package onmotion\gallery
16+
*/
17+
class OnmotionAsset extends AssetBundle
18+
{
19+
public $sourcePath = __DIR__ . '/assets';
20+
public $css = [
21+
'css/onmotion-gallery.css',
22+
];
23+
public $js = [
24+
'js/onmotion-bootstrap-modal.js',
25+
'js/onmotion-gallery.js',
26+
];
27+
public $depends = [
28+
'yii\web\YiiAsset',
29+
];
30+
}

‎README.md

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# yii2-gallery
2-
blueimp gallery with fileupload by kartik-v in your Yii2 application
1+
Yii2 Gallery widget
2+
===================
3+
blueimp gallery in your Yii2 application with fileupload
4+
5+
Installation
6+
------------
7+
8+
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
9+
10+
Either run
11+
12+
```
13+
php composer.phar require --prefer-dist onmotion/yii2-gallery "*"
14+
```
15+
16+
or add
17+
18+
```
19+
"onmotion/yii2-gallery": "*"
20+
```
21+
22+
to the require section of your `composer.json` file.
23+
24+
25+
Usage
26+
-----

‎assets/css/onmotion-gallery.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
#preloader{position:fixed;width:100%;height:100%;left:0;z-index:2000;top:0}#preloader img{display:block;margin:0 auto;top:50%;position:relative}[data-loader='circle-side']{position:relative;margin:auto;width:80px;height:80px;-webkit-animation:circle infinite .75s linear;animation:circle infinite .75s linear;border:2px solid rgba(0,0,0,0.2);border-left-color:#fff;border-radius:100%}@-webkit-keyframes circle{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes circle{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
2+
#gallery-listview > div[data-key] {
3+
display: inline-block;
4+
margin: 10px 0 10px 0;
5+
vertical-align: top;
6+
height: 285px; }
7+
#gallery-listview > ul {
8+
display: block;
9+
height: 35px; }
10+
#gallery-listview .gallery-item {
11+
margin: 20px 40px 20px 40px;
12+
max-width: 200px; }
13+
#gallery-listview .gallery-item .change-btns {
14+
display: none;
15+
position: absolute;
16+
margin: 3px;
17+
padding: 3px 12px;
18+
right: 0;
19+
border-radius: 3px;
20+
font-size: 16px;
21+
background-color: rgba(255, 255, 255, 0.7); }
22+
#gallery-listview .gallery-item .change-btns > a {
23+
color: #16a085;
24+
-webkit-transition: color .2s;
25+
transition: color .2s; }
26+
#gallery-listview .gallery-item .change-btns > a:first-child {
27+
color: #e74c3c;
28+
letter-spacing: 8px; }
29+
#gallery-listview .gallery-item .change-btns > a:hover {
30+
color: #0b3e6f; }
31+
#gallery-listview .gallery-item .image {
32+
-webkit-transition: all 0.2s ease-out;
33+
transition: all 0.2s ease-out;
34+
position: relative;
35+
width: 200px;
36+
height: 200px;
37+
background-color: #ccc;
38+
box-shadow: 0 0 8px #333; }
39+
#gallery-listview .gallery-item .image .image-wrap {
40+
width: 100%;
41+
height: 100%;
42+
display: block; }
43+
#gallery-listview .gallery-item .image:hover {
44+
-webkit-transform: scale(1.03);
45+
-ms-transform: scale(1.03);
46+
transform: scale(1.03); }
47+
#gallery-listview .gallery-item .image:hover .change-btns {
48+
display: inline-block; }
49+
#gallery-listview .gallery-item .name {
50+
padding-top: 5px;
51+
text-align: center; }
52+
#gallery-listview .gallery-item .name > span {
53+
font-weight: 500;
54+
font-size: 16px; }
55+
#gallery-listview .gallery-item .name .date-gallery {
56+
font-weight: 400;
57+
font-size: 11px;
58+
display: block; }
59+
60+
#check-toggle.checked {
61+
background-color: #f39c12; }
62+
63+
#gallery-links > a {
64+
margin-left: -4px; }
65+
#gallery-links > a img {
66+
-webkit-transition: all 0.2s ease-out;
67+
transition: all 0.2s ease-out;
68+
margin: 2px; }
69+
#gallery-links > a img:hover {
70+
-webkit-transform: scale(1.05);
71+
-ms-transform: scale(1.05);
72+
transform: scale(1.05); }
73+
#gallery-links > a .checked {
74+
filter: opacity(0.5) grayscale(100%);
75+
-webkit-filter: opacity(0.5) grayscale(100%); }
76+
#gallery-links > a .edit-mode {
77+
outline: 2px solid #ffff00;
78+
outline-offset: -2px; }
79+
80+
.header-collapse {
81+
margin-bottom: 40px; }
82+
83+
.download-collapse {
84+
margin-top: 40px; }
85+
86+
.kv-fileinput-caption {
87+
background-color: #eef; }
88+
#gallery-modal .preloader{
89+
height:20px}
90+
.modal-footer {
91+
padding: 11px 16px !important;
92+
}

‎assets/js/onmotion-bootstrap-modal.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* Created by kozhevnikov on 04.04.2016.
3+
*/
4+
$(document).ready(function () {
5+
var $modal = $('#gallery-modal');
6+
var progressBar = '<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"><span class="sr-only">100</span></div></div>';
7+
8+
$('a[role="modal-toggle"]').on('click', function (e) {
9+
e.preventDefault();
10+
$modal.find('.modal-title').text($(this).attr('data-modal-title'));
11+
$modal.find('.modal-body').text($(this).attr('data-modal-body'));
12+
$modal.find('#modal-confirm-btn').attr('href', $(this).attr('href'));
13+
var method = $(this).attr('method');
14+
if (method == 'get') {
15+
$.ajax({
16+
type: 'get',
17+
url: $(this).attr('href'),
18+
dataType: 'json',
19+
beforeSend: function () {
20+
$modal.find('.modal-body').html(progressBar);
21+
},
22+
success: function (data) {
23+
$modal.find('.modal-title').text(data.content.title);
24+
$modal.find('.modal-body').html(data.content);
25+
},
26+
error: function (xhr, textStatus, errorThrown) {
27+
console.log(xhr);
28+
console.log(textStatus);
29+
console.log(errorThrown);
30+
$modal.find('.modal-body').text(errorThrown);
31+
}
32+
});
33+
}
34+
$modal.modal();
35+
return false;
36+
});
37+
38+
$('#modal-confirm-btn').on('click', function (e) {
39+
e.preventDefault();
40+
var form = $(this).closest('.modal-content').find('form'); //try to find form
41+
var that = $(this);
42+
$.ajax({
43+
type: 'post',
44+
url: that.attr('href'),
45+
data: form.length > 0 ? form.serialize() : '',
46+
dataType: 'json',
47+
beforeSend: function () {
48+
$modal.find('.modal-body').html(progressBar);
49+
},
50+
success: function (data) {
51+
$modal.find('.modal-title').text(data.title);
52+
$modal.find('.modal-body').html(data.content);
53+
if(data.forceClose == true)
54+
$modal.modal('hide');
55+
if(data.forceReload == true)
56+
location.reload();
57+
if(data.hideActionButton == true)
58+
that.hide();
59+
return false;
60+
},
61+
error: function (xhr, textStatus, errorThrown) {
62+
console.log(xhr);
63+
console.log(textStatus);
64+
console.log(errorThrown);
65+
$modal.find('.modal-body').text(errorThrown);
66+
}
67+
});
68+
return false;
69+
});
70+
});

0 commit comments

Comments
 (0)