Aide à la sobriété éditoriale

app/assets/stylesheets/admin/components/content-editor.sass

@@ -98,6 +98,66 @@
                             font-size: 10px
                             margin: 0
                             text-align: center
+    .vue__dom-count
+        background: $color-flexoki-100
+        outline-offset: -10px
+        outline-color: $color-flexoki-300
+        outline-style: solid
+        outline-width: 1px
+        padding: var(--bs-gutter-x)
+        @include media-breakpoint-down(md)
+            margin-left: calc(-1 * var(--bs-gutter-x))
+            margin-right: calc(-1 * var(--bs-gutter-x))
+        &__information
+            &__button
+                text-align: right
+                button
+                    border: 0
+                    background: none
+                    font-size: pxToRem(12)
+                    color: $color-flexoki-700
+                    svg
+                        width: 16px
+            &__content
+                margin-top: 30px
+                margin-bottom: 50px
+                h2
+                    margin-bottom: 1rem
+                ol
+                    padding-left: 0
+                    list-style: none
+                    display: flex
+                    flex-wrap: wrap
+                    li
+                        width: 20%
+                        @include media-breakpoint-down(md)
+                            width: 33%
+                &__title
+                    font-family: $font-family-serif
+                    text-align: center
+                &__text
+                    font-size: pxToRem(12)
+                    color: $color-flexoki-700
+                    text-align: center
 
+        &__image
+            mix-blend-mode: multiply
+        &__title
+            font-family: $font-family-serif
+            font-size: pxToRem(30)
+        &__count
+            font-size: pxToRem(12)
+            text-transform: uppercase
+            color: $color-flexoki-700
+        &__credit
+            font-size: pxToRem(12)
+            color: $color-flexoki-700
+            &:before
+                content: ""
+                display: block
+                height: 1px
+                width: 20px
+                margin: 10px 0
+                background: $color-flexoki-300
 .sortable-ghost
     opacity: 0.3

app/javascript/apps/blocks-editor/BlocksEditorApp.vue

@@ -1,11 +1,12 @@
 <script>
 import Blocks from './components/Blocks.vue';
