From fafaaec25b47ca27d45ae53d281bf3fce2eaf5bf Mon Sep 17 00:00:00 2001 From: Lucas Marchesoti Franco Date: Thu, 3 Oct 2019 17:52:59 -0300 Subject: [PATCH 1/5] Add IDE files to .gitignore --- .gitignore | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 861bedf..8a502e5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ node_modules app .sass-cache npm-debug.log +package-lock.json # OS generated files # .DS_Store @@ -10,4 +11,7 @@ npm-debug.log .Spotlight-V100 .Trashes ehthumbs.db -Thumbs.db \ No newline at end of file +Thumbs.db + +# IDE files +.idea/* From f68b5ddb8026a6408088cc18e303f14d9f15b685 Mon Sep 17 00:00:00 2001 From: Lucas Marchesoti Franco Date: Thu, 3 Oct 2019 17:58:44 -0300 Subject: [PATCH 2/5] Add gulp-uglify to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 132fd01..96cd5dc 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "gulp-compass": "~2.0.3 ", "gulp-concat": "~2.4.3 ", "gulp-sourcemaps": "~1.3.0", + "gulp-uglify": "~3.0.2", "jasmine-core": "~2.1.3", "karma-jasmine": "~0.3.4", "karma-chrome-launcher": "~0.1.7" From a13cca8a3ba0ab0aa0193d2389ead7ec735cbade Mon Sep 17 00:00:00 2001 From: Lucas Marchesoti Franco Date: Thu, 3 Oct 2019 17:59:53 -0300 Subject: [PATCH 3/5] Remove dist folder --- .gitignore | 2 + dist/js/DmCarrousel.js | 176 --------------------------------- dist/sass/style.scss | 75 -------------- dist/stylesheets/style.css | 76 -------------- dist/stylesheets/style.css.map | 7 -- 5 files changed, 2 insertions(+), 334 deletions(-) delete mode 100644 dist/js/DmCarrousel.js delete mode 100644 dist/sass/style.scss delete mode 100644 dist/stylesheets/style.css delete mode 100644 dist/stylesheets/style.css.map diff --git a/.gitignore b/.gitignore index 8a502e5..e1ae86e 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ app npm-debug.log package-lock.json +dist/ + # OS generated files # .DS_Store .DS_Store? diff --git a/dist/js/DmCarrousel.js b/dist/js/DmCarrousel.js deleted file mode 100644 index 07c6608..0000000 --- a/dist/js/DmCarrousel.js +++ /dev/null @@ -1,176 +0,0 @@ -angular.module('dmCarrousel', []) -.directive('dmCarrousel', ['$compile', function($compile) { - - return { - restrict: 'E', - scope: { - data: '=imageData' - }, - compile: function(tElement, tAttributes) { - - return function(scope, iElement, iAttributes, containerCtrl) { - - var currentIndex = 0; - var totalSlides = scope.data.length; - var animating = false; - var tpl = '
'; - tpl += '
    '; - - angular.forEach(scope.data,function(image,index) { - tpl += '
  • '+image.name+'
    • '; - - }) - - tpl += "
