Update code.org/promote carousels to use Swiper (#58508)

* set up swiper_page_promote.js * update stats_carousel.haml and stats_impact_carousel.haml to use swiper * clean up css
code-dot-org · May 9, 2024 · 96c62b7 · 96c62b7
1 parent d360f6e
commit 96c62b7
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 219 deletions.
diff --git a/apps/src/sites/code.org/pages/views/swiper_page_promote.js b/apps/src/sites/code.org/pages/views/swiper_page_promote.js
@@ -0,0 +1,36 @@
+// Adds carousel functionality to code.org/promote
+
+// This uses the Swiper library WebComponent.
+// See docs here: https://swiperjs.com/swiper-api#web-component.
+
+// import function to register Swiper custom elements
+import {register} from 'swiper/element/bundle';
+// register Swiper custom elements
+register();
+
+const swipers = [
+  document.querySelector('swiper-container.swiper-01'),
+  document.querySelector('swiper-container.swiper-02'),
+];
+
+const swiperParams = {
+  autoHeight: false,
+  pagination: {
+    clickable: true,
+  },
+  spaceBetween: 24,
+  // Custom CSS
+  injectStyles: [
+    `
+      :host .swiper-pagination {
+        position: relative;
+        margin-top: 2rem;
+      }
+    `,
+  ],
+};
+
+swipers.forEach(swiper => {
+  Object.assign(swiper, swiperParams);
+  swiper.initialize();
+});
diff --git a/apps/webpackEntryPoints.js b/apps/webpackEntryPoints.js
@@ -198,6 +198,7 @@ const PEGASUS_ENTRIES = {
   'code.org/views/swiper_page_videos': './src/sites/code.org/pages/views/swiper_page_videos.js',
   'code.org/views/swiper_page_minecraft': './src/sites/code.org/pages/views/swiper_page_minecraft.js',
   'code.org/views/swiper_page_music_lab': './src/sites/code.org/pages/views/swiper_page_music_lab.js',
+  'code.org/views/swiper_page_promote': './src/sites/code.org/pages/views/swiper_page_promote.js',
   'code.org/public/poetry': './src/sites/code.org/pages/public/poetry.js',
 
   // hourofcode.com

diff --git a/pegasus/sites.v3/code.org/public/css/common-international.css b/pegasus/sites.v3/code.org/public/css/common-international.css
@@ -445,45 +445,6 @@
   margin: 15px 0 0 20px;
 }
 
-/* Stats carousel */
-#stats-carousel {
-  width: 100%;
-  margin: 0;
-  position: relative;
-  background: #fff;
-}
-#stats-carousel .slides {
-}
-#stats-carousel .slide {
-  display: block;
-  position: relative;
-  float: left;
-  background: #ebecec;
-  margin: 0;
-  padding: 0 60px;
-}
-#stats-carousel .slide-img {
-  width: 100%;
-}
-#stats-carousel .slide img {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-#stats-carousel .slide-prev,
-#stats-carousel .slide-next {
-  position: absolute;
-  top: 0;
-  width: 40px;
-  height: 100%;
-  background-color: #f7f7f7;
-}
-#stats-carousel .slide-prev {
-  left: 0;
-}
-#stats-carousel .slide-next {
-  right: 0;
-}
 .stats-sources-link {
   float: right;
   font-size: 12px;
@@ -493,13 +454,6 @@
   font-weight: normal;
 }
 
-@media screen and (min-width: 970px) {
-  #stats-carousel .slide .slide-img {
-    width: 850px;
-    height: 503px;
-  }
-}
-
 #congress-right {
   margin: 0 0 2em 0;
 }

diff --git a/pegasus/sites.v3/code.org/public/css/common.css b/pegasus/sites.v3/code.org/public/css/common.css
@@ -447,63 +447,6 @@
   margin: 15px 0 0 20px;
 }
 
