summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorgit2014-12-07 14:10:22 (GMT)
committertarekdj2014-12-07 14:10:22 (GMT)
commitdce29127b2fede209509f0872bbd8ab3e44518c8 (patch)
treee2566d20a0a22d20f269e8cd6d4a295e8c9c90b7
parent896f854f9c1e00dcc2b4a86a0c443e6a5f16e3d6 (diff)
Issue #2147973 by gvso, id_matvey, Gordogost, andrii zahura, naveenvalecha, snap_x: Drupal 8 version
-rw-r--r--config/install/scroll_to_top.settings.yml7
-rw-r--r--css/scroll_to_top.css60
-rw-r--r--images/up-arrow.png (renamed from up-arrow.png)bin355 -> 355 bytes
-rw-r--r--js/scroll_to_top.js50
-rw-r--r--scroll_to_top.admin.inc65
-rw-r--r--scroll_to_top.css65
-rw-r--r--scroll_to_top.info9
-rw-r--r--scroll_to_top.info.yml5
-rw-r--r--scroll_to_top.js52
-rw-r--r--scroll_to_top.libraries.yml9
-rw-r--r--scroll_to_top.links.menu.yml5
-rw-r--r--scroll_to_top.module107
-rw-r--r--scroll_to_top.routing.yml7
-rw-r--r--src/Form/ScrollToTopForm.php107
14 files changed, 296 insertions, 252 deletions
diff --git a/config/install/scroll_to_top.settings.yml b/config/install/scroll_to_top.settings.yml
new file mode 100644
index 0000000..4f2db20
--- /dev/null
+++ b/config/install/scroll_to_top.settings.yml
@@ -0,0 +1,7 @@
+scroll_to_top_label: 'Back to top'
+scroll_to_top_position: 1
+scroll_to_top_bg_color_hover: '#77777'
+scroll_to_top_bg_color_out: '#CCCCCC'
+scroll_to_top_display_text: true
+scroll_to_top_enable_admin_theme: true
+
diff --git a/css/scroll_to_top.css b/css/scroll_to_top.css
new file mode 100644
index 0000000..60e4369
--- /dev/null
+++ b/css/scroll_to_top.css
@@ -0,0 +1,60 @@
+/*
+Back to top button
+*/
+#back-top {
+ position: fixed;
+ bottom: 10px;
+ margin-left: 20px;
+ z-index:499;
+ /*IE6 hack */
+ _position: absolute;
+ _top:expression(documentElement.scrollTop+body.scrollTop);
+ _margin-top: 500px;
+
+}
+#back-top a, #back-top-prev a {
+ width: 50px;
+ display: block;
+ text-align: center;
+ font: 11px/100% Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ text-decoration: none;
+ color: #bbb;
+ /* background color transition */
+ -webkit-transition: 1s;
+ -moz-transition: 1s;
+ transition: 1s;
+
+}
+#back-top a:hover, #back-top-prev a:hover {
+ color: #000;
+}
+/* arrow icon (span tag) */
+#back-top span#button , #back-top-prev span#button-prev {
+ width: 50px;
+ height: 50px;
+ display: block;
+ margin-bottom: 7px;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ background-image: url('../images/up-arrow.png') ;
+ opacity:0.8;
+ filter:alpha(opacity = 80);
+ /* rounded corners */
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ border-radius: 8px;
+ /* background color transition */
+ -webkit-transition: 1s;
+ -moz-transition: 1s;
+ transition: 1s;
+}
+#back-top a:hover span#button, #back-top-prev a:hover span#button-prev {
+ opacity:1;
+ filter:alpha(opacity = 100);
+}
+#edit-scroll-to-top-preview {
+ float:right;
+ width:100%;
+}
diff --git a/up-arrow.png b/images/up-arrow.png
index fbb79b1..fbb79b1 100644
--- a/up-arrow.png
+++ b/images/up-arrow.png
Binary files differ
diff --git a/js/scroll_to_top.js b/js/scroll_to_top.js
new file mode 100644
index 0000000..dcf25ca
--- /dev/null
+++ b/js/scroll_to_top.js
@@ -0,0 +1,50 @@
+(function ($, Drupal, drupalSettings) {
+
+/**
+* Toggle the visibility of the scroll to top link.
+*/
+ Drupal.behaviors.scroll_to_top = {
+
+ attach: function (context) {
+ // append back to top link top body if it is not
+ var exist = jQuery('#back-top').length; // exist = 0 if element doesn't exist
+ if (exist == 0) { // this test is for fixing the ajax bug
+ $('body').append("<p id='back-top'><a href='#top'><span id='button'></span><span id='link'>" + drupalSettings.label + "</span></a></p>");
+ }
+
+ // Preview function
+ $("#scroll-to-top-form").on('change', 'input', function () {
+ // building the style for preview
+ var style = "<style>#scroll-to-top-prev-container #back-top-prev span#button-prev{ background-color:" + $("#edit-scroll-to-top-bg-color-out").val() + ";} #scroll-to-top-prev-container #back-top-prev span#button-prev:hover{ background-color:" + $("#edit-scroll-to-top-bg-color-hover").val() + " }</style>"
+ // building the html content of preview
+ var html = "<p id='back-top-prev' style='position:relative;'><a href='#top'><span id='button-prev'></span><span id='preview-link'>";
+ // if label enabled display it
+ if ($("#edit-scroll-to-top-display-text").prop('checked')) {
+ html += $("#edit-scroll-to-top-label").val();
+ }
+ html += "</span></a></p>";
+ // update the preview
+ $("#scroll-to-top-prev-container").html(style + html);
+ });
+
+ $("#back-top").hide();
+ $(function () {
+ $(window).scroll(function () {
+ if ($(this).scrollTop() > 100) {
+ $('#back-top').fadeIn();
+ } else {
+ $('#back-top').fadeOut();
+ }
+ });
+
+ // scroll body to 0px on click
+ $('#back-top a').on('click', function () {
+ $('body,html').animate({
+ scrollTop: 0
+ }, 800);
+ return false;
+ });
+ });
+ }
+ };
+})(jQuery, Drupal, drupalSettings);
diff --git a/scroll_to_top.admin.inc b/scroll_to_top.admin.inc
deleted file mode 100644
index 4c634b3..0000000
--- a/scroll_to_top.admin.inc
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-
-/**
- * @file
- * Administration page for scroll to top module
- *
- */
-
-function scroll_to_top_settings() {
-$form = array();
- $form['scroll_to_top_label'] = array(
- '#type' => 'textfield',
- '#title' => t('Label'),
- '#description' => t('label displayed in scroll to top link, default "Back to top".'),
- '#default_value' => variable_get('scroll_to_top_label', t('Back to top')),
- '#size' => 10,
- );
-
- $form['scroll_to_top_position'] = array(
- '#title' => t('Position'),
- '#description' => t('Sroll to top button position'),
- '#type' => 'select',
- '#options' => array(
- 1 => t('right'),
- 2 => t('left'),
- 3 => t('middle'),
- ),
- '#default_value' => variable_get('scroll_to_top_position', 0.5),
- );
- $form['scroll_to_top_bg_color_hover'] = array(
- '#type' => 'textfield',
- '#title' => t('Background color on mouse over.'),
- '#description' => t('Button background color on mouse over default #777777'),
- '#default_value' => variable_get('scroll_to_top_bg_color_hover', '#777777'),
- '#size' => 10,
- '#maxlength' => 7,
- );
- $form['scroll_to_top_bg_color_out'] = array(
- '#type' => 'textfield',
- '#title' => t('Background color on mouse out.'),
- '#description' => t('Button background color on mouse over default #CCCCCC'),
- '#default_value' => variable_get('scroll_to_top_bg_color_out', '#CCCCCC'),
- '#size' => 10,
- '#maxlength' => 7,
- );
- $form['scroll_to_top_display_text'] = array(
- '#type' => 'checkbox',
- '#title' => t('Display label'),
- '#description' => t('Display "BACK TO TOP" text under the button'),
- '#default_value' => variable_get('scroll_to_top_display_text', TRUE),
- );
- $form['scroll_to_top_enable_admin_theme'] = array(
- '#type' => 'checkbox',
- '#title' => t('Enable on administration theme.'),
- '#description' => t('Enable scroll to top button on administartion theme.'),
- '#default_value' => variable_get('scroll_to_top_enable_admin_theme', TRUE),
- );
- $form['scroll_to_top_preview'] = array(
- '#type' => 'item',
- '#title' => t('Preview'),
- '#markup' => '<div id="scroll-to-top-prev-container">' . t('Change a setting value to see a preview. "Position" and "enable on admin theme" not included.') . '</div>',
- );
- return system_settings_form($form);
-}
-
diff --git a/scroll_to_top.css b/scroll_to_top.css
deleted file mode 100644
index 3622b2f..0000000
--- a/scroll_to_top.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-Back to top button
-*/
-#back-top {
- position: fixed;
- bottom: 10px;
- margin-left: 20px;
- z-index:499;
- /*IE6 hack */
- _position: absolute;
- _top:expression(documentElement.scrollTop+body.scrollTop);
- _margin-top: 500px;
-
-}
-body {
- /*IE6 hack */
- _background: url(null) fixed ;
-}
-#back-top a, #back-top-prev a{
- width: 50px;
- display: block;
- text-align: center;
- font: 11px/100% Arial, Helvetica, sans-serif;
- text-transform: uppercase;
- text-decoration: none;
- color: #bbb;
- /* background color transition */
- -webkit-transition: 1s;
- -moz-transition: 1s;
- transition: 1s;
-
-}
-#back-top a:hover, #back-top-prev a:hover {
- color: #000;
-}
-/* arrow icon (span tag) */
-#back-top span#button , #back-top-prev span#button-prev{
- width: 50px;
- height: 50px;
- display: block;
- margin-bottom: 7px;
- background-color: #ddd;
- background-position: center center;
- background-repeat: no-repeat;
-
- background-image: url('up-arrow.png') ;
- opacity:0.8;
- filter:alpha(opacity = 80);
- /* rounded corners */
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- /* background color transition */
- -webkit-transition: 1s;
- -moz-transition: 1s;
- transition: 1s;
-}
-#back-top a:hover span#button, #back-top-prev a:hover span#button-prev {
- opacity:1;
- filter:alpha(opacity = 100);
-}
-#edit-scroll-to-top-preview{
-float:right;
-width:100%;
-}
diff --git a/scroll_to_top.info b/scroll_to_top.info
deleted file mode 100644
index 6491000..0000000
--- a/scroll_to_top.info
+++ /dev/null
@@ -1,9 +0,0 @@
-name = Scroll to top
-description = Scroll to top module.
-package = Other
-core = 7.x
-files[] = scroll_to_top.css
-files[] = scroll_to_top.js
-
-configure = admin/config/user-interface/scrolltotop
-
diff --git a/scroll_to_top.info.yml b/scroll_to_top.info.yml
new file mode 100644
index 0000000..b0f8112
--- /dev/null
+++ b/scroll_to_top.info.yml
@@ -0,0 +1,5 @@
+name: Scroll to top
+description: Scroll to top module.
+core: 8.x
+type: module
+configure: scroll_to_top.form
diff --git a/scroll_to_top.js b/scroll_to_top.js
deleted file mode 100644
index 42ded55..0000000
--- a/scroll_to_top.js
+++ /dev/null
@@ -1,52 +0,0 @@
-(function($){
-/**
- * Toggle the visibility of the scroll to top link.
- */
-
-Drupal.behaviors.scroll_to_top = {
- attach: function (context, settings) {
- // append back to top link top body if it is not
- var exist= jQuery('#back-top').length; // exist = 0 if element doesn't exist
- if(exist == 0){ // this test is for fixing the ajax bug
- $("body").append("<p id='back-top'><a href='#top'><span id='button'></span><span id='link'>" + settings.scroll_to_top.label + "</span></a></p>");
- }
- // Preview function
- $("input").change(function () {
- // building the style for preview
- var style="<style>#scroll-to-top-prev-container #back-top-prev span#button-prev{ background-color:"+$("#edit-scroll-to-top-bg-color-out").val()+";} #scroll-to-top-prev-container #back-top-prev span#button-prev:hover{ background-color:"+$("#edit-scroll-to-top-bg-color-hover").val()+" }</style>"
- // building the html content of preview
- var html="<p id='back-top-prev' style='position:relative;'><a href='#top'><span id='button-prev'></span><span id='link'>";
- // if label enabled display it
- if($("#edit-scroll-to-top-display-text").attr('checked')){
- html+=$("#edit-scroll-to-top-label").val();
- }
- html+="</span></a></p>";
- // update the preview
- $("#scroll-to-top-prev-container").html(style+html);
- });
- $("#back-top").hide();
- $(function () {
- $(window).scroll(function () {
- // Adding IE8 support
- var scrollTop = 0;
- if (document.documentElement && document.documentElement.scrollTop) {
- scrollTop = document.documentElement.scrollTop;
- }
- if ($(this).scrollTop() > 100 || scrollTop > 100) {
- $('#back-top').fadeIn();
- } else {
- $('#back-top').fadeOut();
- }
- });
-
- // scroll body to 0px on click
- $('#back-top a').click(function () {
- $('body,html').animate({
- scrollTop: 0
- }, 800);
- return false;
- });
- });
- }
-};
-})(jQuery);
diff --git a/scroll_to_top.libraries.yml b/scroll_to_top.libraries.yml
new file mode 100644
index 0000000..ba517be
--- /dev/null
+++ b/scroll_to_top.libraries.yml
@@ -0,0 +1,9 @@
+scroll_to_top:
+ version: 1.x
+ js:
+ js/scroll_to_top.js: {}
+ css:
+ theme:
+ css/scroll_to_top.css: {}
+ dependencies:
+ - core/jquery
diff --git a/scroll_to_top.links.menu.yml b/scroll_to_top.links.menu.yml
new file mode 100644
index 0000000..d1c144c
--- /dev/null
+++ b/scroll_to_top.links.menu.yml
@@ -0,0 +1,5 @@
+scroll_to_top.menu:
+ title: 'Scroll to top'
+ description: 'Scroll To Top settings'
+ parent: system.admin_config_ui
+ route_name: scroll_to_top.form
diff --git a/scroll_to_top.module b/scroll_to_top.module
index 2152381..d0a0c0f 100644
--- a/scroll_to_top.module
+++ b/scroll_to_top.module
@@ -6,65 +6,50 @@
*/
/**
- * Implementation of hook_init().
+ * Implementation of hook_preprocess_page().
*/
-function scroll_to_top_init() {
-global $theme;
- if (variable_get('scroll_to_top_enable_admin_theme', TRUE)==TRUE || (variable_get('scroll_to_top_enable_admin_theme', TRUE)==FALSE && ($theme != variable_get('admin_theme')))) {
- drupal_add_css(drupal_get_path('module', 'scroll_to_top') . '/scroll_to_top.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));
- drupal_add_js(drupal_get_path('module', 'scroll_to_top') . '/scroll_to_top.js');
- drupal_add_js(array('scroll_to_top' => array('label' => t(variable_get('scroll_to_top_label', 'Back to top')))), 'setting');
-
- //building the css style
- $position = "";
- // Button position
- if (variable_get('scroll_to_top_position', 1)==1) {
- $position = "#back-top { right:40px; }";
- }
- if (variable_get('scroll_to_top_position', 1)==3) {
- $position = "#back-top { left:50%;margin:0px;}";
- }
- // Display label
- if (variable_get('scroll_to_top_display_text', TRUE)==FALSE) {
- $display = "span#link {display : none;}";
- }
- else {
- $display = "";
- }
- // background color on hover
- $bgcolor = "#back-top span#button { background-color: " . variable_get('scroll_to_top_bg_color_out', '#CCCCCC') . ";}";
- $bgcolor .= " #back-top span#button:hover {opacity:1;filter:alpha(opacity = 1);background-color: " . variable_get('scroll_to_top_bg_color_hover', '#777777') . ";}";
- $css = $position;
- $css .= $bgcolor;
- $css .= $display;
- drupal_add_css($css, 'inline');
- }
-}
-
- /**
- * Implements hook_menu().
- */
-function scroll_to_top_menu() {
- $items = array();
-
- $items['admin/config/user-interface/scrolltotop'] = array(
- 'title' => 'Scroll to top',
- 'description' => 'Scroll To Top settings',
- 'page callback' => 'drupal_get_form',
- 'page arguments' => array('scroll_to_top_settings'),
- 'access arguments' => array('administer scroll to top'),
- 'file' => 'scroll_to_top.admin.inc',
- 'type' => MENU_NORMAL_ITEM,
- );
-
- return $items;
-}
-
-function scroll_to_top_permission() {
- return array(
- 'administer scroll to top' => array(
- 'title' => t('Administer scroll to top'),
- 'description' => t('Perform administration tasks for scroll to top.'),
- ),
- );
-} \ No newline at end of file
+function scroll_to_top_preprocess_page(&$variables) {
+
+ $theme = \Drupal::theme()->getActiveTheme()->getName();
+ $admin_theme = \Drupal::config('system.theme')->get('admin');
+
+ $config = \Drupal::config('scroll_to_top.settings');
+
+ if( $config->get('scroll_to_top_enable_admin_theme') == TRUE || ($config->get('scroll_to_top_enable_admin_theme') == FALSE && ($theme != $admin_theme ))) {
+
+ $variables['#attached']['library'][] = 'scroll_to_top/scroll_to_top';
+
+ //building the css style
+ $position = "";
+ // Button position
+ if ($config->get('scroll_to_top_position', 1) == 1) {
+ $position = "#back-top { right:40px; }";
+ }
+
+ if ( $config->get('scroll_to_top_position') == 3) {
+ $position = $position = "#back-top { left:50%;margin:0px;}";
+ }
+
+ // Display label
+ if ($config->get('scroll_to_top_display_text') == FALSE) {
+ $display = "span#link {display : none;}";
+ } else {
+ $display = "";
+ }
+
+ // background color on hover
+ $bgcolor = "#back-top span#button { background-color: " . $config->get('scroll_to_top_bg_color_out') . ";}";
+ $bgcolor .= " #back-top span#button:hover {opacity:1;filter:alpha(opacity = 1);background-color: " . $config->get('scroll_to_top_bg_color_hover') . ";}";
+
+ $css = $position;
+ $css .= $bgcolor;
+ $css .= $display;
+
+ $variables['#attached']['css'][] = array( 'data' => $css, 'type' => 'inline');
+ $variables['#attached']['js'][] = array('type' => 'setting', 'data' => array('label' => t($config->get( 'scroll_to_top_label'))));
+
+
+ } // end if
+
+} // end scroll_to_top_page_build
+
diff --git a/scroll_to_top.routing.yml b/scroll_to_top.routing.yml
new file mode 100644
index 0000000..0ad0b96
--- /dev/null
+++ b/scroll_to_top.routing.yml
@@ -0,0 +1,7 @@
+scroll_to_top.form:
+ path: '/admin/config/user-interface/scrolltotop'
+ defaults:
+ _form: '\Drupal\scroll_to_top\Form\ScrollToTopForm'
+ _title: 'Scroll to top'
+ requirements:
+ _permission: 'access administration pages'
diff --git a/src/Form/ScrollToTopForm.php b/src/Form/ScrollToTopForm.php
new file mode 100644
index 0000000..5aa08de
--- /dev/null
+++ b/src/Form/ScrollToTopForm.php
@@ -0,0 +1,107 @@
+<?php
+
+/**
+* @file
+* Contains Drupal\scroll_to_top\Form\ScrollToTopForm
+*/
+
+namespace Drupal\scroll_to_top\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+class ScrollToTopForm extends ConfigFormBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getFormId() {
+ return 'scroll_to_top_form';
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function submitForm(array &$form, FormStateInterface $form_state) {
+
+ parent::submitForm($form, $form_state);
+
+ // Get the config object.
+ $config = $this->config('scroll_to_top.settings');
+
+ $label = $form_state->getValue('scroll_to_top_label');
+ $position = $form_state->getValue('scroll_to_top_position');
+ $bg_color_hover = $form_state->getValue('scroll_to_top_bg_color_hover');
+ $bg_color_out = $form_state->getValue('scroll_to_top_bg_color_out');
+ $display_text = $form_state->getValue('scroll_to_top_display_text');
+ $enable_admin_theme = $form_state->getValue('scroll_to_top_enable_admin_theme');
+
+ // Set the values the user submitted in the form.
+ $config->set('scroll_to_top_label', $label)
+ ->set('scroll_to_top_position', $position)
+ ->set('scroll_to_top_bg_color_hover', $bg_color_hover)
+ ->set('scroll_to_top_bg_color_out', $bg_color_out)
+ ->set('scroll_to_top_display_text', $display_text)
+ ->set('scroll_to_top_enable_admin_theme', $enable_admin_theme)
+ ->save();
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function buildForm(array $form, FormStateInterface $form_state) {
+
+ $config = $this->config('scroll_to_top.settings');
+
+ $form['scroll_to_top_label'] = array(
+ '#type' => 'textfield',
+ '#title' => $this->t('Label'),
+ '#description' => $this->t('label displayed in scroll to top link, default "Back to top".'),
+ '#default_value' => $this->t($config->get('scroll_to_top_label')),
+ '#size' => 10,
+ );
+ $form['scroll_to_top_position'] = array(
+ '#title' => $this->t( 'Position' ),
+ '#description' => $this->t('Sroll to top button position'),
+ '#type' => 'select',
+ '#options' => array(
+ 1 => $this->t('right'),
+ 2 => $this->t('left'),
+ 3 => $this->t('middle'),
+ ),
+ '#default_value' => $config->get('scroll_to_top_position'),
+ );
+
+ $form['scroll_to_top_bg_color_hover'] = array(
+ '#type' => 'color',
+ '#title' => $this->t('Background color on mouse over.'),
+ '#description' => $this->t('Button background color on mouse over default #006595'),
+ '#default_value' => $config->get('scroll_to_top_bg_color_hover'),
+ );
+ $form['scroll_to_top_bg_color_out'] = array(
+ '#type' => 'color',
+ '#title' => $this->t('Background color on mouse out.'),
+ '#description' => $this->t('Button background color on mouse over default #CCCCCC'),
+ '#default_value' => $config->get('scroll_to_top_bg_color_out'),
+ );
+ $form['scroll_to_top_display_text'] = array(
+ '#type' => 'checkbox',
+ '#title' => $this->t('Display label'),
+ '#description' => $this->t('Display "BACK TO TOP" text under the button'),
+ '#default_value' => $config->get('scroll_to_top_display_text'),
+ );
+ $form['scroll_to_top_enable_admin_theme'] = array(
+ '#type' => 'checkbox',
+ '#title' => $this->t('Enable on administration theme.'),
+ '#description' => $this->t('Enable scroll to top button on administartion theme.'),
+ '#default_value' => $config->get('scroll_to_top_enable_admin_theme'),
+ );
+ $form['scroll_to_top_preview'] = array(
+ '#type' => 'item',
+ '#title' => $this->t('Preview'),
+ '#markup' => '<div id="scroll-to-top-prev-container">' . $this->t('Change a setting value to see a preview. "Position" and "enable on admin theme" not included.') . '</div>',
+ );
+
+ return parent::buildForm($form, $form_state);
+ }
+}