"; - - tpl += '
' + - ' ‹' + - ' ›' + - '
'; - - tpl += '
' - - iElement.append($compile(angular.element(tpl))(scope)); - - var slides = iElement[0].querySelectorAll("li"); - var slides2 = angular.element(iElement[0].querySelectorAll("li")); - angular.element(iElement[0].querySelector('.current')) - - if (slides.length > 0) { - - angular.element(slides[slides.length-1]).addClass("prev"); - - var prevImage = angular.element(slides[slides.length-1]).find("img"); - loadImage(prevImage); - - angular.element(slides[0]).addClass("current"); - - var currentImage = angular.element(slides[0]).find("img"); - loadImage(currentImage); - - angular.element(slides[1]).addClass("next"); - - var nextImage = angular.element(slides[1]).find("img"); - loadImage(nextImage); - - } - - scope.goToNext = function() { - - var index = currentIndex; - - //console.log("Go to next slide"); - if(currentIndex < totalSlides-1) { - index ++; - - } - else { - index = 0; - } - - goToSlide(index); - - } - - scope.goToPrev = function() { - - var index = currentIndex; - - //console.log("Go to previous slide"); - if(currentIndex > 0) { - index --; - } - else { - index = slides.length - 1; - //console.log(currentIndex) - } - - goToSlide(index); - } - - function goToSlide(index) { - - //console.log("Go to slide " + index); - - //check if the carrousel already is animating - if(animating) { - //console.error("already animating"); - return; - } - else { - animating = true; - currentIndex = index; - } - - - //TODO - find a better way to remove class names - angular.forEach(slides,function(slide,index){ - angular.element(slide).removeClass("current prev next"); - }) - - if(index < totalSlides && index >= 0) { - - angular.element(slides[index]).addClass("current"); - - var current = slides[index]; - - current.addEventListener('webkitTransitionEnd', function(){transitionDone()}); - current.addEventListener('oTransitionEnd', function(){transitionDone()},false); - current.addEventListener('webkitTransitionEnd', function(){transitionDone()},false); - - } - else { - //console.error("Image index out of range"); - } - - if(index < totalSlides-1) { - angular.element(slides[index+1]).addClass("next"); - var image = angular.element(slides[index+1]).find("img"); - loadImage(image); - } - else { - angular.element(slides[0]).addClass("next"); - var image = angular.element(slides[index+1]).find("img"); - loadImage(image); - } - - if(index > 0) { - angular.element(slides[index-1]).addClass("prev"); - var image = angular.element(slides[index-1]).find("img"); - loadImage(image); - } - else { - angular.element(slides[slides.length-1]).addClass("prev"); - var image = angular.element(slides[index-1]).find("img"); - loadImage(image); - } - - } - - function loadImage(element) { - - if(element.attr('src') === undefined && element.attr("dm-src") != undefined) { - - element.attr('src',element.attr("dm-src")); - - } - - } - - function transitionDone() { - - animating = false; - - var current = slides[currentIndex]; - - current.removeEventListener('webkitTransitionEnd', function(){transitionDone()}); - current.removeEventListener('oTransitionEnd', function(){transitionDone()}); - current.removeEventListener('transitionEnd', function(){transitionDone()}); - - } - - } - - } - }; -}]); \ No newline at end of file diff --git a/dist/sass/style.scss b/dist/sass/style.scss deleted file mode 100644 index 9d80fc1..0000000 --- a/dist/sass/style.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "compass/css3/transition"; - -ul.dm-car { - display: block; - width: 600px; - height: 300px; - margin: 0; - padding: 0; - position: relative; - overflow: hidden; - - li { - display: block; - position: absolute; - top:0; - @include transition(left 500ms ease-out); - left: 600px; - width: 600px; - height: 300px; - img { - width: 100% - } - &.current { - left: 0; - @include transition(left 500ms ease-out); - z-index: 100; - - } - &.next { - left: 600px; - z-index: 10; - } - - &.prev { - left: -600px; - @include transition(left 500ms ease-out); - z-index: 2; - } - } -} - -.dm-car-controls { - - position: absolute; - top: 0; - left: 0; - width: 600px; - height: 300px; - - .dm-car-control { - display: inline-block; - width: 50px; - height: 300px; - line-height: 300px; - text-align: center; - background-color: #ccc; - background-color: rgba(30,30,30,.37); - position: absolute; - color: white; - font-size: 24px; - font-weight: bold; - cursor: pointer; - z-index: 200; - - &.dm-car-control-next { - right: 0px; - } - } - -} - -.dm-car-container { - position: relative; -} - diff --git a/dist/stylesheets/style.css b/dist/stylesheets/style.css deleted file mode 100644 index 4b83045..0000000 --- a/dist/stylesheets/style.css +++ /dev/null @@ -1,76 +0,0 @@ -ul.dm-car { - display: block; - width: 600px; - height: 300px; - margin: 0; - padding: 0; - position: relative; - overflow: hidden; -} -ul.dm-car li { - display: block; - position: absolute; - top: 0; - -moz-transition: left 500ms ease-out; - -o-transition: left 500ms ease-out; - -webkit-transition: left 500ms ease-out; - transition: left 500ms ease-out; - left: 600px; - width: 600px; - height: 300px; -} -ul.dm-car li img { - width: 100%; -} -ul.dm-car li.current { - left: 0; - -moz-transition: left 500ms ease-out; - -o-transition: left 500ms ease-out; - -webkit-transition: left 500ms ease-out; - transition: left 500ms ease-out; - z-index: 100; -} -ul.dm-car li.next { - left: 600px; - z-index: 10; -} -ul.dm-car li.prev { - left: -600px; - -moz-transition: left 500ms ease-out; - -o-transition: left 500ms ease-out; - -webkit-transition: left 500ms ease-out; - transition: left 500ms ease-out; - z-index: 2; -} - -.dm-car-controls { - position: absolute; - top: 0; - left: 0; - width: 600px; - height: 300px; -} -.dm-car-controls .dm-car-control { - display: inline-block; - width: 50px; - height: 300px; - line-height: 300px; - text-align: center; - background-color: #ccc; - background-color: rgba(30, 30, 30, 0.37); - position: absolute; - color: white; - font-size: 24px; - font-weight: bold; - cursor: pointer; - z-index: 200; -} -.dm-car-controls .dm-car-control.dm-car-control-next { - right: 0px; -} - -.dm-car-container { - position: relative; -} - -/*# sourceMappingURL=style.css.map */ diff --git a/dist/stylesheets/style.css.map b/dist/stylesheets/style.css.map deleted file mode 100644 index 59f3611..0000000 --- a/dist/stylesheets/style.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "AAEA,SAAU;EACT,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;;AAEhB,YAAG;EACF,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,CAAC;EC8UL,eAAwC,EC/KR,mBAC8D;ED8K9F,aAAwC,EC/KR,mBAC8D;ED8K9F,kBAAwC,EClLL,mBACoD;EAenF,UAAU,EAbkB,mBAC8D;EF9J9F,IAAI,EAAE,KAAK;EACX,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;;AACb,gBAAI;EACH,KAAK,EAAE,IAAI;;AAEZ,oBAAU;EACT,IAAI,EAAE,CAAC;ECqUR,eAAwC,EC/KR,mBAC8D;ED8K9F,aAAwC,EC/KR,mBAC8D;ED8K9F,kBAAwC,EClLL,mBACoD;EAenF,UAAU,EAbkB,mBAC8D;EFrJ7F,OAAO,EAAE,GAAG;;AAGb,iBAAO;EACN,IAAI,EAAE,KAAK;EACX,OAAO,EAAE,EAAE;;AAGZ,iBAAO;EACN,IAAI,EAAE,MAAM;EC0Tb,eAAwC,EC/KR,mBAC8D;ED8K9F,aAAwC,EC/KR,mBAC8D;ED8K9F,kBAAwC,EClLL,mBACoD;EAenF,UAAU,EAbkB,mBAC8D;EF1I7F,OAAO,EAAE,CAAC;;;AAKb,gBAAiB;EAEhB,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;;AAEb,gCAAgB;EACf,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,WAAW,EAAE,KAAK;EAClB,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,gBAAgB,EAAE,sBAAkB;EACpC,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,GAAG;;AAEZ,oDAAsB;EACrB,KAAK,EAAE,GAAG;;;AAMb,iBAAkB;EACjB,QAAQ,EAAE,QAAQ", -"sources": ["../../dev/sass/style.scss","../../../../.rvm/gems/ruby-2.1.0-preview1/gems/compass-core-1.0.1/stylesheets/compass/_support.scss","../../../../.rvm/gems/ruby-2.1.0-preview1/gems/compass-core-1.0.1/stylesheets/compass/css3/_transition.scss"], -"names": [], -"file": "style.css" -} \ No newline at end of file From 9e06435c584e3300f264f73eeb22557d13a9afa2 Mon Sep 17 00:00:00 2001 From: Lucas Marchesoti Franco Date: Thu, 3 Oct 2019 17:55:34 -0300 Subject: [PATCH 4/5] Conform to container size Use 100% width and height --- dev/js/DmCarrousel.js | 4 ++-- dev/sass/style.scss | 32 +++++++++++++++++++++----------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/dev/js/DmCarrousel.js b/dev/js/DmCarrousel.js index 721585f..996f8e9 100644 --- a/dev/js/DmCarrousel.js +++ b/dev/js/DmCarrousel.js @@ -24,8 +24,8 @@ angular.module('dmCarrousel', []) tpl += ""; tpl += '
' + - ' ‹' + - ' ›' + + '
‹
' + + '
›
' + '
'; tpl += '' diff --git a/dev/sass/style.scss b/dev/sass/style.scss index 9d80fc1..5299418 100644 --- a/dev/sass/style.scss +++ b/dev/sass/style.scss @@ -2,8 +2,8 @@ ul.dm-car { display: block; - width: 600px; - height: 300px; + width: 100%; + height: 100%; margin: 0; padding: 0; position: relative; @@ -15,10 +15,14 @@ ul.dm-car { top:0; @include transition(left 500ms ease-out); left: 600px; - width: 600px; - height: 300px; + width: 100%; + height: 100%; img { - width: 100% + position: absolute; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; } &.current { left: 0; @@ -44,14 +48,12 @@ ul.dm-car { position: absolute; top: 0; left: 0; - width: 600px; - height: 300px; + width: 100%; + height: 100%; .dm-car-control { - display: inline-block; width: 50px; - height: 300px; - line-height: 300px; + height: 100%; text-align: center; background-color: #ccc; background-color: rgba(30,30,30,.37); @@ -61,15 +63,23 @@ ul.dm-car { font-weight: bold; cursor: pointer; z-index: 200; + display: table; + vertical-align: middle; &.dm-car-control-next { right: 0px; } - } + } } .dm-car-container { position: relative; + width: 100%; + height: 100%; } +.dm-car-control span { + display: table-cell; + vertical-align: middle; +} From 5eceb4c688965b90ba55696f67af06f2e7758e85 Mon Sep 17 00:00:00 2001 From: Lucas Marchesoti Franco Date: Tue, 31 Dec 2019 09:45:14 -0300 Subject: [PATCH 5/5] Fix ignoring bottom limit Use position: absolute and left:0 right: 0 on image --- dev/js/DmCarrousel.js | 4 ++-- dev/sass/style.scss | 32 +++++++++++--------------------- 2 files changed, 13 insertions(+), 23 deletions(-) diff --git a/dev/js/DmCarrousel.js b/dev/js/DmCarrousel.js index 996f8e9..721585f 100644 --- a/dev/js/DmCarrousel.js +++ b/dev/js/DmCarrousel.js @@ -24,8 +24,8 @@ angular.module('dmCarrousel', []) tpl += ""; tpl += '
' + - '
‹
' + - '
›
' + + ' ‹' + + ' ›' + '
'; tpl += '' diff --git a/dev/sass/style.scss b/dev/sass/style.scss index 5299418..9d80fc1 100644 --- a/dev/sass/style.scss +++ b/dev/sass/style.scss @@ -2,8 +2,8 @@ ul.dm-car { display: block; - width: 100%; - height: 100%; + width: 600px; + height: 300px; margin: 0; padding: 0; position: relative; @@ -15,14 +15,10 @@ ul.dm-car { top:0; @include transition(left 500ms ease-out); left: 600px; - width: 100%; - height: 100%; + width: 600px; + height: 300px; img { - position: absolute; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; + width: 100% } &.current { left: 0; @@ -48,12 +44,14 @@ ul.dm-car { position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; + width: 600px; + height: 300px; .dm-car-control { + display: inline-block; width: 50px; - height: 100%; + height: 300px; + line-height: 300px; text-align: center; background-color: #ccc; background-color: rgba(30,30,30,.37); @@ -63,23 +61,15 @@ ul.dm-car { font-weight: bold; cursor: pointer; z-index: 200; - display: table; - vertical-align: middle; &.dm-car-control-next { right: 0px; } - } + } } .dm-car-container { position: relative; - width: 100%; - height: 100%; } -.dm-car-control span { - display: table-cell; - vertical-align: middle; -}