-/* Stats carousels */
-#stats-carousel,
-#stats-impact-carousel {
-  width: 100%;
-  margin: 0;
-  position: relative;
-  background: #fff;
-}
-
-#stats-carousel .slide,
-#stats-impact-carousel .slide {
-  display: block;
-  position: relative;
-  float: left;
-  background: #ebecec;
-  margin: 0;
-  padding: 0 0px 10px 60px;
-}
-#stats-carousel .slide-img,
-#stats-impact-carousel .slide-img {
-  width: 100%;
-}
-#stats-carousel .slide img,
-#stats-impact-carousel .slide img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-#stats-carousel .slide-prev,
-#stats-carousel .slide-next,
-#stats-impact-carousel .slide-prev,
-#stats-impact-carousel .slide-next {
-  position: absolute;
-  top: 0;
-  width: 40px;
-  height: 100%;
-  background-color: #f7f7f7;
-}
-#stats-carousel .slide-prev,
-#stats-impact-carousel .slide-prev {
-  left: 0;
-}
-#stats-carousel .slide-next,
-#stats-impact-carousel .slide-next {
-  right: 0;
-}
-
-#stats-carousel-wrapper .pagination,
-#stats-impact-carousel-wrapper .pagination {
-  display: block;
-  text-align: center;
-  margin: 10px 0 0 0;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 10px;
-}
 .stats-sources-link {
   float: right;
   font-size: 12px;
@@ -550,14 +493,6 @@
   font-weight: var(--semi-bold-font-weight);
 }
 
-@media screen and (min-width: 970px) {
-  #stats-carousel .slide .slide-img,
-  #stats-impact-carousel .slide .slide-img {
-    width: 850px;
-    height: 503px;
-  }
-}
-
 #congress-right {
   margin: 0 0 2em 0;
 }

diff --git a/pegasus/sites.v3/code.org/public/promote/index.haml b/pegasus/sites.v3/code.org/public/promote/index.haml
@@ -62,6 +62,8 @@ theme: responsive
 
 = view 'popup_window.js'
 
+= view :swiper_page_promote
+
 :javascript
   var petition;
 

diff --git a/pegasus/sites.v3/code.org/styles_min/040-page.css b/pegasus/sites.v3/code.org/styles_min/040-page.css
@@ -826,19 +826,6 @@ a.about_list_item:hover {
   border-radius: 5px;
 }
 
