Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented a delete action as per #41 #43

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Implemented a delete action as per #41 #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
456bb21
Add delete icons for #41
tomchinery May 9, 2016
fb98710
Add deleteImage functionality for #41
tomchinery May 9, 2016
dc425a9
Add delete confirmation and thumbnail icons for #41
tomchinery May 9, 2016
cb66638
Add hover over a thumb to delete an image #41
tomchinery May 10, 2016
582c693
Fix bug where wrong image was being deleted #41
tomchinery May 10, 2016
2683cfb
Fix bugged deletion in the Gallery #41
tomchinery May 10, 2016
dff1971
Should return deleted image in on-delete callback #41
tomchinery May 10, 2016
a458ac9
Fix on-delete callback not being called with a array length of 1
tomchinery May 10, 2016
7432ab4
Renamed action deleteImage to deleteNgGalleryImage
May 26, 2016
368f3fb
Fixed delete icon position
May 26, 2016
1a27107
Allow user to use custom confirm modals
May 26, 2016
371365d
Unbind previous scope watch
May 27, 2016
b3a28c3
Added text shadow to delete icon to be wisible in all images
May 27, 2016
aa6b015
Allow usert enter delete icon tooltip text
May 27, 2016
b6a15e1
Fixed paging when clicking on thumbnails
Jul 4, 2016
09ae497
Expanded Prev and Next buttons clicking area
Jul 4, 2016
6e3540c
Bump version
Jul 4, 2016
adc7463
Changed version back
Jul 4, 2016
f9b77f9
Fixed when clicked on last photo
Jul 5, 2016
c682ae8
Refactored some code
Jul 5, 2016
6f7575c
Merge pull request #1 from Mioleris/master
tomchinery Jul 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 77 additions & 38 deletions src/css/ngGallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@

img.ng-thumb {
height: 50px;
float: left;
display: block;
cursor: pointer;
margin: 2px 2px 0 0;
margin: 2px 2px 0 0;
}

