decidim-homepage_proposals 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 072cc3b7f3c4dd841b2f6268339ee1977fbe471389c52684969528fadae7ac99
-  data.tar.gz: c89b39bd4bdfb084d90ffc20082de012f745c1782776c73f7bcb1c1961aafa59
+  metadata.gz: b2f59c3f281a8e0a637928618dcfcd6a4afc4fb613e8ddcb48d331852b38b81a
+  data.tar.gz: 9e536edf44c0e0c6175c911066f25e16f08cb4914f88ec7f4ebf75bc8fd3b542
 SHA512:
-  metadata.gz: dac25549785613af9ef39c2a32f6436b9956a6a1f44f63f7bc23524a541361bd0e4ee4d8a0d99033a5fa52382fb6b5725fec82136f829dc1f3f7b8e6b5dfd2ab
-  data.tar.gz: f06f4f3b8ffba9c0c2ed83648b043a8a060b84b8a14d103768527648fe2e70bc800d88a863357046ab2b4a4e1af6deb73c257aa7147eeb7ec956c15876042fd9
+  metadata.gz: cc4b98d0f56d8f4c06a898d443ab4550dc4011ff394de0e0579535c85b0bdce4afe27a83cc083e7d1494777c8f7f9a1e19b90af3faadd41a993cd014468b62c5
+  data.tar.gz: 6082c4cbf2fb06cc437a7d28e824cbd841d404d13d98ce09aa2bf09f0f1aae400f652c2260e3944fdd7dde4376ae172d24d818c85b4451fe86f801bdfb7d75ae

data/README.md

@@ -1,11 +1,14 @@
 # Decidim::HomepageProposals
 
-Homepage slider for proposals.
+Proposals homepage content block presented as carousel. 
 
-## Usage
+![Demo image](./docs/images/glanced_proposals.png)
 
