',
37 | transclude: true,
38 | bindings: {
39 | id: '@?',
40 | template: '@?'
41 | }
42 | });
43 |
44 | }
45 |
--------------------------------------------------------------------------------
/src/asg-modal.ts:
--------------------------------------------------------------------------------
1 | namespace angularSuperGallery {
2 |
3 | export class ModalController {
4 |
5 | public id : string;
6 | public options : IOptions;
7 | public items : Array
\r\n {{ $ctrl.file | json }} \r\n\r\n\r\n
\r\n {{ $ctrl.service.instances.abstracts.options | json }}\r\n');
4 | $templateCache.put('/views/asg-help.html','- \r\n\t
- SPACE : forward \r\n\t
- RIGHT : forward \r\n\t
- LEFT : backward \r\n\t
- UP / HOME : first \r\n\t
- DOWN / END : last \r\n\t
- ENTER : toggle fullscreen \r\n\t
- ESC : exit \r\n\t
- p : play/pause \r\n\t
- t : change transition effect \r\n\t
- m : toggle menu \r\n\t
- s : toggle image size \r\n\t
- c : toggle caption \r\n\t
- h : toggle help \r\n
\r\n\r\n\t\r\n\r\n\t
\r\n');
6 | $templateCache.put('/views/asg-info.html','\r\n\t\t\r\n\t
\r\n\r\n\t\r\n\t\t\r\n\t
\r\n\r\n\t\r\n\r\n\t
\r\n\r\n\r\n');
7 | $templateCache.put('/views/asg-modal.html','\r\n\t\t
\r\n\r\n\t\r\n\r\n{{ $ctrl.file.title }}
\r\n\t\r\n\r\n \r\n\r\n
\r\n');
8 | $templateCache.put('/views/asg-panel.html','\r\n\r\n
\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\t\t\t\t{{ $ctrl.config.title }}\r\n {{ $ctrl.config.subtitle }}\r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n\t\t\t
\r\n\r\n \r\n\t\t\t\t\r\n\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\r\n \r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {{ $ctrl.asg.file.title }}\r\n - \r\n {{ $ctrl.asg.file.description }}\r\n \r\n Download\r\n \r\n
\r\n \r\n\r\n
');
9 | $templateCache.put('/views/asg-thumbnail.html','\r\n\r\n ![{{ file.title }}]()
\r\n\r\n
\r\n\r\n\r\n {{ key + 1 }}\r\n {{ file.title }}\r\n
\r\n \r\n
');
10 | $templateCache.put('/views/button/asg-close.html','\n');
11 | $templateCache.put('/views/button/asg-fullscreen.html','\r\n');
12 | $templateCache.put('/views/button/asg-help.html','\n');
13 | $templateCache.put('/views/button/asg-index-xs.html','\n');
14 | $templateCache.put('/views/button/asg-index.html','');
15 | $templateCache.put('/views/button/asg-next.html','\r\n');
16 | $templateCache.put('/views/button/asg-pin.html','\n');
17 | $templateCache.put('/views/button/asg-playstop.html','\r\n');
18 | $templateCache.put('/views/button/asg-prev.html','\r\n');
19 | $templateCache.put('/views/button/asg-size.html','');
20 | $templateCache.put('/views/button/asg-thumbnails.html','\r\n');
21 | $templateCache.put('/views/button/asg-transition.html','\r\n');
22 | }]);
23 |
--------------------------------------------------------------------------------
/src/asg-thumbnail.ts:
--------------------------------------------------------------------------------
1 | namespace angularSuperGallery {
2 |
3 | export class ThumbnailController {
4 |
5 | public id: string;
6 | public options: IOptions;
7 | public items: Array\r\n\r\n ![{{ file.title }}]()
\r\n\r\n {{ key + 1 }}\r\n\r\n
\r\n',
152 | bindings: {
153 | id: '@',
154 | items: '=?',
155 | options: '=?',
156 | selected: '=?',
157 | visible: '=?',
158 | template: '@?',
159 | baseUrl: '@?'
160 | }
161 | });
162 |
163 | }
164 |
--------------------------------------------------------------------------------
/src/asg.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:math';
2 |
3 | $perspective: 1280px;
4 | $animspeed: 0.64s;
5 | $animsize: 14%;
6 | $rotate: 32deg;
7 | $scaleIn: 1.14;
8 | $scaleOut: 0.86;
9 |
10 | body.asg-yhidden {
11 | overflow-y: hidden;
12 | }
13 |
14 | @import "scss/asg-image";
15 | @import "scss/asg-modal";
16 | @import "scss/asg-panel";
17 | @import "scss/asg-thumbnail";
18 | @import "scss/asg-info";
19 | @import "scss/asg-control";
20 | @import "scss/theme-default";
21 | @import "scss/theme-darkblue";
22 | @import "scss/theme-darkred";
23 | @import "scss/theme-whitegold";
24 |
--------------------------------------------------------------------------------
/src/asg.ts:
--------------------------------------------------------------------------------
1 | let Vimeo;
2 |
3 | namespace angularSuperGallery {
4 |
5 | let app : ng.IModule = angular.module('angularSuperGallery', ['ngAnimate', 'ngTouch']);
6 |
7 | app.filter('asgBytes', () => {
8 | return function (bytes : any, precision : number) : string {
9 |
10 | if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
11 | return '';
12 | }
13 |
14 | if (bytes === 0) {
15 | return '0';
16 | }
17 |
18 | if (typeof precision === 'undefined') {
19 | precision = 1;
20 | }
21 |
22 | let units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
23 | number = Math.floor(Math.log(bytes) / Math.log(1024));
24 |
25 | return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
26 |
27 | };
28 | });
29 |
30 | }
31 |
32 | require('./asg-templates');
33 | require('./asg-service');
34 | require('./asg-control');
35 | require('./asg-debug');
36 | require('./asg-info');
37 | require('./asg-modal');
38 | require('./asg-panel');
39 | require('./asg-image');
40 | require('./asg-thumbnail');
41 |
--------------------------------------------------------------------------------
/src/scss/asg-control.scss:
--------------------------------------------------------------------------------
1 | .asg-control {
2 | position: relative;
3 | padding: 10px;
4 | z-index: 200;
5 | }
--------------------------------------------------------------------------------
/src/scss/asg-image.scss:
--------------------------------------------------------------------------------
1 | .asg-image {
2 | position: relative;
3 | overflow: hidden;
4 |
5 | > .images {
6 | position: absolute;
7 | top: 0px;
8 | right: 0px;
9 | bottom: 0px;
10 | left: 0px;
11 | z-index: auto;
12 | overflow: hidden;
13 | perspective: $perspective;
14 |
15 | > .img {
16 | background-size: auto;
17 | background-position: 50% 50%;
18 | background-repeat: no-repeat;
19 |
20 | > .placeholder {
21 | position: absolute;
22 | top: 0px;
23 | right: 0px;
24 | bottom: 0px;
25 | left: 0px;
26 | z-index: auto;
27 | overflow: hidden;
28 | background-size: auto;
29 | background-position: 50% 50%;
30 | background-repeat: no-repeat;
31 | filter: blur(10px);
32 |
33 | &.cover {
34 | background-size: cover;
35 | }
36 |
37 | &.contain {
38 | background-size: contain;
39 | }
40 |
41 | &.stretch {
42 | background-size: 100% 100%;
43 | }
44 | }
45 |
46 | > .source {
47 | cursor: pointer;
48 | background-size: auto;
49 | background-position: 50% 50%;
50 | background-repeat: no-repeat;
51 | transition: all ease 0.5s;
52 | opacity: 0;
53 |
54 | &.cover {
55 | background-size: cover;
56 | }
57 |
58 | &.contain {
59 | background-size: contain;
60 | }
61 |
62 | &.stretch {
63 | background-size: 100% 100%;
64 | }
65 | }
66 |
67 | &.loaded {
68 | background-image: none;
69 |
70 | .source {
71 | opacity: 1;
72 | }
73 | }
74 | }
75 |
76 | @import "asg-transitions";
77 | }
78 |
79 | &.modalon .source {
80 | cursor: pointer;
81 | }
82 |
83 | .asg-info {
84 | position: absolute;
85 | bottom: 0;
86 | left: 0;
87 | right: 0;
88 | }
89 |
90 | .asg-control {
91 | position: absolute;
92 | bottom: 0;
93 | right: 0;
94 | }
95 |
96 | .arrow {
97 | position: absolute;
98 | top: calc(50% - 35px);
99 | opacity: 0;
100 | z-index: 720;
101 | min-height: 70px;
102 | transition: all ease 0.2s;
103 | transform: scale(1.2);
104 |
105 | display: flex;
106 | align-items: center;
107 | justify-content: center;
108 |
109 | &.left {
110 | text-align: left;
111 | left: -20px;
112 | }
113 |
114 | &.right {
115 | text-align: right;
116 | right: -20px;
117 | }
118 |
119 | .btn {
120 | padding: 10px 16px;
121 | opacity: 0.7;
122 |
123 | &:hover {
124 | opacity: 1;
125 | }
126 | }
127 | }
128 |
129 | .video {
130 | position: absolute;
131 | top: 0;
132 | bottom: 0;
133 | left: 0;
134 | right: 0;
135 | z-index: 710;
136 | background-color: black;
137 |
138 | > div {
139 | position: unset !important;
140 | }
141 | }
142 |
143 | .play {
144 | position: absolute;
145 | top: calc(50% - 80px);
146 | left: calc(50% - 80px);
147 | width: 160px;
148 | height: 160px;
149 | z-index: 800;
150 | text-align: center;
151 |
152 | .button {
153 | fill: white;
154 | opacity: 0.42;
155 | cursor: pointer;
156 | transition: all $animspeed;
157 | border-radius: 50%;
158 |
159 | &:hover {
160 | opacity: 0.77;
161 | box-shadow: 0px 0px 7px #212121;
162 | }
163 |
164 | svg {
165 | stroke-width: 2;
166 | }
167 | }
168 | }
169 |
170 | &:hover {
171 | .arrow {
172 | opacity: 1;
173 | transform: scale(1);
174 |
175 | &.left {
176 | left: 0;
177 | }
178 |
179 | &.right {
180 | right: 0;
181 | }
182 | }
183 | }
184 | }
185 |
--------------------------------------------------------------------------------
/src/scss/asg-info.scss:
--------------------------------------------------------------------------------
1 | .asg-info {
2 | position: relative;
3 | padding: 10px;
4 | z-index: auto;
5 | }
--------------------------------------------------------------------------------
/src/scss/asg-modal.scss:
--------------------------------------------------------------------------------
1 | .asg-modal {
2 | z-index: 99999;
3 | line-height: inherit;
4 | position: fixed;
5 | top: 0;
6 | right: 0;
7 | bottom: 0;
8 | left: 0;
9 | padding: 0;
10 | outline: none;
11 | opacity: 1;
12 | &.dynamic {
13 | .header {
14 | position: absolute;
15 | opacity: 0;
16 | top: 0;
17 | left: 0;
18 | right: 0;
19 | &:hover {
20 | opacity: 0.75;
21 | }
22 | }
23 | }
24 | .frame {
25 | z-index: 7400;
26 | position: absolute;
27 | overflow: hidden;
28 | top: 0;
29 | right: 0;
30 | bottom: 0;
31 | left: 0;
32 | padding: 0;
33 | display: flex;
34 | flex-direction: column;
35 | }
36 | .btn {
37 | text-transform: lowercase;
38 | }
39 | .btn-size {
40 | width: 64px;
41 | }
42 | .btn-transitions {
43 | width: 96px;
44 | }
45 | &.ng-hide-add,
46 | &.ng-hide-remove {
47 | transition: all ease 0.42s;
48 | }
49 | &.ng-hide {
50 | opacity: 0;
51 | }
52 | .keyInput {
53 | position: absolute;
54 | width: 0px;
55 | height: 0px;
56 | opacity: 0;
57 | }
58 | .header {
59 | position: relative;
60 | display: block;
61 | width: 100%;
62 | height: auto;
63 | z-index: 7700;
64 | .title {
65 | display: inline-block;
66 | margin: 6px 10px 4px 12px;
67 | float: left;
68 | font-size: 1.2em;
69 | }
70 | .subtitle {
71 | display: inline-block;
72 | margin: 4px 10px 4px 2px;
73 | text-transform: uppercase;
74 | float: left;
75 | font-size: 0.8em;
76 | padding: 6px 16px 6px 16px;
77 | }
78 | .file {
79 | font-size: 0.9em;
80 | padding: 10px 12px;
81 | display: inline-block;
82 | }
83 | .buttons {
84 | margin: 4px 4px 4px 14px;
85 | .btn {
86 | margin: 0px 1px;
87 | }
88 | }
89 | }
90 | perspective: $perspective;
91 | .help {
92 | ul,
93 | li {
94 | margin: 0;
95 | padding: 0;
96 | display: block;
97 | }
98 | position: absolute;
99 | right: 0;
100 | padding: 10px;
101 | z-index: 7500;
102 | font-size: 12px;
103 | transition: all ease 0.42s;
104 | transform: translateY(0) rotateX(0deg);
105 | &.ng-hide {
106 | opacity: 0;
107 | transform-origin: right center;
108 | transform: translateX(77px) rotateY(0deg);
109 | }
110 | }
111 | .images {
112 | perspective: $perspective;
113 | position: relative;
114 | z-index: auto;
115 | overflow: hidden;
116 | height: 100%;
117 | @import "asg-transitions";
118 | }
119 |
120 | .arrow {
121 | position: absolute;
122 | top: 0;
123 | bottom: 0;
124 | opacity: 0;
125 | z-index: 700;
126 | min-height: 100px;
127 | transition: all ease 0.2s;
128 | transform: scale(1.2);
129 |
130 | display: flex;
131 | align-items: center;
132 | justify-content: center;
133 |
134 | cursor: pointer;
135 |
136 | &.left {
137 | left: -20px;
138 | }
139 |
140 | &.right {
141 | right: -20px;
142 | }
143 |
144 | .btn {
145 | padding: 10px 16px;
146 | opacity: 0.7;
147 |
148 | &:hover {
149 | opacity: 1;
150 | }
151 | }
152 | }
153 |
154 | &:hover {
155 | .arrow {
156 | opacity: 1;
157 | transform: scale(1);
158 |
159 | &.left {
160 | left: 0;
161 | }
162 |
163 | &.right {
164 | right: 0;
165 | }
166 |
167 | }
168 |
169 | }
170 |
171 | .caption {
172 | position: absolute;
173 | left: 0;
174 | right: 0;
175 | opacity: 0;
176 | z-index: 900;
177 | &.top {
178 | top: 0;
179 | }
180 | &.bottom {
181 | bottom: 0;
182 | }
183 | &.visible {
184 | opacity: 1;
185 | }
186 | &:not(.visible):hover {
187 | opacity: 1;
188 | }
189 | .content {
190 | padding: 7px 10px;
191 | text-align: center;
192 | margin: auto;
193 | }
194 | }
195 | .dropdown-submenu {
196 | position: relative;
197 | }
198 | .dropdown-submenu>.dropdown-menu {
199 | position: relative;
200 | }
201 | .dropdown-submenu.open>.dropdown-menu {
202 | display: block;
203 | }
204 | @media (orientation: portrait) {
205 | .help {
206 | left: 0;
207 | right: 0;
208 | top: 0;
209 | font-size: 1.1em;
210 | text-align: right;
211 | li {
212 | margin: 0;
213 | padding: 2px;
214 | display: block;
215 | }
216 | }
217 | .header {
218 | text-align: center;
219 | font-size: 18px;
220 | .title,
221 | .subtitle {
222 | margin-top: 1%;
223 | float: none;
224 | clear: both;
225 | }
226 | .buttons {
227 | float: none !important;
228 | clear: both !important;
229 | .btn {
230 | font-size: 0.7em;
231 | margin: 1% 0;
232 | }
233 | }
234 | }
235 | .caption {
236 | .content {
237 | font-size: 1.1em;
238 | }
239 | }
240 | }
241 | }
242 |
--------------------------------------------------------------------------------
/src/scss/asg-panel.scss:
--------------------------------------------------------------------------------
1 | .asg-panel {
2 | .item {
3 | overflow: hidden;
4 | position: relative;
5 | border: none;
6 | border-radius: unset;
7 | img {
8 | cursor: pointer;
9 | display: block;
10 | max-width: 100%;
11 | height: auto;
12 | margin-right: auto;
13 | margin-left: auto;
14 | }
15 | .index {
16 | position: absolute;
17 | top: 7px;
18 | z-index: 9999;
19 | right: 7px;
20 | padding: 2px 4px;
21 | font-size: 9px;
22 | }
23 | .caption {
24 | width: 100%;
25 | font-size: 11px;
26 | overflow: hidden;
27 | text-overflow: ellipsis;
28 | white-space: nowrap;
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/src/scss/asg-thumbnail.scss:
--------------------------------------------------------------------------------
1 | .asg-thumbnail {
2 | position: relative;
3 | overflow: hidden;
4 | transition: all ease math.div($animspeed, 2);
5 | padding: 0;
6 | opacity: 0;
7 | &.initialized {
8 | opacity: 1;
9 | }
10 | &.dynamic {
11 | position: absolute;
12 | left: 0;
13 | right: 0;
14 | bottom: 0;
15 | bottom: -20px;
16 | opacity: 0;
17 | &:hover {
18 | bottom: 0px;
19 | opacity: 1;
20 | }
21 | }
22 | .items {
23 | position: relative;
24 | white-space: nowrap;
25 | transition: all ease math.div($animspeed, 2);
26 | .item {
27 | overflow: hidden;
28 | position: relative;
29 | display: inline-block;
30 | margin: 0px 0px 0px 0px;
31 | transition: all ease math.div($animspeed, 2);
32 | vertical-align: top;
33 | &:last-child {
34 | margin-right: 0px;
35 | }
36 | img {
37 | cursor: pointer;
38 | display: block;
39 | width: auto;
40 | margin: 0px;
41 | }
42 | .index {
43 | transition: all ease math.div($animspeed, 2);
44 | position: absolute;
45 | z-index: 9999;
46 | top: 5px;
47 | right: 5px;
48 | padding: 1px 2px 0px 4px;
49 | font-size: 9px;
50 | cursor: pointer;
51 | }
52 | }
53 | }
54 | }
55 |
56 | .asg-modal {
57 | .asg-thumbnail {
58 | .items {
59 | img {
60 | height: 85px;
61 | }
62 | .index {
63 | font-size: 12px;
64 | }
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/scss/asg-transitions.scss:
--------------------------------------------------------------------------------
1 | .img {
2 | max-width: 100%;
3 | max-height: 100%;
4 | margin: auto;
5 | position: absolute;
6 | top: 0;
7 | right: 0px;
8 | left: 0;
9 | z-index: 0;
10 | width: auto;
11 | height: auto;
12 | bottom: 0px;
13 | opacity: 1;
14 |
15 | background-size: auto;
16 | background-position: 50% 50%;
17 | background-repeat: no-repeat;
18 |
19 | >.placeholder {
20 | position: absolute;
21 | top: 0px;
22 | right: 0px;
23 | bottom: 0px;
24 | left: 0px;
25 | z-index: auto;
26 | overflow: hidden;
27 | background-size: auto;
28 | background-position: 50% 50%;
29 | background-repeat: no-repeat;
30 | opacity: 0.42;
31 |
32 | -ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=10)';
33 | -webkit-filter: blur(10px);
34 | -moz-filter: blur(10px);
35 | -o-filter: blur(10px);
36 | filter: blur(10px);
37 |
38 | &.cover {
39 | background-size: cover;
40 | }
41 |
42 | &.contain {
43 | background-size: contain;
44 | }
45 |
46 | &.stretch {
47 | background-size: 100% 100%;
48 | }
49 |
50 | }
51 |
52 | >.source {
53 | max-width: 100%;
54 | max-height: 100%;
55 | margin: auto;
56 | display: block;
57 | position: absolute;
58 | top: 0;
59 | bottom: 0;
60 | left: 0;
61 | right: 0;
62 | background-size: auto;
63 | background-position: 50% 50%;
64 | background-repeat: no-repeat;
65 | transition: all ease .5s;
66 | opacity: 0;
67 |
68 | &.cover {
69 | background-size: cover;
70 | }
71 |
72 | &.contain {
73 | background-size: contain;
74 | }
75 |
76 | &.stretch {
77 | background-size: 100% 100%;
78 | }
79 |
80 | }
81 |
82 | &.loaded {
83 |
84 | background-image: none;
85 |
86 | .source {
87 | opacity: 1;
88 | }
89 |
90 | }
91 |
92 | }
93 |
94 | @import 'transitions/rotateLR';
95 | @import 'transitions/rotateTB';
96 | @import 'transitions/rotateZY';
97 | @import 'transitions/slideLR';
98 | @import 'transitions/slideTB';
99 | @import 'transitions/zlideLR';
100 | @import 'transitions/zlideTB';
101 | @import 'transitions/fadeInOut';
102 | @import 'transitions/zoomIn';
103 | @import 'transitions/zoomOut';
104 | @import 'transitions/zoomInOut';
105 | @import 'transitions/flipX';
106 | @import 'transitions/flipY';
107 |
108 |
--------------------------------------------------------------------------------
/src/scss/theme-darkblue.scss:
--------------------------------------------------------------------------------
1 | $black: #050505;
2 | $white: #fefefe;
3 | $white_darken: darken($white, 14%);
4 | $primary: #30c6d4;
5 | $primary_darken: darken($primary, 40%);
6 | .asg-thumbnail.darkblue {
7 | background-color: $black;
8 | padding: 4px 0px 0px 0px;
9 | .item {
10 | margin: 0px 4px 0px 0px;
11 | img {
12 | height: 42px;
13 | opacity: 0.64;
14 | }
15 | .index {
16 | background-color: rgba($black, 0.64);
17 | padding: 1px 3px 0px 4px;
18 | color: $primary;
19 | top: 0px;
20 | right: -10px;
21 | bottom: 0px;
22 | opacity: 0;
23 | }
24 | background-color: $black;
25 | &.selected {
26 | img {
27 | opacity: 1;
28 | }
29 | .index {
30 | opacity: 1;
31 | right: 0px;
32 | }
33 | }
34 | &:hover {
35 | .index {
36 | opacity: 0.77;
37 | right: 0px;
38 | }
39 | }
40 | }
41 | }
42 |
43 | .asg-image.darkblue {
44 | background-color: $black;
45 | color: $primary;
46 | .asg-info {
47 | top: -100px;
48 | bottom: auto;
49 | font-size: 12px;
50 | background-color: rgba($black, 0);
51 | transition: all 0.25s;
52 | a {
53 | color: $primary;
54 | border-bottom: 1px dashed $primary;
55 | text-decoration: none;
56 | &:hover {
57 | text-decoration: none;
58 | border-bottom: 1px solid $primary;
59 | }
60 | }
61 | }
62 | &:hover .asg-info {
63 | background-color: rgba($black, 0.77);
64 | top: 0;
65 | }
66 | .btn {
67 | -webkit-transition: all .3s ease-in-out;
68 | transition: all .3s ease-in-out;
69 | border-radius: 0;
70 | background-image: none;
71 | text-shadow: none;
72 | }
73 | .btn-default {
74 | border: 1px solid $primary_darken;
75 | color: $primary;
76 | background-color: transparent;
77 | }
78 | .btn-default:focus,
79 | .btn-default:hover {
80 | border: 1px solid $primary;
81 | outline: none;
82 | color: $black;
83 | background-color: $primary;
84 | }
85 | .arrow {
86 | &.left .btn {
87 | margin-left: -1px;
88 | }
89 | &.right .btn {
90 | margin-right: -1px;
91 | }
92 | }
93 | .play {
94 |
95 | .button {
96 |
97 | fill: white;
98 | box-shadow: 0px 0px 4px $primary;
99 |
100 | &:hover {
101 | box-shadow: 0px 0px 17px $primary;
102 | }
103 |
104 | svg {
105 | .circle {
106 | stroke: $primary;
107 | fill: $black;
108 | }
109 | .icon {
110 | fill: $primary;
111 | }
112 | }
113 | }
114 | }
115 | }
116 |
117 | .asg-modal.darkblue {
118 | .frame {
119 | margin: 0;
120 | }
121 | .btn {
122 | -webkit-transition: all .3s ease-in-out;
123 | transition: all .3s ease-in-out;
124 | border-radius: 0;
125 | background-image: none;
126 | text-shadow: none;
127 | }
128 | .btn-default {
129 | border: 1px solid $primary_darken;
130 | color: $primary;
131 | background-color: transparent;
132 | }
133 | .btn-default:focus,
134 | .btn-default:hover {
135 | border: 1px solid $primary;
136 | outline: none;
137 | color: $black;
138 | background-color: $primary;
139 | }
140 | background-color: $black;
141 | .header {
142 | background-color: $black;
143 | color: $primary;
144 | .title {
145 | text-transform: uppercase;
146 | }
147 | .subtitle {
148 | background: $primary;
149 | color: $black;
150 | }
151 | }
152 | .help {
153 | background-color: rgba($black, 0.77);
154 | color: $primary;
155 | }
156 | .caption {
157 | .content {
158 | background-color: rgba($black, 0.64);
159 | color: $primary;
160 | padding: 0px;
161 | line-height: 32px;
162 | }
163 | }
164 | .asg-thumbnail {
165 | background-color: rgba($black, 0.77);
166 | .item {
167 | img {
168 | height: 77px;
169 | }
170 | }
171 | }
172 |
173 | }
174 |
175 | .asg-control.darkblue {
176 | .btn {
177 | -webkit-transition: all .3s ease-in-out;
178 | transition: all .3s ease-in-out;
179 | border-radius: 0;
180 | background-image: none;
181 | text-shadow: none;
182 | }
183 | .btn-default {
184 | border: 1px solid $primary;
185 | color: $primary;
186 | background-color: transparent;
187 | }
188 | .btn-default:focus,
189 | .btn-default:hover {
190 | border: 1px solid $primary;
191 | outline: none;
192 | color: $black;
193 | background-color: $primary;
194 | }
195 | background-color: $black;
196 | }
197 |
198 | .asg-info.darkblue {
199 | background-color: $black;
200 | color: $primary;
201 | }
202 |
203 | .asg-panel.darkblue {
204 | background-color: $black;
205 | .item {
206 | background-color: $black;
207 | &.selected {
208 | border-color: $black;
209 | }
210 | .index {
211 | background-color: rgba($black, 0.56);
212 | color: $primary;
213 | }
214 | }
215 | }
216 |
--------------------------------------------------------------------------------
/src/scss/theme-darkred.scss:
--------------------------------------------------------------------------------
1 | $black: #141414;
2 | $dark: #252c31;
3 | $primary: #ff4343;
4 | $button: #445059;
5 | $icon: #8fa9cc;
6 | $white: #fefefe;
7 | .asg-thumbnail.darkred {
8 | background-color: $dark;
9 | padding: 6px 0px 7px 0px;
10 | .item {
11 | margin: 0px 7px 0px 0px;
12 | opacity: 0.64;
13 | &.selected {
14 | opacity: 1;
15 | }
16 | img {
17 | height: 42px;
18 | }
19 | &:hover,
20 | &.selected {
21 | .index {
22 | opacity: 1;
23 | left: 0px;
24 | }
25 | }
26 | .index {
27 | background-color: rgba($dark, 0.9);
28 | color: $primary;
29 | top: unset;
30 | left: -20px;
31 | bottom: 8%;
32 | right: unset;
33 | opacity: 0;
34 | padding: 1px 12px;
35 | }
36 | background-color: $dark;
37 | }
38 | }
39 |
40 | .asg-image.darkred {
41 | background-color: $dark;
42 | color: $primary;
43 | .asg-info {
44 | top: -100px;
45 | bottom: auto;
46 | font-size: 12px;
47 | background-color: rgba($dark, 0);
48 | transition: all 0.25s;
49 | a {
50 | color: $primary;
51 | border-bottom: 1px dashed $primary;
52 | text-decoration: none;
53 | &:hover {
54 | text-decoration: none;
55 | border-bottom: 1px solid $primary;
56 | }
57 | }
58 | }
59 | &:hover .asg-info {
60 | background-color: rgba($dark, 0.77);
61 | top: 0;
62 | }
63 | .btn {
64 | -webkit-transition: all .2s ease-in-out;
65 | transition: all .2s ease-in-out;
66 | border-radius: 3px;
67 | background-image: none;
68 | text-shadow: none;
69 | }
70 | .btn-default {
71 | border: none;
72 | color: $icon;
73 | background-color: $button;
74 | }
75 | .btn-default:focus,
76 | .btn-default:hover {
77 | border: none;
78 | outline: none;
79 | color: $dark;
80 | background-color: $primary;
81 | }
82 | .arrow {
83 | &.left .btn {
84 | margin-left: 7px;
85 | }
86 | &.right .btn {
87 | margin-right: 7px;
88 | }
89 | }
90 | }
91 |
92 | .asg-modal.darkred {
93 | .frame {
94 | margin: 0;
95 | }
96 | .btn {
97 | -webkit-transition: all .2s ease-in-out;
98 | transition: all .2s ease-in-out;
99 | border-radius: 3px;
100 | background-image: none;
101 | text-shadow: none;
102 | }
103 | .btn-default {
104 | border: none;
105 | color: $icon;
106 | background-color: $button;
107 | }
108 | .btn-default:focus,
109 | .btn-default:hover {
110 | border: none;
111 | outline: none;
112 | color: $dark;
113 | background-color: $primary;
114 | }
115 | background-color: $dark;
116 | .header {
117 | .buttons {
118 | margin: 4px 4px 5px 14px;
119 | }
120 | background-color: $dark;
121 | color: $icon;
122 | .title {
123 | margin: 3px 10px 4px 12px;
124 | color: $primary;
125 | text-transform: uppercase;
126 | }
127 | .subtitle {
128 | margin: 6px 10px 4px 10px;
129 | padding: 2px 10px 2px 10px;
130 | background: $primary;
131 | color: $dark;
132 | }
133 | }
134 | .help {
135 | background-color: rgba($dark, 0.77);
136 | color: $icon;
137 | }
138 | .caption {
139 | .content {
140 | background-color: rgba($dark, 0.77);
141 | color: $icon;
142 | padding: 0px;
143 | line-height: 32px;
144 | }
145 | }
146 | .asg-thumbnail {
147 | background-color: rgba($dark, 0.77);
148 | .item {
149 | img {
150 | height: 77px;
151 | }
152 | }
153 | }
154 | }
155 |
156 | .asg-control.darkred {
157 | .btn {
158 | -webkit-transition: all .2s ease-in-out;
159 | transition: all .2s ease-in-out;
160 | border-radius: 3px;
161 | background-image: none;
162 | text-shadow: none;
163 | }
164 | .btn-default {
165 | border: none;
166 | color: $primary;
167 | background-color: transparent;
168 | }
169 | .btn-default:focus,
170 | .btn-default:hover {
171 | border: none;
172 | outline: none;
173 | color: $dark;
174 | background-color: $primary;
175 | }
176 | background-color: $dark;
177 | }
178 |
179 | .asg-info.darkred {
180 | background-color: $dark;
181 | color: $primary;
182 | }
183 |
184 | .asg-panel.darkred {
185 | background-color: $dark;
186 | .item {
187 | background-color: $dark;
188 | &:hover {
189 | .caption {
190 | color: $white;
191 | }
192 | }
193 | &.selected {
194 | .index {
195 | background-color: $black;
196 | }
197 | }
198 | .index {
199 | float: left;
200 | background-color: $dark;
201 | color: $primary;
202 | position: relative;
203 | padding: 1px 7px;
204 | margin-right: 7px;
205 | font-size: 10px;
206 | top: unset;
207 | right: unset;
208 | }
209 | .caption {
210 | transition: color 0.4s;
211 | max-height: 21px;
212 | display: inline-block;
213 | padding: 3px 0px;
214 | margin-bottom: 15px;
215 | }
216 | }
217 | }
218 |
--------------------------------------------------------------------------------
/src/scss/theme-default.scss:
--------------------------------------------------------------------------------
1 | $black: #050505;
2 | $white: #fefefe;
3 | $white_darken: darken($white, 14%);
4 | .asg-thumbnail {
5 | .item {
6 | .index {
7 | background-color: $white_darken;
8 | color: $black;
9 | }
10 | }
11 | }
12 |
13 | .asg-modal.default {
14 | background-color: $white_darken;
15 | .highlight {
16 | background-color: $white;
17 | }
18 | .header {
19 | background-color: $white;
20 | .subtitle {
21 | background: $white_darken;
22 | color: $white;
23 | }
24 | }
25 | .help {
26 | background-color: rgba($black, 0.56);
27 | color: $white_darken;
28 | }
29 | .caption {
30 | .content {
31 | background-color: rgba($black, 0.56);
32 | color: $white_darken;
33 | }
34 | }
35 | }
36 |
37 | .asg-panel.default {
38 | .item {
39 | &.selected {
40 | border-color: $black;
41 | }
42 | .index {
43 | background-color: $white_darken;
44 | color: $black;
45 | }
46 | }
47 | }
--------------------------------------------------------------------------------
/src/scss/theme-whitegold.scss:
--------------------------------------------------------------------------------
1 | $black: #212121;
2 | $white: #f1f1f1;
3 | $white_darken: darken($white, 14%);
4 | $primary: #d4c386;
5 | .asg-thumbnail.whitegold {
6 | background-color: #d4c386;
7 | padding: 4px;
8 | .item {
9 | margin: 0px 4px 0px 0px;
10 | opacity: 0.64;
11 | &.selected {
12 | opacity: 1;
13 | }
14 | &:hover,
15 | &.selected {
16 | .index {
17 | opacity: 1;
18 | right: 0px;
19 | }
20 | }
21 | .index {
22 | background-color: rgba($black, 0.64);
23 | color: $primary;
24 | top: 0px;
25 | right: -10px;
26 | bottom: 0px;
27 | opacity: 0;
28 | }
29 | background-color: $black;
30 | }
31 | }
32 |
33 | .asg-image.whitegold {
34 | background-color: $primary;
35 | color: $white;
36 | .asg-info {
37 | background-color: rgba($black, 0.5);
38 | color: darken($white, 5%);
39 | a {
40 | color: darken($white, 5%);
41 | }
42 | }
43 | .btn {
44 | -webkit-transition: all .3s ease-in-out;
45 | transition: all .3s ease-in-out;
46 | border-radius: 0;
47 | background-image: none;
48 | text-shadow: none;
49 | }
50 | .btn-default {
51 | border: 1px solid $white;
52 | color: $white;
53 | background-color: transparent;
54 | }
55 | .btn-default:focus,
56 | .btn-default:hover {
57 | border: 1px solid $primary;
58 | outline: none;
59 | color: $primary;
60 | background-color: $white;
61 | }
62 | }
63 |
64 | .asg-modal.whitegold {
65 | .btn {
66 | -webkit-transition: all .3s ease-in-out;
67 | transition: all .3s ease-in-out;
68 | border-radius: 0;
69 | background-image: none;
70 | text-shadow: none;
71 | }
72 | .btn-default {
73 | border: 1px solid $white;
74 | color: $white;
75 | background-color: transparent;
76 | }
77 | .btn-default:focus,
78 | .btn-default:hover {
79 | border: 1px solid $primary;
80 | outline: none;
81 | color: $primary;
82 | background-color: $white;
83 | }
84 | background-color: $primary;
85 | .header {
86 | background-color: $primary;
87 | color: $primary;
88 | .title {
89 | color: $white;
90 | }
91 | .subtitle {
92 | background: $primary;
93 | color: $white;
94 | }
95 | }
96 | .help {
97 | background-color: rgba($primary, 0.77);
98 | color: $white;
99 | }
100 | .caption {
101 | .content {
102 | background-color: rgba($primary, 0.56);
103 | color: $white;
104 | }
105 | }
106 | }
107 |
108 | .asg-control.whitegold {
109 | .btn {
110 | -webkit-transition: all .3s ease-in-out;
111 | transition: all .3s ease-in-out;
112 | border-radius: 0;
113 | background-image: none;
114 | text-shadow: none;
115 | }
116 | .btn-default {
117 | border: 1px solid $white;
118 | color: $white;
119 | background-color: transparent;
120 | }
121 | .btn-default:focus,
122 | .btn-default:hover {
123 | border: 1px solid $primary;
124 | outline: none;
125 | color: $primary;
126 | background-color: $white;
127 | }
128 | background-color: $primary;
129 | }
130 |
131 | .asg-info.whitegold {
132 | background-color: $primary;
133 | color: $white;
134 | a {
135 | color: $white;
136 | border-bottom: 1px dashed $primary;
137 | text-decoration: none;
138 | &:hover {
139 | text-decoration: none;
140 | border-bottom: 1px solid $primary;
141 | }
142 | }
143 | }
144 |
145 | .asg-panel.whitegold {
146 | .item {
147 | &.selected {
148 | border-color: $primary;
149 | .index {
150 | background-color: $primary;
151 | color: $white;
152 | }
153 | }
154 | .index {
155 | color: $primary;
156 | top: inherit;
157 | bottom: 5px;
158 | font-size: 12px;
159 | padding: 0px 4px;
160 | line-height: 17px;
161 | right: 15px;
162 | border-radius: 2px;
163 | }
164 | }
165 | }
--------------------------------------------------------------------------------
/src/scss/transitions/fadeInOut.scss:
--------------------------------------------------------------------------------
1 | &.fadeInOut {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | }
12 |
13 | &.ng-hide-add {
14 | opacity: 1;
15 | }
16 |
17 | &.ng-hide-remove.ng-hide-remove-active {
18 | opacity: 1;
19 | }
20 |
21 | &.ng-hide-remove {
22 | opacity: 0;
23 | }
24 |
25 | }
26 |
27 | &.backward .img {
28 |
29 | &.ng-hide-remove, &.ng-hide-add {
30 | transition: all ease $animspeed;
31 | }
32 |
33 | &.ng-hide-add.ng-hide-add-active {
34 | opacity: 0;
35 | }
36 |
37 | &.ng-hide-add {
38 | opacity: 1;
39 | }
40 |
41 | &.ng-hide-remove.ng-hide-remove-active {
42 | opacity: 1;
43 | }
44 |
45 | &.ng-hide-remove {
46 | opacity: 0;
47 | }
48 |
49 | }
50 | }
--------------------------------------------------------------------------------
/src/scss/transitions/flipX.scss:
--------------------------------------------------------------------------------
1 | &.flipX {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: rotateX(-180deg);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: rotateX(0deg);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: rotateX(0deg);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: rotateX(180deg);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: rotateX(180deg);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: rotateX(0deg);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: rotateX(0deg);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: rotateX(-180deg);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/scss/transitions/flipY.scss:
--------------------------------------------------------------------------------
1 | &.flipY {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: rotateY(-180deg);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: rotateY(0deg);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: rotateY(0deg);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: rotateY(180deg);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: rotateY(180deg);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: rotateY(0deg);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: rotateY(0deg);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: rotateY(-180deg);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/scss/transitions/rotateLR.scss:
--------------------------------------------------------------------------------
1 |
2 | &.rotateLR {
3 |
4 | &.forward .img {
5 |
6 | &.ng-hide-remove, &.ng-hide-add {
7 | transition: all ease $animspeed;
8 | }
9 |
10 | &.ng-hide-add.ng-hide-add-active {
11 | opacity: 0;
12 | transform: rotateY(-$rotate) translateX(-$animsize);
13 | }
14 |
15 | &.ng-hide-add {
16 | opacity: 1;
17 | transform: rotateY(0deg) translateX(0);
18 | }
19 |
20 | &.ng-hide-remove.ng-hide-remove-active {
21 | opacity: 1;
22 | transform: rotateY(0deg) translateX(0);
23 | }
24 |
25 | &.ng-hide-remove {
26 | opacity: 0;
27 | transform: rotateY($rotate) translateX($animsize);
28 | }
29 |
30 | }
31 |
32 | &.backward .img {
33 |
34 | &.ng-hide-remove, &.ng-hide-add {
35 | transition: all ease $animspeed;
36 | }
37 |
38 | &.ng-hide-add.ng-hide-add-active {
39 | opacity: 0;
40 | transform: rotateY($rotate) translateX($animsize);
41 | }
42 |
43 | &.ng-hide-add {
44 | opacity: 1;
45 | transform: rotateY(0deg) translateX(0);
46 | }
47 |
48 | &.ng-hide-remove.ng-hide-remove-active {
49 | opacity: 1;
50 | transform: rotateY(0deg) translateX(0);
51 | }
52 |
53 | &.ng-hide-remove {
54 | opacity: 0;
55 | transform: rotateY(-$rotate) translateX(-$animsize);
56 | }
57 |
58 | }
59 | }
--------------------------------------------------------------------------------
/src/scss/transitions/rotateTB.scss:
--------------------------------------------------------------------------------
1 | &.rotateTB {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: translateY($animsize) rotateX(-$rotate);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: translateY(0) rotateX(0deg);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: translateY(0) rotateX(0deg);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: translateY(-$animsize) rotateX($rotate);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: translateY(-$animsize) rotateX($rotate);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: translateY(0) rotateX(0deg);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: translateY(0) rotateX(0deg);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: translateY($animsize) rotateX(-$rotate);
55 | }
56 |
57 | }
58 |
59 | }
--------------------------------------------------------------------------------
/src/scss/transitions/rotateZY.scss:
--------------------------------------------------------------------------------
1 | &.rotateZY {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: rotateZ(-$rotate) rotateY($rotate);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: rotateZ(0) rotateY(0deg);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: rotateZ(0) rotateY(0deg);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: rotateZ($rotate) rotateY(-$rotate);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: rotateZ($rotate) rotateY(-$rotate);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: rotateZ(0) rotateY(0deg);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: rotateZ(0) rotateY(0deg);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: rotateZ(-$rotate) rotateY($rotate);
55 | }
56 |
57 | }
58 |
59 | }
--------------------------------------------------------------------------------
/src/scss/transitions/slideLR.scss:
--------------------------------------------------------------------------------
1 | &.slideLR {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: translateX(-$animsize);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: translateX(0);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: translateX(0);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: translateX($animsize);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: translateX($animsize);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: translateX(0);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: translateX(0);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: translateX(-$animsize);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/scss/transitions/slideTB.scss:
--------------------------------------------------------------------------------
1 | &.slideTB {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: translateY($animsize);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: translateY(0);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: translateY(0);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: translateY(-$animsize);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: translateY(-$animsize);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: translateY(0);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: translateY(0);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: translateY($animsize);
55 | }
56 |
57 | }
58 |
59 | }
--------------------------------------------------------------------------------
/src/scss/transitions/zlideLR.scss:
--------------------------------------------------------------------------------
1 | &.zlideLR {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: translateX(-$animsize) scale($scaleOut);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: translateX(0) scale(1);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: translateX(0) scale(1);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: translateX($animsize) scale($scaleOut);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: translateX($animsize) scale($scaleOut);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: translateX(0) scale(1);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: translateX(0) scale(1);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: translateX(-$animsize) scale($scaleOut);
55 | }
56 |
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/scss/transitions/zlideTB.scss:
--------------------------------------------------------------------------------
1 | &.zlideTB {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: translateY($animsize) scale($scaleOut);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: translateY(0) scale(1);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: translateY(0) scale(1);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: translateY(-$animsize) scale($scaleOut);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: translateY(-$animsize) scale($scaleOut);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: translateY(0) scale(1);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: translateY(0) scale(1);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: translateY($animsize) scale($scaleOut);
55 | }
56 |
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/scss/transitions/zoomIn.scss:
--------------------------------------------------------------------------------
1 | &.zoomIn {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: scale($scaleIn);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: scale(1);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: scale(1);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: scale($scaleOut);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: scale($scaleOut);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: scale(1);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: scale(1);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: scale($scaleIn);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/scss/transitions/zoomInOut.scss:
--------------------------------------------------------------------------------
1 | &.zoomInOut {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: scale($scaleIn);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: scale(1);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: scale(1);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: scale($scaleIn);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: scale($scaleIn);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: scale(1);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: scale(1);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: scale($scaleIn);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/scss/transitions/zoomOut.scss:
--------------------------------------------------------------------------------
1 | &.zoomOut {
2 |
3 | &.forward .img {
4 |
5 | &.ng-hide-remove, &.ng-hide-add {
6 | transition: all ease $animspeed;
7 | }
8 |
9 | &.ng-hide-add.ng-hide-add-active {
10 | opacity: 0;
11 | transform: scale($scaleOut);
12 | }
13 |
14 | &.ng-hide-add {
15 | opacity: 1;
16 | transform: scale(1);
17 | }
18 |
19 | &.ng-hide-remove.ng-hide-remove-active {
20 | opacity: 1;
21 | transform: scale(1);
22 | }
23 |
24 | &.ng-hide-remove {
25 | opacity: 0;
26 | transform: scale($scaleIn);
27 | }
28 |
29 | }
30 |
31 | &.backward .img {
32 |
33 | &.ng-hide-remove, &.ng-hide-add {
34 | transition: all ease $animspeed;
35 | }
36 |
37 | &.ng-hide-add.ng-hide-add-active {
38 | opacity: 0;
39 | transform: scale($scaleIn);
40 | }
41 |
42 | &.ng-hide-add {
43 | opacity: 1;
44 | transform: scale(1);
45 | }
46 |
47 | &.ng-hide-remove.ng-hide-remove-active {
48 | opacity: 1;
49 | transform: scale(1);
50 | }
51 |
52 | &.ng-hide-remove {
53 | opacity: 0;
54 | transform: scale($scaleOut);
55 | }
56 |
57 | }
58 | }
--------------------------------------------------------------------------------
/src/views/asg-control.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
10 |
13 |
14 |
17 |
18 |
--------------------------------------------------------------------------------
/src/views/asg-debug.html:
--------------------------------------------------------------------------------
1 |
2 | {{ $ctrl.file | json }}
3 |
4 | 5 |
6 | {{ $ctrl.service.instances.abstracts.options | json }}
7 |
--------------------------------------------------------------------------------
/src/views/asg-help.html:
--------------------------------------------------------------------------------
1 | -
2 |
- SPACE : forward 3 |
- RIGHT : forward 4 |
- LEFT : backward 5 |
- UP / HOME : first 6 |
- DOWN / END : last 7 |
- ENTER : toggle fullscreen 8 |
- ESC : exit 9 |
- p : play/pause 10 |
- t : change transition effect 11 |
- m : toggle menu 12 |
- s : toggle image size 13 |
- c : toggle caption 14 |
- h : toggle help 15 |
4 |
5 |
36 |
37 |
54 |
--------------------------------------------------------------------------------
/src/views/asg-info.html:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/views/asg-modal.html:
--------------------------------------------------------------------------------
1 |
38 |
42 |
43 |
44 |
45 |
49 |
50 |
51 |
2 |
3 |
4 |
5 |
66 |
--------------------------------------------------------------------------------
/src/views/asg-panel.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
64 |
65 |
8 |
9 |
12 |
13 |
16 |
17 |
18 | {{ $ctrl.config.title }}
19 | {{ $ctrl.config.subtitle }}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
60 |
61 |
29 |
32 |
33 |
34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
47 |
48 |
44 |
45 |
46 |
49 |
58 |
59 |
50 | {{ $ctrl.asg.file.title }}
51 | -
52 | {{ $ctrl.asg.file.description }}
53 |
54 | Download
55 |
56 |
57 |
2 |
3 |
--------------------------------------------------------------------------------
/src/views/asg-thumbnail.html:
--------------------------------------------------------------------------------
1 |
4 |
5 | ![{{ file.title }}]()
6 |
7 |
12 |
13 |
8 | {{ key + 1 }}
9 | {{ file.title }}
10 |
11 |
2 |
--------------------------------------------------------------------------------
/src/views/button/asg-close.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-fullscreen.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-help.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-index-xs.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/button/asg-next.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-pin.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/views/button/asg-playstop.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/views/button/asg-prev.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-size.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/button/asg-thumbnails.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/button/asg-transition.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
4 | ![{{ file.title }}]()
5 |
6 | {{ key + 1 }}
7 |
8 |
9 |
11 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "dependencies": {
7 | "angular-super-gallery": "https://github.com/schalkt/angular-super-gallery#develop"
8 | },
9 | "devDependencies": {
10 | "i": "^0.3.6",
11 | "npm": "^6.13.7",
12 | "webpack": "^3.12.0",
13 | "webpack-css-loaders": "^1.0.0"
14 | },
15 | "scripts": {
16 | "build": "webpack -p",
17 | "watch": "webpack --watch"
18 | }
19 | }
--------------------------------------------------------------------------------
/test/src/index.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 | body {
6 | background-color: #101010;
7 | padding: 5%;
8 | height: 100%;
9 | color: #c2c2c2;
10 | }
11 |
12 | .asg-modal {
13 | background-color: #101010;
14 | }
--------------------------------------------------------------------------------
/test/src/index.js:
--------------------------------------------------------------------------------
1 | import 'bootstrap/dist/css/bootstrap.min.css';
2 | import 'angular-super-gallery/dist/angular-super-gallery.css';
3 | import './index.css';
4 | import 'jquery';
5 | import 'angular';
6 | import 'bootstrap';
7 | import 'angular-animate';
8 | import 'angular-touch';
9 | import 'screenfull';
10 | import angularSuperGallery from 'angular-super-gallery';
11 |
12 | angular.module("app", [angularSuperGallery]);
--------------------------------------------------------------------------------
/test/webpack.config.js:
--------------------------------------------------------------------------------
1 | // This library allows us to combine paths easily
2 |
3 | const path = require('path');
4 | const webpack = require('webpack');
5 |
6 | module.exports = {
7 | entry: path.resolve(__dirname, 'src', 'index.js'),
8 | output: {
9 | path: path.resolve(__dirname, ''),
10 | filename: 'bundle.js'
11 | },
12 | resolve: {
13 | extensions: ['.js']
14 | },
15 | plugins: [
16 | new webpack.ProvidePlugin({
17 | jQuery: "jquery",
18 | $: "jquery",
19 | jquery: "jquery"
20 | })
21 | ],
22 | module: {
23 | rules: [
24 | {
25 | test: /\.(jpe?g|png|gif)$/i,
26 | loader: "file-loader",
27 | query: {
28 | name: '[name].[ext]',
29 | outputPath: 'images/'
30 | }
31 | },
32 | {
33 | test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
34 | loader: "url-loader",
35 | query: {
36 | limit: '10000',
37 | name: '[name].[ext]',
38 | outputPath: './fonts/'
39 | }
40 | },
41 | {
42 | test: /\.css$/,
43 | loaders: ["style-loader", "css-loader"]
44 | }
45 | ]
46 | }
47 | };
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES5",
4 | "module": "commonjs",
5 | "skipLibCheck": false,
6 | "noImplicitAny": false,
7 | "removeComments": true,
8 | "preserveConstEnums": true,
9 | "moduleResolution": "node",
10 | "sourceMap": true,
11 | "typeRoots": [
12 | "node_modules/@types"
13 | ],
14 | "lib": [
15 | "es6",
16 | "dom"
17 | ]
18 | },
19 | "include": [
20 | "src/*.ts"
21 | ],
22 | "compileOnSave": false,
23 | "buildOnSave": false
24 | }
25 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "import-no-alias": true,
4 | "naming-scheme": true,
5 | "align": [
6 | false,
7 | "parameters",
8 | "arguments",
9 | "statements"
10 | ],
11 | "ban": true,
12 | "class-name": true,
13 | "comment-format": [
14 | true,
15 | "check-space",
16 | "check-lowercase"
17 | ],
18 | "curly": true,
19 | "eofline": true,
20 | "indent": [
21 | true,
22 | "tabs"
23 | ],
24 | "interface-name": true,
25 | "jsdoc-format": true,
26 | "label-position": true,
27 | "label-undefined": true,
28 | "member-access": true,
29 | "member-ordering": [
30 | true,
31 | "variables-before-functions"
32 | ],
33 | "no-any": false,
34 | "no-arg": true,
35 | "no-conditional-assignment": true,
36 | "no-console": [
37 | true,
38 | "debug",
39 | "info",
40 | "time",
41 | "timeEnd",
42 | "trace"
43 | ],
44 | "no-construct": true,
45 | "no-constructor-vars": true,
46 | "no-debugger": true,
47 | "no-duplicate-key": true,
48 | "no-shadowed-variable": true,
49 | "no-duplicate-variable": true,
50 | "no-empty": true,
51 | "no-eval": true,
52 | "no-inferrable-types": true,
53 | "no-internal-module": true,
54 | "no-string-literal": true,
55 | "no-switch-case-fall-through": true,
56 | "no-trailing-comma": true,
57 | "no-unreachable": true,
58 | "no-unused-expression": true,
59 | "no-unused-variable": true,
60 | "no-use-before-declare": true,
61 | "no-var-keyword": true,
62 | "no-var-requires": true,
63 | "quotemark": [
64 | true,
65 | "single",
66 | "avoid-escape"
67 | ],
68 | "radix": true,
69 | "semicolon": true,
70 | "sort-object-literal-keys": true,
71 | "switch-default": true,
72 | "triple-equals": [
73 | true,
74 | "allow-null-check"
75 | ]
76 | }
77 | }
--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
1 | const mix = require('laravel-mix');
2 | const CompressionPlugin = require('compression-webpack-plugin');
3 | const PROD = (process.env.NODE_ENV && process.env.NODE_ENV === 'production');
4 | const fs = require('fs');
5 | const packagejson = JSON.parse(fs.readFileSync('./package.json'));
6 |
7 | require('laravel-mix-angular-templatecache');
8 |
9 | mix.disableNotifications();
10 |
11 | mix.extend('replace', function (webpackConfig, ...args) {
12 |
13 | let content = fs.readFileSync(args[0]).toString();
14 |
15 | args[1].forEach(function (item) {
16 | content = content.replace(item[0], item[1]);
17 | });
18 |
19 | fs.writeFileSync(args[0], content);
20 |
21 | return webpackConfig;
22 |
23 | });
24 |
25 | mix.webpackConfig({
26 | plugins: [
27 | PROD ? new CompressionPlugin({
28 | //asset: "[path].gz[query]",
29 | algorithm: "gzip",
30 | test: /\.js$|\.ts$|\.css$|\.html$|\.svg$/,
31 | threshold: 10240,
32 | minRatio: 0.8
33 |
34 | }) : () => { }
35 | ],
36 | });
37 |
38 |
39 | mix.before(() => {
40 |
41 | // angular template cache
42 | mix.cacheTemplates('./src/views/**/*.html', {
43 | root: '/views',
44 | module: 'angularSuperGallery',
45 | outputFilename: './src/asg-templates.js',
46 | }).replace('./src/asg-templates.js', [
47 | [/button\\/g, 'button/'],
48 | [/\\views\\/g, '/views/'],
49 | ]);
50 |
51 | });
52 |
53 |
54 | // compile typesript and scss
55 | mix.ts('./src/asg.ts', './dist/angular-super-gallery.min.js')
56 | .sass('./src/asg.scss', './dist/angular-super-gallery.min.css');
57 |
58 |
59 | // update version
60 | mix.replace('./src/asg-service.ts', [
61 | [/version.*"\d+\.\d+\.\d+"/, 'version = "' + packagejson.version + '"']
62 | ]);
63 |
64 |
--------------------------------------------------------------------------------
12 |
43 |
13 |
14 |
15 |
34 |
35 |
37 |
39 |
40 |
41 |
42 |