-#stats-carousel .slide-prev > span {
-  border-right-color: #b9bf15;
-}
-#stats-carousel .slide-next > span {
-  border-left-color: #b9bf15;
-}
-.carousel-wrapper .pagination a {
-  background: var(--brand_primary_light);
-}
-.carousel-wrapper .pagination a.selected {
-  background: var(--brand_primary_default);
-}
-
 @media screen and (max-width: 450px) {
   #index .count h1 {
     font-size: 32px;

diff --git a/pegasus/sites.v3/code.org/views/stats_carousel.haml b/pegasus/sites.v3/code.org/views/stats_carousel.haml
@@ -2,19 +2,15 @@
 -facebook = {:u=>'http://code.org/stats'}
 -twitter = {:url=>"https://#{request.site}/promote", :related=>'codeorg', :text=>"Most schools don't teach computer science. To help, sign the petition. (Thanks #{PegasusCdoDonor.get_random_donor_twitter} for supporting @codeorg)"}
 
-#stats-carousel-wrapper.carousel-wrapper
-  #stats-carousel.carousel{style: "margin-bottom: 0.5rem"}
-    .slides
-      -statistics.each do |statistic|
-        .slide
-          .slide-img<
-            %img{:src=>"/images/cs-stats/#{statistic[:code_s]}.png"}
-    %a.slide-prev{href:'#', aria:{label: 'View previous slide'}}
-      %span
-    %a.slide-next{href: '#', aria:{label: 'View next slide'}}
-      %span
-  .pagination
-    %div{:id => "stats-carousel-pagination"}
+.carousel-wrapper
+  %swiper-container.swiper-01{navigation: "true", "navigation-next-el": ".nav-next-01", "navigation-prev-el": ".nav-prev-01", pagination: "true", init: "false"}
+    -statistics.each do |statistic|
+      %swiper-slide
+        %figure{style: "width:100%"}
+          %img{src: "/images/cs-stats/#{statistic[:code_s]}.png", style: "width:100%"}
+
+  %button.swiper-nav-prev.nav-prev-01
+  %button.swiper-nav-next.nav-next-01
 
 = view :share_buttons, facebook:facebook, twitter:twitter
 .share-buttons.clear
@@ -24,47 +20,3 @@
 .stats-sources-link
   %a{href: "https://docs.google.com/document/d/1gySkItxiJn_vwb8HIIKNXqen184mRtzDX12cux0ZgZk/pub"}
     Source data
-
-%script{:src=>'/js/jquery.carouFredSel-6.2.1-packed.js'}
-%script{:src=>'/js/jquery.touchSwipe.min.js'}
-:javascript
-  $(document).ready(function() {
-
-    var statistics = #{JSON.pretty_generate(statistics).html_safe};
-
-    var id = '#stats-carousel';
-    // Define the carousel using the ID.
-    $(id + ' .slides').carouFredSel({
-      items : 1,
-      auto  : false,
-      responsive : true,
-      prev  : id + ' .slide-prev',
-      next  : id + ' .slide-next',
-      pagination : '#stats-carousel-pagination',
-      swipe	: {
-        onTouch : true,
-        onMouse : false
-      },
-      scroll : {
-        onAfter : update_share_buttons
-      },
-      onCreate : update_share_buttons
-    });
-
-    function update_share_buttons() {
-      // Share buttons are hidden for students younger than 13, so check that
-      // these buttons are in the DOM before trying to set the FB link.
-      if ($('.share_buttons').length) {
-        var pos = $(id + ' .slides').triggerHandler("currentPosition");
-        if(statistics[pos] != null) {
-          var facebook_anchor = $('#stats-section .share-button-facebook').parents('a.window-popup');
-          var new_facebook_href = facebook_anchor.attr('href');
-
-          if(statistics[pos].share_url_s != null) {
-            new_facebook_href = new_facebook_href.replace(/u=[^&]*/i, 'u=' + encodeURIComponent(statistics[pos].share_url_s));
-          }
-          facebook_anchor.attr('href', new_facebook_href);
-        }
-      }
-    }
-  });
diff --git a/pegasus/sites.v3/code.org/views/stats_impact_carousel.haml b/pegasus/sites.v3/code.org/views/stats_impact_carousel.haml
@@ -1,20 +1,14 @@
 -statistics = DB[:cdo_promote_impact_statistics].all.to_a
 
-#stats-impact-carousel-wrapper.carousel-wrapper
-  #stats-impact-carousel.carousel
-    .slides
-      -statistics.each do |statistic|
-        .slide
-          .slide-img<
-            %img{:src=>"#{statistic[:share_url_s]}"}
-    %a.slide-prev{:href=>'#'}<
-      %span<
-        %span.label Previous
-    %a.slide-next{:href=>'#'}<
-      %span<
-        %span.label Next
-  .pagination
-    %div{:id => "stats-impact-carousel-pagination"}
+.carousel-wrapper
+  %swiper-container.swiper-02{navigation: "true", "navigation-next-el": ".nav-next-02", "navigation-prev-el": ".nav-prev-02", pagination: "true", init: "false"}
+    -statistics.each do |statistic|
+      %swiper-slide
+        %figure{style: "width:100%"}
+          %img{src: "#{statistic[:share_url_s]}", style: "width:100%"}
+
+  %button.swiper-nav-prev.nav-prev-02
+  %button.swiper-nav-next.nav-next-02
 
 .impact-stats-link
   .left
@@ -26,26 +20,3 @@
     %a{:href=>'https://code.org/statistics', target: "_blank"}
       %button
         View Code.org Stats
-
-%script{:src=>'/js/jquery.carouFredSel-6.2.1-packed.js'}
-%script{:src=>'/js/jquery.touchSwipe.min.js'}
-:javascript
-  $(document).ready(function() {
-
-    var statistics = #{JSON.pretty_generate(statistics).html_safe};
-
-    var id = '#stats-impact-carousel';
-    // Define the carousel using the ID.
-    $(id + ' .slides').carouFredSel({
-      items : 1,
-      auto  : false,
-      responsive : true,
-      prev  : id + ' .slide-prev',
-      next  : id + ' .slide-next',
-      pagination : '#stats-impact-carousel-pagination',
-      swipe	: {
-        onTouch : true,
-        onMouse : false
-      },
-    });
-  });
diff --git a/pegasus/sites.v3/code.org/views/swiper_page_promote.haml b/pegasus/sites.v3/code.org/views/swiper_page_promote.haml
@@ -0,0 +1,2 @@
+// Adds Swiper to code.org/promote
+%script{src: webpack_asset_path('js/code.org/views/swiper_page_promote.js')}