Fixed carousel

Author: delucas

Dockerfile

@@ -13,5 +13,6 @@ RUN mkdir /confy
 WORKDIR /confy
 COPY Gemfile /confy/Gemfile
 COPY Gemfile.lock /confy/Gemfile.lock
+
 RUN bundle install
 COPY . /confy

Gemfile

@@ -24,25 +24,39 @@ group :development, :test do
 end
 
 group :development do
-  gem "bullet"
-  gem "rack-mini-profiler"
-  gem "web-console", ">= 3.3.0"
-
-  gem "listen", "~> 3.1.5"
-  gem "better_errors"
-  gem "binding_of_caller"
-  gem "spring"
-  gem "spring-watcher-listen", "~> 2.0.0"
-
-  gem "rubocop-rails_config"
+  # Performance
+  gem 'bullet', '~> 5.9'
+  gem 'rack-mini-profiler', '~> 1.0'
+
+  # Errors
+  gem 'better_errors', '~> 2.5'
+  gem 'web-console', '~> 3.7'
+
+  gem 'binding_of_caller', '~> 0.8'
+  gem 'listen', '~> 3.1'
+  gem 'spring', '~> 2.0'
+  gem 'spring-watcher-listen', '~> 2.0'
+
+  # Linters
+  gem 'annotate', '~> 2.7'
+  gem 'ordinare', '~> 0.4'
+  gem 'rubocop-rails_config', '~> 0.5'
+
+  # Gemfile health
+  gem 'pessimize', '~> 0.4'
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem "responders"
 gem "activestorage-validator"
+
+# Utils
+gem 'discard', '~> 1.1'
+gem 'pagy', '~> 3.3'
 gem "simple_form"
 gem "aws-sdk"
 gem "bcrypt"
+
 # Levenshtein Distance Analyzer
 gem 'edits'

Gemfile.lock

@@ -44,6 +44,9 @@ GEM
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
+    annotate (2.7.5)
+      activerecord (>= 3.2, < 7.0)
+      rake (>= 10.4, < 13.0)
     arel (9.0.0)
     ast (2.4.0)
     aws-eventstream (1.0.1)
@@ -750,6 +753,8 @@ GEM
     concurrent-ruby (1.1.5)
     crass (1.0.4)
     debug_inspector (0.0.3)
+    discard (1.1.0)
+      activerecord (>= 4.2, < 7)
     edits (0.2.1)
     erubi (1.8.0)
     execjs (2.7.0)
@@ -758,7 +763,7 @@ GEM
       activesupport (>= 4.2.0)
     i18n (1.6.0)
       concurrent-ruby (~> 1.0)
-    jaro_winkler (1.5.2)
+    jaro_winkler (1.5.3)
     jbuilder (2.8.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
@@ -784,11 +789,15 @@ GEM
     nio4r (2.3.1)
     nokogiri (1.10.1)
       mini_portile2 (~> 2.4.0)
-    parallel (1.14.0)
-    parser (2.6.0.0)
+    ordinare (0.4.0)
+    pagy (3.4.1)
+    parallel (1.17.0)
+    parser (2.6.3.0)
       ast (~> 2.4.0)
+    pessimize (0.4.0)
+      bundler
+      trollop
     pg (1.1.4)
-    psych (3.1.0)
     puma (3.12.0)
     rack (2.0.6)
     rack-mini-profiler (1.0.2)
@@ -831,18 +840,24 @@ GEM
       railties (>= 4.2.0, < 6.0)
     rollbar (2.18.2)
       multi_json
-    rubocop (0.66.0)
+    rubocop (0.73.0)
       jaro_winkler (~> 1.5.1)
       parallel (~> 1.10)
-      parser (>= 2.5, != 2.5.1.1)
-      psych (>= 3.1.0)
+      parser (>= 2.6)
       rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 1.6)
-    rubocop-rails_config (0.4.4)
+      unicode-display_width (>= 1.4.0, < 1.7)
+    rubocop-performance (1.4.0)
+      rubocop (>= 0.71.0)
+    rubocop-rails (2.2.1)
+      rack (>= 1.1)
+      rubocop (>= 0.72.0)
+    rubocop-rails_config (0.6.2)
       railties (>= 3.0)
-      rubocop (~> 0.58)
-    ruby-progressbar (1.10.0)
+      rubocop (~> 0.70)
+      rubocop-performance (~> 1.3)
+      rubocop-rails (~> 2.0)
+    ruby-progressbar (1.10.1)
     ruby_dep (1.5.0)
     sass (3.7.2)
       sass-listen (~> 4.0.0)
@@ -874,14 +889,15 @@ GEM
     thor (0.20.3)
     thread_safe (0.3.6)
     tilt (2.0.9)
+    trollop (2.9.9)
     turbolinks (5.2.0)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     uglifier (4.1.20)
       execjs (>= 0.3.0, < 3)
-    unicode-display_width (1.5.0)
+    unicode-display_width (1.6.0)
     uniform_notifier (1.12.1)
     web-console (3.7.0)
       actionview (>= 5.0)
@@ -901,32 +917,37 @@ PLATFORMS
 
 DEPENDENCIES
   activestorage-validator
+  annotate (~> 2.7)
   aws-sdk
   bcrypt
-  better_errors
-  binding_of_caller
+  better_errors (~> 2.5)
+  binding_of_caller (~> 0.8)
   bootsnap (>= 1.1.0)
-  bullet
+  bullet (~> 5.9)
   byebug
+  discard (~> 1.1)
   edits
   jbuilder (~> 2.5)
-  listen (~> 3.1.5)
+  listen (~> 3.1)
+  ordinare (~> 0.4)
+  pagy (~> 3.3)
+  pessimize (~> 0.4)
   pg (>= 0.18, < 2.0)
   puma (~> 3.11)