+import DomCount from './components/DomCount.vue';
 import Editor from './components/Editor.vue';
 import OffcanvasShell from './components/OffcanvasShell.vue';
 import TemplatePicker from './components/TemplatePicker.vue';
 
 export default {
-  components: { Blocks, Editor, OffcanvasShell, TemplatePicker },
+  components: { Blocks, DomCount, Editor, OffcanvasShell, TemplatePicker },
   data() {
     return {
       loading: true,
@@ -165,6 +166,9 @@ export default {
             {{ i18n.blocksEditor.actions.addBlock }}</a>
         </div>
       </div>
+      <DomCount
+        :count="data.about.dom_count"
+        :i18n="i18n" />
       <OffcanvasShell
         :open="offcanvasState !== 'closed'"
         :title="i18n.blocksEditor.offcanvas.title"

app/javascript/apps/blocks-editor/components/DomCount.vue

@@ -0,0 +1,90 @@
+<script>
+import { CircleQuestionMark } from '@lucide/vue';
+export default {
+  name: 'DomCount',
+  props: [
+    'count',
+    'i18n'
+  ],
+  components: {
+    CircleQuestionMark,
+  },
+  computed: {
+    level() {
+      return this.levels.find(l => this.count < l.threshold).name;
+    },
+    roundedCount() {
+      return Math.round(this.count / this.rounding_step) * this.rounding_step;
+    },
+    countSentence() {
+      return this.i18n.blocksEditor.dom_count.count.replace('{count}', this.roundedCount);
+    },
+  },
+  data () {
+    return {
+      // Beware if you change levels, there are texts in the i18n files!
+      levels: [
+        { name: 'one',   threshold: 300 },
+        { name: 'two',   threshold: 600 },
+        { name: 'three', threshold: 1000 },
+        { name: 'four',  threshold: 2000 },
+        { name: 'five',  threshold: Infinity },
+      ],
+      // Affichage arrondi pour ne pas donner un faux sentiment de précision
+      rounding_step: 50,
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="row mt-5">
+    <div class="offset-lg-4 col-lg-8 col-xxl-6">
+      <div class="vue__dom-count">
+        <div class="vue__dom-count__information">
+          <div class="vue__dom-count__information__button">
+            <button data-bs-toggle="collapse" data-bs-target="#dom-count-information">
+              {{ i18n.blocksEditor.dom_count.more.title }}
+              <CircleQuestionMark />
+            </button>
+          </div>
+          <div class="collapse vue__dom-count__information__content" id="dom-count-information">
+            <h2>{{ i18n.blocksEditor.dom_count.more.title }}</h2>
+            <div v-html="i18n.blocksEditor.dom_count.more.explanation"></div>
+            <ol>
+              <li v-for="level in levels" :key="level.name">
+                <img :src="`/vue/dom_count/${level.name}.png`" class="vue__dom-count__image img-fluid" alt="" />
+                <div>
+                  <p class="vue__dom-count__information__content__title">
+                    {{ i18n.blocksEditor.dom_count.level[level.name].title }}
+                  </p>
+                  <p class="vue__dom-count__information__content__text">
+                    {{ i18n.blocksEditor.dom_count.level[level.name].dom }}
+                  </p>
+                </div>
+              </li>
+            </ol>
+            <hr>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-5">
+            <img :src="`/vue/dom_count/${level}.png`" class="vue__dom-count__image img-fluid" alt="" />
+          </div>
+          <div class="col-md-7">
+            <p class="vue__dom-count__title">
+              {{ i18n.blocksEditor.dom_count.level[level].title }}
+            </p>
+            <p class="vue__dom-count__count">
+              {{ countSentence }}
+            </p>
+            <p class="vue__dom-count__text">
+              {{ i18n.blocksEditor.dom_count.level[level].text }}
+            </p>
+            <p class="vue__dom-count__credit" v-html="i18n.blocksEditor.dom_count.credit"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/apps/components/CropperModal.vue

@@ -1,5 +1,5 @@
 <script>
-import { Cropper } from 'vue-advanced-cropper';
+import { Cropper } from 'vue-advanced-cropper';
 
 export default {
     components: {

app/javascript/apps/media-picker/components/Cloud.vue

@@ -1,5 +1,5 @@
 <script>
-import { CloudDownload, ArrowRight, ArrowLeft } from 'lucide-vue-next';
+import { CloudDownload, ArrowRight, ArrowLeft } from '@lucide/vue';
 
 export default {
     components: {

app/javascript/apps/media-picker/components/ImageUploader.vue

@@ -1,5 +1,5 @@
 <script>
-import { Upload } from 'lucide-vue-next';
+import { Upload } from '@lucide/vue';
 import CropperModal from '../../components/CropperModal.vue';
 
 export default {

app/javascript/apps/media-picker/components/Medias.vue

@@ -1,5 +1,5 @@
 <script>
-import { Image, ArrowRight, ArrowLeft } from 'lucide-vue-next';
+import { Image, ArrowRight, ArrowLeft } from '@lucide/vue';
 import Taxonomies from './medias/Taxonomies.vue';
 
 export default {

app/javascript/apps/time-slots/TimeSlotsApp.vue

@@ -1,7 +1,7 @@
 <script>
 import Changes from '../components/Changes.vue';
 import Duration from './components/Duration.vue';
-import { Plus, X } from 'lucide-vue-next';
+import { Plus, X } from '@lucide/vue';
 
 export default {
     components: {

app/models/communication/block.rb

@@ -71,6 +71,8 @@ class Communication::Block < ApplicationRecord
   scope :for_about_type, -> (about_type, language = nil) { where(about_type: about_type) }
   scope :for_university, -> (university, language = nil) { where(university: university) }
 
+  delegate :dom_count, to: :template
+
   # When we set data from json, we pass it to the template.
   # The json we save is first sanitized and prepared by the template.
   def data=(value)

app/models/communication/block/component/array.rb

@@ -17,4 +17,7 @@ def default_data
     ['']
   end
 
+  def dom_count
+    data.count
+  end
 end

app/models/communication/block/component/base.rb

@@ -51,6 +51,10 @@ def full_text
     ''
   end
 
+  def dom_count
+    1
+  end
+
   def to_s
     self.class.to_s.demodulize
   end

app/models/communication/block/component/file.rb

@@ -32,4 +32,8 @@ def dependencies
     [blob]
   end
 
+  def blob_count
+    5
+  end
+
 end

app/models/communication/block/component/image.rb

@@ -1,2 +1,6 @@
 class Communication::Block::Component::Image < Communication::Block::Component::File
+
+  def dom_count
+    9
+  end
 end

app/models/communication/block/component/rich_text.rb

@@ -9,7 +9,16 @@ def data=(value)
   # Add whitespace between tags https://stackoverflow.com/a/28449868
   # strip_tags does not work because it removes all tags and joins text together without spaces
   def full_text
-    Nokogiri::HTML(data).xpath('//text()').map(&:text).join(' ')
+    nokogiri.xpath('//text()').map(&:text).join(' ')
   end
 
+  def dom_count
+    nokogiri.css('*').count
+  end
+
+  protected
+
+  def nokogiri
+    @nokogiri ||= Nokogiri::HTML(data)
+  end
 end

app/models/communication/block/template/agenda.rb

@@ -68,6 +68,12 @@ def top_link
     title_link
   end
 
+  def dom_count
+    5 +
+    description_component.dom_count +
+    children.length * 25
+  end
+
   protected
 
   def selected_events_all

app/models/communication/block/template/base.rb

@@ -93,6 +93,10 @@ def media_blobs
     []
   end
 
+  def dom_count
+    1
+  end
+
   def to_s
     self.class.to_s.demodulize
   end

app/models/communication/block/template/call_to_action/element.rb

@@ -4,4 +4,7 @@ class Communication::Block::Template::CallToAction::Element < Communication::Blo
   has_component :url, :string
   has_component :target_blank, :boolean
 
+  def dom_count
+    1
+  end
 end

app/models/communication/block/template/chapter.rb

@@ -19,6 +19,15 @@ def media_blobs
     ]
   end
 
+  def dom_count
+    5 +
+    text_component.dom_count +
+    notes_component.dom_count +
+    image_component.dom_count +
+    alt_component.dom_count +
+    credit_component.dom_count
+  end
+
   protected
 
   def check_accessibility

app/models/communication/block/template/contact/element.rb

@@ -8,4 +8,9 @@ def empty?
     time_slot_morning['from'].blank? &&
     time_slot_afternoon['from'].blank?
   end
+
+  def dom_count
+    25
+  end
+
 end

app/models/communication/block/template/datatable/element.rb

@@ -2,4 +2,7 @@ class Communication::Block::Template::Datatable::Element < Communication::Block:
 
   has_component :cells, :array
 
+  def dom_count
+    cells_component.dom_count
+  end
 end

app/models/communication/block/template/definition/element.rb

@@ -5,4 +5,8 @@ class Communication::Block::Template::Definition::Element < Communication::Block
   def empty?
     title.blank? && description.blank?
   end
+
+  def dom_count
+    2 + description_component.dom_count
+  end
 end

app/models/communication/block/template/exhibition.rb

@@ -61,6 +61,12 @@ def top_link
     title_link
   end
 
+  def dom_count
+    5 +
+    description_component.dom_count +
+    children.length * 25
+  end
+
   protected
 
   def link_to_exhibitions

app/models/communication/block/template/feature/element.rb

@@ -9,4 +9,12 @@ class Communication::Block::Template::Feature::Element < Communication::Block::T
   def empty?
     title.blank? && description.blank?
   end
+
+  def dom_count
+    2 + 
+    description_component.dom_count +
+    image_component.dom_count +
+    alt_component.dom_count +
+    credit_component.dom_count
+  end
 end

app/models/communication/block/template/file/element.rb

@@ -7,4 +7,10 @@ class Communication::Block::Template::File::Element < Communication::Block::Temp
   def blob
     file_component.blob
   end
+
+  def dom_count
+    2 +
+    file_component.blob_count +
+    image_component.blob_count
+  end
 end