-HomepageProposals will be available as a Component for a Participatory
-Space.
+With this module you can have an overview of current proposals on the platform. Carousel support live reload based on selected filters and refreshing using Ajax requests.
+
+## Requirements
+
+* [GlideJS](https://github.com/glidejs/glide)
 
 ## Installation
 
@@ -23,6 +26,13 @@ bundle exec rake decidim_module_homepage_proposals:webpacker:install
 bundle exec rake assets:precompile
 ```
 
+## Usage in Decidim
+
+* Go to the backoffice
+* Navigate to homepage content blocks
+* Configure the homepage proposals content block
+* Enable content block
+
 ## Contributing
 
 See [Decidim](https://github.com/decidim/decidim).

data/app/cells/decidim/homepage_proposals/content_blocks/proposals_slider_cell.rb

@@ -12,8 +12,13 @@ module Decidim
         include ActionView::Helpers::FormOptionsHelper
         include Decidim::FiltersHelper
         include Decidim::FilterResource
+        include Decidim::ComponentPathHelper
 
-        private
+        def default_linked_component_path
+          main_component_path(Decidim::Component.find(selected_component_id))
+        rescue ActiveRecord::RecordNotFound
+          root_path
+        end
 
         def content_block_settings
           @content_block_settings ||= Decidim::ContentBlock.find_by(
@@ -23,8 +28,7 @@ module Decidim
         end
 
         def options_for_default_component
-          components = Decidim::Component.where(id: content_block_settings.linked_components_id.compact)
-          options = components.map do |component|
+          options = linked_components.map do |component|
             ["#{translated_attribute(component.name)} (#{translated_attribute(component.participatory_space.title)})", component.id]
           end
 

data/app/packs/src/decidim/homepage_proposals/glideBuilder.js

@@ -1,16 +1,52 @@
 import Glide from "@glidejs/glide";
 
+// Create a GlideJS carousel
+// See documentation: https://glidejs.com/docs/
 export default class GlideBuilder {
-    constructor(selector = '.glide', type = 'carousel') {
+    static defaultPervView() {
+        return 4;
+    }
+
+    static defaultBreakpoints() {
+        return { 1024: { perView: 3 }, 768: { perView: 2 }, 480: { perView: 1 } };
+    }
+
+    constructor(selector = '.glide', type = 'carousel', pervView = GlideBuilder.defaultPervView()) {
         this.type = type
+        this.pervView = this.setPervView(pervView);
+        this.breakpoints = this.setBreakpoints();
         this.setOpts()
         this.glide = new Glide(selector, this.options)
 
         this.bindings()
     }
 
-    static pervView() {
-        return 4;
+    // Set pervView, must be between 0 and 4 excluded
+    // Returns default pervView when :
+    // * pervView < 1 : Placeholder is added at ./glideItems/Manager.js:122
+    // * pervView > 4 : Max pervView must be 4
+    setPervView(pervView) {
+        if (pervView > 0 && pervView < 4) {
+            return pervView;
+        } else {
+            return GlideBuilder.defaultPervView();
+        }
+    }
+
+    // Glide breakpoints must be accorded to the pervView to prevent scrolling on placeholders
+    setBreakpoints() {
+        let breakpoints;
+        switch (this.pervView) {
+            case 2:
+                breakpoints = { 1024: {perView: 2}, 768: {perView: 2}, 480: {perView: 1} };
+                break;
+            case 1:
+                breakpoints = { 1024: {perView: 1}, 768: {perView: 1}, 480: {perView: 1} };
+                break;
+            default:
+                breakpoints = GlideBuilder.defaultBreakpoints();
+        }
+        return breakpoints;
     }
 
     destroy() {
@@ -28,8 +64,10 @@ export default class GlideBuilder {
     bindings() {
     this.glide.on("run", () => {
             let bulletNumber = this.glide.index;
-            $($(".glide__bullets").children()).css("color", "lightgrey");
-            $($(".glide__bullets").children().get(bulletNumber + 1)).css("color", "grey");
+            let $glideBullets = $(".glide__bullets");
+
+            $($glideBullets.children()).css("color", "lightgrey");
+            $($glideBullets.children().get(bulletNumber + 1)).css("color", "grey");
         });
     }
 
@@ -38,11 +76,9 @@ export default class GlideBuilder {
             type: this.type,
             startAt: 0,
             autoplay: 0,
-            perView: GlideBuilder.pervView(),
+            perView: this.pervView,
+            breakpoints: this.breakpoints,
             hoverpause: true,
-            breakpoints: {
-                1024: { perView: 3 }, 768: { perView: 2 }, 480: { perView: 1 }
-            },
             perTouch: 1
         }
     }

data/app/packs/src/decidim/homepage_proposals/glidejs/Manager.js

@@ -73,9 +73,9 @@ export default class Manager {
                 this.generateGlides([])
             })
             .always((res) => {
-                this.glide = new GlideBuilder('.glide', 'carousel');
+                this.glide = new GlideBuilder('.glide', 'carousel', res.length);
 
-                if (res.length <= 1 || res.status === 500) {
+                if (res.length === undefined || res.length <= 1 || res.status === 500) {
                     this.glide.disable()
                 }
                 this.endLoading();
@@ -104,7 +104,7 @@ export default class Manager {
         this.$proposalsGlideItems.append(notFoundGlide.render())
         $(".glide__bullets > .glide__bullet:last").before(notFoundGlide.bullet(0));
 
-        for (let i = 0; i < GlideBuilder.pervView() - 1; i++) {
+        for (let i = 0; i < GlideBuilder.defaultPervView() - 1; i++) {
             this.$proposalsGlideItems.append(notFoundGlide.placeholder());
         }
     }
@@ -118,13 +118,5 @@ export default class Manager {
             this.$proposalsGlideItems.append(proposalGlide.render());
             $(".glide__bullets > .glide__bullet:last").before(proposalGlide.bullet(i));
         }
-
-        if (proposals.length < GlideBuilder.pervView()) {
-            let missingCount = GlideBuilder.pervView() - proposals.length
-
-            for (let i = 0; i < missingCount; i++) {
-                this.$proposalsGlideItems.append(new GlideItem(null).placeholder());
-            }
-        }
     }
 }

data/app/packs/src/decidim/homepage_proposals/main.js

@@ -1,5 +1,10 @@
 import Manager from "./glidejs/Manager"
 
+// Build GlideJS carousel in the content block
+// Tree
+// ./glideBuilder.js - Build a new instance of GlideJS carousel with options based on current number of proposals found
+// ./glidejs/Manager.js - Start, Refresh, Stop GlideJS carousel, creates proposals cards items in carousel
+// ./glidejs/glideitems/* - GlideJS items to render
 $(() => {
     const $proposalsSlider = $("#proposals_slider");
     const $proposalsGlideItems = $("#proposals_glide_items");
@@ -9,10 +14,12 @@ $(() => {
     const smallSlider = new Manager($proposalsSlider, $proposalsGlideItems, $(".glide__bullet.glide__bullet_idx"), $smallFilterForm);
     slider.start()
 
+    // Refresh slider when Desktop filter form changes
     $filterForm.on("change", () => {
         slider.start()
     });
 
+    // Refresh slider when Mobile filter form changes
     $smallFilterForm.on("change", () => {
         smallSlider.start()
     });

data/app/packs/stylesheets/decidim/homepage_proposals/homepage_proposals.scss

@@ -43,3 +43,14 @@
 .proposal-glance.card__title {
   max-height: 30px;
 }
+
+.flex-v-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-justify-end {
+  display: flex;
+  justify-content: end
+}

data/app/views/decidim/shared/homepage_proposals/_filters.erb

@@ -1,47 +1,47 @@
-<%= filter_form_for filter, decidim_participatory_processes_path , id: 'filters-form' do |form| %>
-  <div class="columns mediumlarge-4 large-3">
-    <%= cell(
-          "decidim/scopes_picker",
-          form,
-          attribute: :scope_id,
-          multiple: true,
-          legend_title: t("decidim.homepage_proposals.proposal_at_a_glance.filters.scope"),
-          label: false,
-          checkboxes_on_top: false
-        ) %>
-  </div>
-  <div class="columns mediumlarge-4 large-3">
-    <%= form.categories_select :category_id,
-                               categories_filter,
-                               legend_title: t("decidim.homepage_proposals.proposal_at_a_glance.filters.categories"),
-                               disable_parents: false,
-                               label: "",
-                               selected: filter.category_id,
-                               include_blank: t("decidim.homepage_proposals.proposal_at_a_glance.filters.default_categories") %>
-  </div>
-  <div class="columns mediumlarge-4 large-3">
-    <div class="filters__section">
-      <fieldset class="">
-        <legend class="mini-title"><%= t("decidim.homepage_proposals.proposal_at_a_glance.filters.components") %></legend>
-        <label for="">
-
-          <%= form.select :component_id,
-                          options_for_default_component,
-                          label: false,
-                          selected: filter.component_id,
-                          data: { placeholder: t("decidim.homepage_proposals.proposal_at_a_glance.filters.components") }
-          %>
-        </label>
-
-      </fieldset>
-
+<%= filter_form_for filter, decidim_participatory_processes_path, id: 'filters-form' do |form| %>
+  <div class="row">
+    <div class="columns flex-v-center">
+      <p><%= I18n.t("decidim.homepage_proposals.proposal_at_a_glance.filters.intro") %></p>
+      <div>
+        <%= cell(
+              "decidim/scopes_picker",
+              form,
+              attribute: :scope_id,
+              multiple: true,
+              label: false,
+              checkboxes_on_top: false
+            ) %>
+      </div>
+      <p><%= I18n.t("decidim.homepage_proposals.proposal_at_a_glance.filters.about") %></p>
+      <div>
+        <%= form.categories_select :category_id,
+                                   categories_filter,
+                                   disable_parents: false,
+                                   label: false,
+                                   selected: filter.category_id,
+                                   include_blank: t("decidim.homepage_proposals.proposal_at_a_glance.filters.default_categories") %>
+      </div>
+      <p><%= I18n.t("decidim.homepage_proposals.proposal_at_a_glance.filters.in") %></p>
+      <div>
+        <%= form.select :component_id,
+                        options_for_default_component,
+                        label: false,
+                        selected: filter.component_id,
+                        data: { placeholder: t("decidim.homepage_proposals.proposal_at_a_glance.filters.components") }
+        %>
+      </div>
     </div>
-
   </div>
-  <%# Small button to clear filters %>
-  <div class="columns mediumlarge-12 large-3">
-    <div class="clear-filters">
-      <%= link_to t("decidim.homepage_proposals.proposal_at_a_glance.filters.clear_filters"), decidim_participatory_processes_path, class: "button--clear-filters" %>
+  <div class="row">
+    <div class="columns medium-3">
+      <div class="clear-filters">
+        <%= link_to t("decidim.homepage_proposals.proposal_at_a_glance.filters.clear_filters"), decidim_participatory_processes_path(anchor: "proposals_slider"), class: "button button--secondary small button--sc" %>
+      </div>
+    </div>
+    <div class="columns medium-3">
+      <div class="all-proposals flex-justify-end">
+        <%= link_to t("decidim.homepage_proposals.proposal_at_a_glance.filters.all_proposals"), default_linked_component_path, class: "button button--secondary small button--sc" %>
+      </div>
     </div>
   </div>
 <% end %>

data/config/i18n-tasks.yml

@@ -2,9 +2,37 @@
 
 base_locale: en
 locales: [en]
-
+search:
+  relative_roots:
+    - app/cells
+    - app/controllers
+    - app/helpers
+    - app/mailers
+    - app/presenters
+    - app/views
 ignore_unused:
   - "decidim.components.homepage_proposals.name"
+  - decidim.homepage_proposals.content_blocks.proposals_slider.filters_small_view.{close_modal,filter,filter_by,unfold}
+  - decidim.homepage_proposals.content_blocks.proposals_slider.{learn_more,loading,name,search}
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.activate_filters
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.default_linked_component
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.linked_components_id
+  - decidim.homepage_proposals.proposal_at_a_glance.filters.categories
+  - decidim.homepage_proposals.proposal_at_a_glance.filters.default_components
+  - decidim.homepage_proposals.proposal_at_a_glance.filters.default_scope
+  - decidim.homepage_proposals.proposal_at_a_glance.filters.scope
+  - decidim.homepage_proposals.proposal_at_a_glance.learn_more
+  - decidim.homepage_proposals.proposal_at_a_glance.no_proposals.description
+  - decidim.homepage_proposals.proposal_at_a_glance.no_proposals.title
 
 ignore_missing:
   - decidim.participatory_processes.scopes.global
+  - decidim.homepage_proposals.content_blocks.proposals_slider.show.loading
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.show.activate_filters
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.show.linked_components_id
+  - decidim.homepage_proposals.content_blocks.proposals_slider_settings_form.show.default_linked_component
+  - decidim.shared.homepage_proposals.filters_small_view.filters_small_view.filter
+  - decidim.shared.homepage_proposals.filters_small_view.filters_small_view.unfold
+  - decidim.shared.homepage_proposals.filters_small_view.filters_small_view.filter_by
+  - decidim.shared.homepage_proposals.filters_small_view.filters_small_view.close_modal
+

data/config/locales/en.yml

@@ -10,24 +10,28 @@ en:
             filter_by: Filter by
             unfold: Unfold
           learn_more: Learn more
-          name: Proposals slider
           loading: Loading...
+          name: Proposals slider
           search: Search
         proposals_slider_settings_form:
           activate_filters: Activate filters
           default_linked_component: Component displayed by default
           linked_components_id: Components available in filters
       proposal_at_a_glance:
-        title: Explore proposals
         filters:
+          about: about
+          all_proposals: All proposals
           categories: Categories
           clear_filters: Clear filters
           components: Components
           default_categories: All categories
           default_components: All components
           default_scope: All scopes
+          in: in
+          intro: I'd like to see projects from
           scope: Scope
         learn_more: Learn more
         no_proposals:
-          title: No proposals
           description: There are no proposals that match the selected filters.
+          title: No proposals
+        title: Explore proposals

data/lib/decidim/homepage_proposals/version.rb

@@ -3,7 +3,7 @@
 module Decidim
   module HomepageProposals
     def self.version
-      "1.0.0"
+      "1.0.1"
     end
 
     def self.decidim_version

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: decidim-homepage_proposals
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
 platform: ruby
 authors:
 - Elie Gaboriau
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-16 00:00:00.000000000 Z
+date: 2023-07-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: decidim-core