Commit dce29127 authored by git's avatar git Committed by tarekdj

Issue #2147973 by gvso, id_matvey, Gordogost, andrii zahura, naveenvalecha,...

Issue #2147973 by gvso, id_matvey, Gordogost, andrii zahura, naveenvalecha, snap_x: Drupal 8 version
parent 896f854f
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
/*
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%;
}
(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);
<?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);
}
/*
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%;
}
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
name: Scroll to top
description: Scroll to top module.
core: 8.x
type: module
configure: scroll_to_top.form
(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);
scroll_to_top:
version: 1.x
js:
js/scroll_to_top.js: {}
css:
theme:
css/scroll_to_top.css: {}
dependencies:
- core/jquery
scroll_to_top.menu:
title: 'Scroll to top'
description: 'Scroll To Top settings'
parent: system.admin_config_ui
route_name: scroll_to_top.form
......@@ -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
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'
<?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);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment