From 3cebce26e6408c2fc79d09ee84b40dfe989b9ada Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 28 Dec 2020 16:40:11 +0100 Subject: [PATCH] added and designed home footer simplenews subscription --- ...ck.block.materiosimplenewssubscription.yml | 36 ++++ ...de.simplenews_subscriber.materio_block.yml | 12 ++ config/sync/core.extension.yml | 1 + ...de.simplenews_subscriber.materio_block.yml | 1 + ...de.simplenews_subscriber.materio_block.yml | 9 + .../materio_simplenews.info.yml | 7 + .../materio_simplenews.module | 5 + .../Form/MaterioSubscriptionsBlockForm.php | 103 ++++++++++ .../MaterioSimplenewsSubscriptionBlock.php | 184 ++++++++++++++++++ .../custom/materiotheme/assets/dist/main.css | 64 ++++-- .../custom/materiotheme/assets/dist/main.js | 2 +- .../assets/styles/base/_layout.scss | 11 ++ .../materiotheme/assets/styles/main.scss | 51 ++++- .../vuejs/components/Pages/Home.vue | 2 +- 14 files changed, 464 insertions(+), 24 deletions(-) create mode 100644 config/sync/block.block.materiosimplenewssubscription.yml create mode 100644 config/sync/core.entity_form_mode.simplenews_subscriber.materio_block.yml create mode 100644 config/sync/language/fr/core.entity_form_mode.simplenews_subscriber.materio_block.yml create mode 100644 web/modules/custom/materio_simplenews/config/install/core.entity_form_mode.simplenews_subscriber.materio_block.yml create mode 100644 web/modules/custom/materio_simplenews/materio_simplenews.info.yml create mode 100644 web/modules/custom/materio_simplenews/materio_simplenews.module create mode 100644 web/modules/custom/materio_simplenews/src/Form/MaterioSubscriptionsBlockForm.php create mode 100644 web/modules/custom/materio_simplenews/src/Plugin/Block/MaterioSimplenewsSubscriptionBlock.php diff --git a/config/sync/block.block.materiosimplenewssubscription.yml b/config/sync/block.block.materiosimplenewssubscription.yml new file mode 100644 index 00000000..5aa0b906 --- /dev/null +++ b/config/sync/block.block.materiosimplenewssubscription.yml @@ -0,0 +1,36 @@ +uuid: 9707958e-dc3d-43f9-a449-84993d135dae +langcode: en +status: true +dependencies: + module: + - context + - materio_simplenews + theme: + - materiotheme +id: materiosimplenewssubscription +theme: materiotheme +region: footer_left +weight: 0 +provider: null +plugin: materio_simplenews_subscription_block +settings: + id: materio_simplenews_subscription_block + label: 'Materio Simplenews subscription' + provider: materio_simplenews + label_display: '0' + newsletters: + materio_newsletter: materio_newsletter + ze_daily_materio_: ze_daily_materio_ + message: 'Stay informed - subscribe to our newsletter.' + unique_id: d0c7bdf4-c218-4ded-840a-9c4c731ec469 +visibility: + view_inclusion: + id: view_inclusion + negate: null + view_inclusion: { } + context_mapping: { } + request_path_exclusion: + id: request_path_exclusion + pages: '' + negate: null + context_mapping: { } diff --git a/config/sync/core.entity_form_mode.simplenews_subscriber.materio_block.yml b/config/sync/core.entity_form_mode.simplenews_subscriber.materio_block.yml new file mode 100644 index 00000000..6fe72842 --- /dev/null +++ b/config/sync/core.entity_form_mode.simplenews_subscriber.materio_block.yml @@ -0,0 +1,12 @@ +uuid: a97d0282-01c9-4b2e-8f91-24b0e3e6443c +langcode: en +status: true +dependencies: + module: + - simplenews +_core: + default_config_hash: leCpWOylvfK6ArYQp2n7dcGoAFC_A-X7qQm5FdYToWg +id: simplenews_subscriber.materio_block +label: Block +targetEntityType: simplenews_subscriber +cache: true diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml index 5c29e945..2c34aaa3 100644 --- a/config/sync/core.extension.yml +++ b/config/sync/core.extension.yml @@ -116,6 +116,7 @@ module: materio_migrate: 0 materio_samples: 0 materio_sapi: 0 + materio_simplenews: 0 materio_user: 0 matomo: 0 maxlength: 0 diff --git a/config/sync/language/fr/core.entity_form_mode.simplenews_subscriber.materio_block.yml b/config/sync/language/fr/core.entity_form_mode.simplenews_subscriber.materio_block.yml new file mode 100644 index 00000000..3edddf78 --- /dev/null +++ b/config/sync/language/fr/core.entity_form_mode.simplenews_subscriber.materio_block.yml @@ -0,0 +1 @@ +label: Bloc diff --git a/web/modules/custom/materio_simplenews/config/install/core.entity_form_mode.simplenews_subscriber.materio_block.yml b/web/modules/custom/materio_simplenews/config/install/core.entity_form_mode.simplenews_subscriber.materio_block.yml new file mode 100644 index 00000000..a1a6c088 --- /dev/null +++ b/web/modules/custom/materio_simplenews/config/install/core.entity_form_mode.simplenews_subscriber.materio_block.yml @@ -0,0 +1,9 @@ +langcode: en +status: true +dependencies: + module: + - simplenews +id: simplenews_subscriber.materio_block +label: Materio Block +targetEntityType: simplenews_subscriber +cache: true diff --git a/web/modules/custom/materio_simplenews/materio_simplenews.info.yml b/web/modules/custom/materio_simplenews/materio_simplenews.info.yml new file mode 100644 index 00000000..b16dc382 --- /dev/null +++ b/web/modules/custom/materio_simplenews/materio_simplenews.info.yml @@ -0,0 +1,7 @@ +name: Materio Simple News +type: module +description: 'Simple News extensions Materio module' +core: 8.x +package: 'Materio' +dependencies: + - simplenews diff --git a/web/modules/custom/materio_simplenews/materio_simplenews.module b/web/modules/custom/materio_simplenews/materio_simplenews.module new file mode 100644 index 00000000..f1f38668 --- /dev/null +++ b/web/modules/custom/materio_simplenews/materio_simplenews.module @@ -0,0 +1,5 @@ +setFormClass('materio_block', '\Drupal\materio_simplenews\Form\MaterioSubscriptionsBlockForm'); +} diff --git a/web/modules/custom/materio_simplenews/src/Form/MaterioSubscriptionsBlockForm.php b/web/modules/custom/materio_simplenews/src/Form/MaterioSubscriptionsBlockForm.php new file mode 100644 index 00000000..780ac235 --- /dev/null +++ b/web/modules/custom/materio_simplenews/src/Form/MaterioSubscriptionsBlockForm.php @@ -0,0 +1,103 @@ +uniqueId)) { + throw new \Exception('Unique ID must be set with setUniqueId.'); + } + return 'materio_simplenews_subscriptions_block_' . $this->uniqueId; + } + + /** + * {@inheritdoc} + */ + public function setUniqueId($id) { + $this->uniqueId = $id; + } + + /** + * {@inheritdoc} + */ + public function form(array $form, FormStateInterface $form_state) { + // Hide subscription widget if only one newsletter available. + if (count($this->getNewsletters()) == 1) { + $this->getSubscriptionWidget($form_state)->setHidden(); + } + + $form = parent::form($form, $form_state); + + // $form['message'] = array( + // '#type' => 'item', + // '#markup' => $this->message, + // ); + + unset($form['subscriptions']['widget']['#title']); + unset($form['subscriptions']['widget']['#description']); + unset($form['mail']['widget']['#title']); + unset($form['mail']['widget']['#description']); + unset($form['mail']['widget'][0]['#title']); + unset($form['mail']['widget'][0]['#title_display']); + unset($form['mail']['widget'][0]['#description']); + $form['mail']['widget'][0]['value']['#placeholder'] = t('email'); + unset($form['mail']['widget'][0]['value']['#title']); + unset($form['mail']['widget'][0]['value']['#description']); + + $mailvalue = $form['mail']['widget'][0]; + $test='test'; + + return $form; + } + + /** + * {@inheritdoc} + */ + protected function actions(array $form, FormStateInterface $form_state) { + $actions = parent::actions($form, $form_state); + $actions[static::SUBMIT_UPDATE]['#value'] = $this->t('Update'); + return $actions; + } + + /** + * {@inheritdoc} + */ + protected function getSubmitMessage(FormStateInterface $form_state, $op, $confirm) { + switch ($op) { + case static::SUBMIT_UPDATE: + return $this->t('The newsletter subscriptions for %mail have been updated.', array('%mail' => $form_state->getValue('mail')[0]['value'])); + + case static::SUBMIT_SUBSCRIBE: + if ($confirm) { + return $this->t('You will receive a confirmation e-mail shortly containing further instructions on how to complete your subscription.'); + } + return $this->t('You have been subscribed.'); + + case static::SUBMIT_UNSUBSCRIBE: + if ($confirm) { + return $this->t('You will receive a confirmation e-mail shortly containing further instructions on how to cancel your subscription.'); + } + return $this->t('You have been unsubscribed.'); + } + } + +} diff --git a/web/modules/custom/materio_simplenews/src/Plugin/Block/MaterioSimplenewsSubscriptionBlock.php b/web/modules/custom/materio_simplenews/src/Plugin/Block/MaterioSimplenewsSubscriptionBlock.php new file mode 100644 index 00000000..5c17c48c --- /dev/null +++ b/web/modules/custom/materio_simplenews/src/Plugin/Block/MaterioSimplenewsSubscriptionBlock.php @@ -0,0 +1,184 @@ +entityTypeManager = $entity_type_manager; + $this->formBuilder = $formBuilder; + } + + + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { + return new static( + $configuration, + $plugin_id, + $plugin_definition, + $container->get('entity_type.manager'), + $container->get('form_builder') + ); + } + + + /** + * {@inheritdoc} + */ + public function defaultConfiguration() { + // By default, the block will contain 1 newsletter. + return array( + 'newsletters' => array(), + 'message' => t('Stay informed - subscribe to our newsletter.'), + 'unique_id' => '', + ); + } + + /** + * {@inheritdoc} + */ + protected function blockAccess(AccountInterface $account) { + // Only grant access to users with the 'subscribe to newsletters' permission. + return AccessResult::allowedIfHasPermission($account, 'subscribe to newsletters'); + } + + /** + * {@inheritdoc} + */ + public function blockForm($form, FormStateInterface $form_state) { + $newsletters = simplenews_newsletter_get_visible(); + foreach ($newsletters as $newsletter) { + $options[$newsletter->id()] = $newsletter->name; + } + + $form['newsletters'] = array( + '#type' => 'checkboxes', + '#title' => t('Newsletters'), + '#options' => $options, + '#required' => TRUE, + '#default_value' => $this->configuration['newsletters'], + ); + $form['message'] = array( + '#type' => 'textfield', + '#title' => t('Block message'), + '#size' => 60, + '#maxlength' => 255, + '#default_value' => $this->configuration['message'], + ); + $form['unique_id'] = array( + '#type' => 'textfield', + '#title' => t('Unique ID'), + '#size' => 60, + '#maxlength' => 255, + '#description' => t('Each subscription block must have a unique form ID. If no value is provided, a random ID will be generated. Use this to have a predictable, short ID, e.g. to configure this form use a CAPTCHA.'), + '#default_value' => $this->configuration['unique_id'], + ); + /*if (\Drupal::moduleHandler()->moduleExists('views')) { + $form['link_previous'] = array( + '#type' => 'checkbox', + '#title' => t('Display link to previous issues'), + '#return_value' => 1, + '#default_value' => variable_get('simplenews_block_l_' . $delta, 1), + '#description' => t('Link points to newsletter/newsletter_id, which is provided by the newsletter issue list default view.'), + ); + }*/ + /*if (\Drupal::moduleHandler()->moduleExists('views')) { + $form['rss_feed'] = array( + '#type' => 'checkbox', + '#title' => t('Display RSS-feed icon'), + '#return_value' => 1, + '#default_value' => variable_get('simplenews_block_r_' . $delta, 1), + '#description' => t('Link points to newsletter/feed/newsletter_id, which is provided by the newsletter issue list default view.'), + ); + }*/ + return $form; + } + + /** + * {@inheritdoc} + */ + public function blockSubmit($form, FormStateInterface $form_state) { + $this->configuration['newsletters'] = array_filter($form_state->getValue('newsletters')); + $this->configuration['message'] = $form_state->getValue('message'); + //$this->configuration['link_previous'] = $form_state->getValue('link_previous'); + //$this->configuration['rss_feed'] = $form_state->getValue('rss_feed'); + $this->configuration['unique_id'] = empty($form_state->getValue('unique_id')) ? \Drupal::service('uuid')->generate() : $form_state->getValue('unique_id'); +} + + /** + * {@inheritdoc} + */ + public function build() { + /** @var \Drupal\materio_simplenews\Form\MaterioSubscriptionsBlockForm $form_object */ + $form_object = $this->entityTypeManager->getFormObject('simplenews_subscriber', 'materio_block'); + $form_object->setUniqueId($this->configuration['unique_id']); + $form_object->setNewsletterIds($this->configuration['newsletters']); + $form_object->message = $this->configuration['message']; + + // Set the entity on the form. + if ($user = \Drupal::currentUser()) { + if ($subscriber = simplenews_subscriber_load_by_uid($user->id())) { + $form_object->setEntity($subscriber); + } + else { + $form_object->setEntity(Subscriber::create()->fillFromAccount($user)); + } + } + else { + $form_object->setEntity(Subscriber::create()); + } + + return $this->formBuilder->getForm($form_object); + } + +} diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 8c99f853..63935fd1 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1096,58 +1096,58 @@ div.dialog-off-canvas-main-canvas { body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs { padding-top: 24px !important; } -header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { +header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { margin: 0 auto; } @media only screen and (max-width: 436px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 436px; } } @media only screen and (min-width: 655px) and (max-width: 872px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 654px; } } @media only screen and (min-width: 873px) and (max-width: 1090px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 872px; } } @media only screen and (min-width: 1091px) and (max-width: 1308px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 1090px; } } @media only screen and (min-width: 1309px) and (max-width: 1526px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 1308px; } } @media only screen and (min-width: 1527px) and (max-width: 1744px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 1526px; } } @media only screen and (min-width: 1745px) and (max-width: 1962px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 1744px; } } @media only screen and (min-width: 1963px) and (max-width: 2180px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 1962px; } } @media only screen and (min-width: 2181px) and (max-width: 2398px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 2180px; } } @media only screen and (min-width: 2399px) and (max-width: 2616px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 2398px; } } @media only screen and (min-width: 2617px) and (max-width: 2834px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 2616px; } } @media only screen and (min-width: 2835px) and (max-width: 3052px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 2834px; } } @media only screen and (min-width: 3053px) and (max-width: 3270px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 3052px; } } @media only screen and (min-width: 3271px) and (max-width: 3488px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 3270px; } } @media only screen and (min-width: 3489px) and (max-width: 3706px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 3488px; } } @media only screen and (min-width: 3707px) and (max-width: 3924px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 3706px; } } @media only screen and (min-width: 3925px) and (max-width: 4142px) { - header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper { + header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper { width: 3924px; } } header[role="banner"] { @@ -1607,7 +1607,7 @@ article.node--type-frontpage .node__content > section.home-showrooms { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item { grid-row: 1; opacity: 0; - transition: all 0.7s ease-out; } + transition: all 2s ease-out; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item.active { opacity: 1; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term { @@ -2029,3 +2029,29 @@ article.card { #showrooms article.showroom figure img { max-width: 100%; } +footer[role="contentinfo"] #block-materiosimplenewssubscription form { + display: flex; + flex-flow: row nowrap; + align-items: center; + font-size: 0.756em; } + footer[role="contentinfo"] #block-materiosimplenewssubscription form > * { + margin-right: 0.5em; } + footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-subscriptions { + display: flex; + flex-flow: row nowrap; } + footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-subscriptions > * { + margin-right: 0.5em; + display: flex; + flex-flow: row nowrap; + align-items: center; } + footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-mail-wrapper input[type="email"] { + width: 10em; } + footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-actions--2 input[type="submit"] { + border: none; + background: none; + background-color: #69cdcf; + border-radius: 5px; + color: #fff; + padding: 0.7em 1em; + font-weight: 700; } + diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 0ae715f5..afea55af 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1190,7 +1190,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n props: ['html'],\n // get the html from parent with props\n data: function data() {\n return {\n template: null,\n // compiled template from html used in render\n showrooms: [],\n showroomsOdd: [],\n showroomsEven: [],\n showroomMode: 1,\n showroomInterval: 0,\n showroomI: 0,\n showroomJ: 0\n };\n },\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('Home beforeMount');\n // compile the html src (coming from parent with props or from ajax call)\n if (this.html) {\n // console.log('html', this.html);\n this.template = _vue.default.compile(this.html);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n render: function render(h) {\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n },\n mounted: function mounted() {\n this.initShowroomCarroussel();\n },\n methods: {\n initShowroomCarroussel: function initShowroomCarroussel() {\n console.log(\"startShowroomCarroussel\");\n this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n console.log('showrooms', this.showrooms);\n\n for (var i = 0; i < this.showrooms.length; i++) {\n if (i % 2 === 0) {\n this.showroomsOdd.push(this.showrooms[i]);\n } else {\n this.showroomsEven.push(this.showrooms[i]);\n }\n }\n\n console.log('Odd', this.showroomsOdd);\n console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js\n\n var column_width = 205;\n var column_goutiere = 13;\n var bp = (column_width + column_goutiere) * 7 + 1;\n var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\")); // Register event listener\n\n mediaQuery.addListener(this.checkShowroomMode);\n this.checkShowroomMode(mediaQuery); // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n // console.log('this.showroomInterval', this.showroomInterval);\n // this.switchShowroomCarroussel()\n },\n checkShowroomMode: function checkShowroomMode(mq) {\n // default mode 1\n var newmode = 1;\n\n if (mq.matches) {\n // if mediaquery match switch to mode 2\n newmode = 2;\n }\n\n if (newmode !== this.showroomMode) {\n // if new mode different from old mode\n // reset sowrooms classes\n for (var i = 0; i < this.showrooms.length; i++) {\n this.showrooms[i].classList.remove('active');\n } // record new mode\n\n\n this.showroomMode = newmode; // clear interval\n // if (this.showroomInterval) {\n\n clearInterval(this.showroomInterval);\n this.showroomInterval = 0; // }\n // reset indexes\n\n this.showroomI = 0;\n this.showroomJ = 0;\n } // in any case (re)launch the animation\n\n\n this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n console.log('this.showroomInterval', this.showroomInterval);\n this.switchShowroomCarroussel();\n },\n switchShowroomCarroussel: function switchShowroomCarroussel() {\n // console.log('switchShowroomCarroussel i', $elmts, i);\n if (this.showroomMode === 1) {\n this.showrooms[this.showroomI].classList.add('active');\n this.showrooms[this.showroomI - 1 < 0 ? this.showrooms.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showrooms.length ? 0 : this.showroomI + 1;\n } else {\n this.showroomsOdd[this.showroomI].classList.add('active');\n this.showroomsOdd[this.showroomI - 1 < 0 ? this.showroomsOdd.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showroomsOdd.length ? 0 : this.showroomI + 1;\n this.showroomsEven[this.showroomJ].classList.add('active');\n this.showroomsEven[this.showroomJ - 1 < 0 ? this.showroomsEven.length - 1 : this.showroomJ - 1].classList.remove('active');\n this.showroomJ = this.showroomJ + 1 >= this.showroomsEven.length ? 0 : this.showroomJ + 1;\n }\n },\n onClickLink: function onClickLink(e) {\n console.log(\"onClickLink\", e, this.$router, this.$route);\n var path = null; // find existing router route compared with link href\n\n for (var i = 0; i < this.$router.options.routes.length; i++) {\n if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n if (e.originalTarget.pathname !== this.$route.path) {\n path = e.originalTarget.pathname;\n }\n\n break;\n }\n }\n\n if (path) {\n this.$router.push({\n path: path\n });\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n props: ['html'],\n // get the html from parent with props\n data: function data() {\n return {\n template: null,\n // compiled template from html used in render\n showrooms: [],\n showroomsOdd: [],\n showroomsEven: [],\n showroomMode: 1,\n showroomInterval: 0,\n showroomI: 0,\n showroomJ: 0\n };\n },\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('Home beforeMount');\n // compile the html src (coming from parent with props or from ajax call)\n if (this.html) {\n // console.log('html', this.html);\n this.template = _vue.default.compile(this.html);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n render: function render(h) {\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n },\n mounted: function mounted() {\n this.initShowroomCarroussel();\n },\n methods: {\n initShowroomCarroussel: function initShowroomCarroussel() {\n console.log(\"startShowroomCarroussel\");\n this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n console.log('showrooms', this.showrooms);\n\n for (var i = 0; i < this.showrooms.length; i++) {\n if (i % 2 === 0) {\n this.showroomsOdd.push(this.showrooms[i]);\n } else {\n this.showroomsEven.push(this.showrooms[i]);\n }\n }\n\n console.log('Odd', this.showroomsOdd);\n console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js\n\n var column_width = 205;\n var column_goutiere = 13;\n var bp = (column_width + column_goutiere) * 7 + 1;\n var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\")); // Register event listener\n\n mediaQuery.addListener(this.checkShowroomMode);\n this.checkShowroomMode(mediaQuery); // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n // console.log('this.showroomInterval', this.showroomInterval);\n // this.switchShowroomCarroussel()\n },\n checkShowroomMode: function checkShowroomMode(mq) {\n // default mode 1\n var newmode = 1;\n\n if (mq.matches) {\n // if mediaquery match switch to mode 2\n newmode = 2;\n }\n\n if (newmode !== this.showroomMode) {\n // if new mode different from old mode\n // reset sowrooms classes\n for (var i = 0; i < this.showrooms.length; i++) {\n this.showrooms[i].classList.remove('active');\n } // record new mode\n\n\n this.showroomMode = newmode; // clear interval\n // if (this.showroomInterval) {\n\n clearInterval(this.showroomInterval);\n this.showroomInterval = 0; // }\n // reset indexes\n\n this.showroomI = 0;\n this.showroomJ = 0;\n } // in any case (re)launch the animation\n\n\n this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);\n console.log('this.showroomInterval', this.showroomInterval);\n this.switchShowroomCarroussel();\n },\n switchShowroomCarroussel: function switchShowroomCarroussel() {\n // console.log('switchShowroomCarroussel i', $elmts, i);\n if (this.showroomMode === 1) {\n this.showrooms[this.showroomI].classList.add('active');\n this.showrooms[this.showroomI - 1 < 0 ? this.showrooms.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showrooms.length ? 0 : this.showroomI + 1;\n } else {\n this.showroomsOdd[this.showroomI].classList.add('active');\n this.showroomsOdd[this.showroomI - 1 < 0 ? this.showroomsOdd.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showroomsOdd.length ? 0 : this.showroomI + 1;\n this.showroomsEven[this.showroomJ].classList.add('active');\n this.showroomsEven[this.showroomJ - 1 < 0 ? this.showroomsEven.length - 1 : this.showroomJ - 1].classList.remove('active');\n this.showroomJ = this.showroomJ + 1 >= this.showroomsEven.length ? 0 : this.showroomJ + 1;\n }\n },\n onClickLink: function onClickLink(e) {\n console.log(\"onClickLink\", e, this.$router, this.$route);\n var path = null; // find existing router route compared with link href\n\n for (var i = 0; i < this.$router.options.routes.length; i++) {\n if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n if (e.originalTarget.pathname !== this.$route.path) {\n path = e.originalTarget.pathname;\n }\n\n break;\n }\n }\n\n if (path) {\n this.$router.push({\n path: path\n });\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss index 1153a41e..2d9ea930 100644 --- a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss +++ b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss @@ -172,3 +172,14 @@ main[role="main"]{ } } } + + +// ___ _ +// | __|__ ___| |_ ___ _ _ +// | _/ _ \/ _ \ _/ -_) '_| +// |_|\___/\___/\__\___|_| +footer[role="contentinfo"]{ + >.wrapper{ + @extend %grided-width; + } +} diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 9e78f74d..c0af5249 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -674,11 +674,9 @@ article.node--type-frontpage{ // top:0; left:0; // width:100%; height:100%; // overflow: hidden; - opacity: 0; // transform: translateX(100%); - transition: all 0.7s ease-out; - + transition: all 2s ease-out; &.active{ opacity: 1; // transform: translateX(0); @@ -1319,3 +1317,50 @@ article.card{ } } + + +// ___ _ +// | __|__ ___| |_ ___ _ _ +// | _/ _ \/ _ \ _/ -_) '_| +// |_|\___/\___/\__\___|_| +footer[role="contentinfo"]{ + #block-materiosimplenewssubscription{ + form{ + display: flex; + flex-flow: row nowrap; + align-items: center; + font-size: 0.756em; + >*{ + margin-right: 0.5em; + } + #edit-subscriptions{ + display: flex; + flex-flow: row nowrap; + >*{ + margin-right: 0.5em; + display: flex; + flex-flow: row nowrap; + align-items: center; + } + } + #edit-mail-wrapper{ + input[type="email"]{ + width:10em; + } + } + #edit-actions--2{ + input[type="submit"]{ + border: none; + background: none; + background-color: $color-base; + border-radius: 5px; + color: #fff; + padding: 0.7em 1em; + font-weight: 700; + } + } + } + + + } +} diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue index d1129966..42a923a1 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue @@ -91,7 +91,7 @@ export default { this.showroomJ = 0 } // in any case (re)launch the animation - this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000); + this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000); console.log('this.showroomInterval', this.showroomInterval); this.switchShowroomCarroussel() },