-  rack-mini-profiler
+  rack-mini-profiler (~> 1.0)
   rails (~> 5.2.2)
   responders
   rollbar
-  rubocop-rails_config
+  rubocop-rails_config (~> 0.5)
   sass-rails (~> 5.0)
   simple_form
-  spring
-  spring-watcher-listen (~> 2.0.0)
+  spring (~> 2.0)
+  spring-watcher-listen (~> 2.0)
   sqlite3 (~> 1.3.6)
   turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)
-  web-console (>= 3.3.0)
+  web-console (~> 3.7)
   webpacker
 
 RUBY VERSION

Makefile

@@ -1,26 +1,27 @@
+console:
+	docker-compose run web rails console
+
+build:
+	docker-compose run web bundle
+	docker-compose build
+
+mine:
+	sudo chown -R $(USER):$(USER) .
+
 start:
 	rm -f tmp/pids/server.pid
 	docker-compose up -d
 
-from_scratch:
-	docker-compose run web rake db:setup db:seed
-
 stop:
 	docker-compose down
 	rm -f tmp/pids/server.pid
 
-rebuild:
-	docker-compose build
-
 rubocop:
-	docker-compose run web rubocop -a
+	docker-compose run web bundle exec rubocop --auto-correct
 
 routes:
 	docker-compose run web rake routes
 
-console:
-	docker-compose run web rails console
-
 logs:
 	docker-compose logs -tf
 

app/assets/javascripts/minimal-carousel.js

@@ -0,0 +1,66 @@
+function Carousel(settings){
+    'use strict';
+    settings = settings || {};
+    this.carousel = settings.element || document.querySelector(settings.carousel || '.carousel');
+
+    this.slides = this.carousel.querySelectorAll('ul li');
+    this.delay = settings.delay || 2.5;
+    this.autoplay = settings.autoplay === undefined ? true : settings.autoplay;
+  
+    this.slides_total = this.slides.length;
+    this.current_slide = -1;
+  
+    if (this.autoplay) {
+      this.play();
+    }
+  }
+  
+  Carousel.prototype.next = function (is_interval_call) {
+    'use strict';
+    for (var s = 0; s < this.slides.length; s += 1) {
+      this.slides[s].style.display = 'none';
+    }
+    this.current_slide = (this.current_slide + 1) % this.slides.length;
+    this.slides[this.current_slide].style.display = 'block';
+    if (this.autoplay && this.interval && !is_interval_call) {
+      var that = this;
+      clearInterval(this.interval);
+      this.interval = setTimeout(function () {
+        that.play();
+      }, this.delay * 1000);
+    }
+  };
+  
+  Carousel.prototype.prev = function () {
+    'use strict';
+    for (var s = 0; s < this.slides.length; s += 1) {
+      this.slides[s].style.display = 'none';
+    }
+    this.current_slide = Math.abs(this.current_slide - 1 + this.slides.length) % this.slides.length;
+    this.slides[this.current_slide].style.display = 'block';
+    if (this.autoplay && this.interval) {
+      var that = this;
+      clearInterval(this.interval);
+      this.interval = setTimeout(function () {
+        that.play();
+      }, this.delay * 1000);
+    }
+  };
+  
+  Carousel.prototype.play = function () {
+    'use strict';
+    this.next(true);
+    var that = this;
+    this.autoplay = true;
+    this.interval = setTimeout(function () {
+      that.play();
+    }, this.delay * 1000);
+  };
+  
+  Carousel.prototype.stop = function () {
+    'use strict';
+    if (this.interval) {
+      this.autoplay = false;
+      clearInterval(this.interval);
+    }
+  };

app/controllers/api/v1/talks_controller.rb

@@ -15,6 +15,7 @@ def show
             {
               slug: speaker.slug,
               name: speaker.name,
+              avatar_url: speaker.avatar.attachment ? url_for(speaker.avatar.attachment) : "http://confy-assets.wecode.io/speakers/generic-speaker.png",
             }
           end,
           conference: {

app/javascript/components/Conference.vue

@@ -56,19 +56,21 @@
           </div>
           <aside class="meta">
             <header class="speaker-mini" id="carousel-1">
-              <ul>
-                <li style="display: block;" v-for="speaker in talk.speakers" :key="speaker.slug">
-                  <div class="avathar small">
-                    <router-link :to="{ name: 'Speaker', params: { slug: speaker.slug } }">
-                      <img
-                        :alt="speaker.name"
-                        :src="speaker.avatar_url"
-                        :title="speaker.name"
-                      >
-                    </router-link>
-                  </div>
-                </li>
-              </ul>
+              <div class="carousel">
+                <ul>
+                  <li style="display: block;" v-for="speaker in talk.speakers" :key="speaker.slug">
+                    <div class="avathar small">
+                      <router-link :to="{ name: 'Speaker', params: { slug: speaker.slug } }">
+                        <img
+                          :alt="speaker.name"
+                          :src="speaker.avatar_url"
+                          :title="speaker.name"
+                        >
+                      </router-link>
+                    </div>
+                  </li>
+                </ul>
+              </div>
               <div class="info">
                 <p class="name" v-for="speaker in talk.speakers" :key="speaker.slug">
                   <router-link
@@ -101,6 +103,15 @@ export default {
     var slug = this.$route.params.slug;
     axios.get("/api/v1/conferences/" + slug).then(response => {
       this.conference = response.data;
+      setTimeout(function(){
+        document.querySelectorAll(".carousel").forEach(element => {
+          new Carousel({
+            element: element,
+            delay: 2.5,
+            autoplay: true
+          })
+        });
+      }, 500);
     });
   }
 };