.ng-overlay {
.ng-overlay {
position: fixed;
top: 0;
left: 0;
Expand All @@ -28,8 +27,32 @@ img.ng-thumb {
user-select: none;
-webkit-user-drag: none;
}
.ng-gallery {
clear: both;
}
.ng-gallery > .ng-gallery-thumbs {
float: left;
position: relative;
}
.ng-gallery > .ng-gallery-thumbs:hover .delete-icon {
visibility: visible;
opacity: 1;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}

.ng-gallery > .ng-gallery-thumbs .delete-icon {
cursor: pointer;
color: white;
position: absolute;
padding: 2px 6px;
right: 0;
top: 0;
visibility: hidden;
opacity: 0;
transition: opacity 0.1s;
}

.ng-gallery-content {
.ng-gallery-content {
position: fixed;
top: 0;
left: 0;
Expand All @@ -39,28 +62,23 @@ img.ng-thumb {
text-align: center;
}

.ng-gallery-content > a.close-popup {
font-size: 42px;
float: right;
color: #fff;
text-decoration: none;
margin: 0 30px 0 0;
cursor: pointer;
.ng-gallery-content > .image-controls {
position: absolute;
top: 20px;
right: 0;
z-index: 2;
}

.ng-gallery-content > a.download-image {
.ng-gallery-content > .image-controls > a.download-image,
.ng-gallery-content > .image-controls > a.delete-image,
.ng-gallery-content > .image-controls > a.close-popup {
font-size: 42px;
float: right;
color: #fff;
text-decoration: none;
margin: 0 30px 0 0;
cursor: pointer;
position: absolute;
top: 20px;
right: 63px;
position: relative;
}

.ng-gallery-content > a.nav-left, .ng-gallery-content > a.nav-right {
Expand All @@ -72,17 +90,37 @@ img.ng-thumb {
}

.ng-gallery-content > a.nav-left {
position: fixed;
left: 30px;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
text-align: left;
}

.ng-gallery-content > a.nav-right {
width: 50%;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
text-align: right;
}

.ng-gallery-content > a.nav-left > i {
top: 50%;
left: 30px;
transform: translateY(-50%);
position: relative;
}

.ng-gallery-content > a.nav-right {
position: fixed;
right: 30px;
.ng-gallery-content > a.nav-right > i {
top: 50%;
right: 30px;
transform: translateY(-50%);
position: relative;
}

.ng-gallery-content > img {
Expand Down Expand Up @@ -130,13 +168,14 @@ img.ng-thumb {
width: 400px;
height: 70px;
text-align: center;
position: fixed;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
z-index: 2;
}

.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails {
Expand All @@ -153,7 +192,7 @@ img.ng-thumb {
opacity: 0.6;
}

.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img:hover,
.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img:hover,
.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img.active {
transition: opacity 0.25s ease;
opacity: 1;
Expand All @@ -162,11 +201,11 @@ img.ng-thumb {
/* Loading - from http://loading.io */
uiload {
display: inline-block;
position: relative;
position: relative;
}

uiload > div {
position: relative;
position: relative;
}

@-webkit-keyframes uil-ring-anim {
Expand All @@ -175,16 +214,16 @@ uiload > div {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
transform: rotate(360deg);
}
}

@-moz-keyframes uil-ring-anim {
Expand All @@ -193,16 +232,16 @@ uiload > div {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
transform: rotate(360deg);
}
}

@-ms-keyframes uil-ring-anim {
Expand All @@ -211,16 +250,16 @@ uiload > div {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
transform: rotate(360deg);
}
}

@keyframes uil-ring-anim {
Expand All @@ -229,16 +268,16 @@ uiload > div {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
transform: rotate(360deg);
}
}

.uil-ring-css {
Expand All @@ -247,7 +286,7 @@ uiload > div {
top: 0;
margin: 180px auto 0 auto;
width: 100px;
height: 100px;
height: 100px;
}

.uil-ring-css > div {
Expand All @@ -263,5 +302,5 @@ uiload > div {
-moz-animation: uil-ring-anim 1s linear infinite;
-webkit-animation: uil-ring-anim 1s linear infinite;
-o-animation: uil-ring-anim 1s linear infinite;
animation: uil-ring-anim 1s linear infinite;
animation: uil-ring-anim 1s linear infinite;
}
68 changes: 59 additions & 9 deletions src/js/ngGallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,20 @@
// Set the default template
$templateCache.put(template_url,
'<div class="{{ baseClass }}">' +
' <div ng-repeat="i in images">' +
' <div ng-repeat="i in images" class="ng-gallery-thumbs">' +
' <a class="delete-icon" uib-tooltip="{{ deleteTooltipText }}" ng-click="deleteNgGalleryImage($index)" ng-show="showDeleteIcons()"><i class="fa fa-times"></i></a>' +
' <img ng-src="{{ i.thumb }}" class="{{ thumbClass }}" ng-click="openGallery($index)" alt="Image {{ $index + 1 }}" />' +
' </div>' +
'</div>' +
'<div class="ng-overlay" ng-show="opened">' +
'</div>' +
'<div class="ng-gallery-content" unselectable="on" ng-show="opened" ng-swipe-left="nextImage()" ng-swipe-right="prevImage()">' +
' <div class="uil-ring-css" ng-show="loading"><div></div></div>' +
'<a href="{{getImageDownloadSrc()}}" target="_blank" ng-show="showImageDownloadButton()" class="download-image"><i class="fa fa-download"></i></a>' +
' <a class="close-popup" ng-click="closeGallery()"><i class="fa fa-close"></i></a>' +
' <div class="image-controls">' +
' <a class="close-popup" ng-click="closeGallery()"><i class="fa fa-close"></i></a>' +
' <a href="{{getImageDownloadSrc()}}" target="_blank" ng-show="showImageDownloadButton()" class="download-image"><i class="fa fa-download"></i></a>' +
' <a ng-click="deleteNgGalleryImage(index)" ng-show="showDeleteIcons()" class="delete-image"><i class="fa fa-trash"></i></a>' +
' </div>' +
' <a class="nav-left" ng-click="prevImage()"><i class="fa fa-angle-left"></i></a>' +
' <img ondragstart="return false;" draggable="false" ng-src="{{ img }}" ng-click="nextImage()" ng-show="!loading" class="effect" />' +
' <a class="nav-right" ng-click="nextImage()"><i class="fa fa-angle-right"></i></a>' +
Expand All @@ -59,7 +63,12 @@
scope: {
images: '=',
thumbsNum: '@',
hideOverflow: '='
hideOverflow: '=',
deleteIcons: '@',
onDelete: '&', // on delete callback
customConfirm: '=', // Allows to use custom confirm
confirmDelete: '=', // User must return true or false to remove image from object
deleteTooltipText: '=', // Show hide delete tooltip
},
controller: [
'$scope',
Expand All @@ -82,6 +91,7 @@
var $body = $document.find('body');
var $thumbwrapper = angular.element(element[0].querySelectorAll('.ng-thumbnails-wrapper'));
var $thumbnails = angular.element(element[0].querySelectorAll('.ng-thumbnails'));
var confirmDeleteWatch;

scope.index = 0;
scope.opened = false;
Expand Down Expand Up @@ -130,6 +140,49 @@
return scope.images[scope.index].downloadSrc;
};

scope.showDeleteIcons = function () {
if (scope.deleteIcons == 'false') return
return scope.deleteIcons
}

scope.deleteNgGalleryImage = function (i) {
if (scope.images[i] == null) return
var image = scope.images[i];

if (scope.customConfirm) {
scope.onDelete({ image: image });

if (confirmDeleteWatch){
confirmDeleteWatch();
}

confirmDeleteWatch = scope.$watch('confirmDelete', function (newValue, oldValue) {
if (angular.isDefined(newValue) && newValue === true) {
if (scope.images.splice(i, 1)) {
if (scope.images.length == 0) {
return scope.closeGallery();
}
scope.confirmDelete = false;
scope.changeImage((scope.images.length - 1));
}
}
});

} else {
if (confirm('Are you sure you want to delete ' + (image.name || 'this image') + '?')) {
scope.onDelete({ image: image }); // onDelete callback
if (scope.images.splice(i, 1)) {
if (scope.images.length == 0) {
return scope.closeGallery();
}
scope.changeImage((scope.images.length - 1));
}
}
}


}

scope.changeImage = function (i) {
scope.index = i;
showImage(i);
Expand Down Expand Up @@ -214,11 +267,8 @@
var len = scope.images.length,
width = scope.thumbs_width,
item_scroll = parseInt(width / len, 10),
i = index + 1,
s = Math.ceil(len / i);

$thumbwrapper[0].scrollLeft = 0;
$thumbwrapper[0].scrollLeft = i * item_scroll - (s * item_scroll);
i = index + 1;
$thumbwrapper[0].scrollLeft = (i * item_scroll) - (scope.thumbsNum * item_scroll) + item_scroll;
}, 100);
};

Expand Down