MDL-61866 tool_policy: Add readme_moodle.txt file and reorganise styles.css

- Review changes made in jquery-eu-cookie-law-popup.js, for minimising them
(add eslint-disable to disable checking)
- Reorganise styles.css to separate CSS code from jquery-eu-cookie-law-popup
to policy one.
- Create readme_moodle.txt file, with instructions for updating the
jquery-eu-cookie-law-popup lib.

Part of MDL-61864
This commit is contained in:
Sara Arjona 2018-04-11 09:10:25 +08:00 committed by Marina Glancy
parent cc3790d0ea
commit 3f9b276b97
3 changed files with 344 additions and 291 deletions

View File

@ -1,261 +1,254 @@
/**
*
* JQUERY EU COOKIE LAW POPUPS
* version 1.0.1
*
* Code on Github:
* https://github.com/wimagguc/jquery-eu-cookie-law-popup
*
* To see a live demo, go to:
* http://www.wimagguc.com/2015/03/jquery-eu-cookie-law-popup/
*
* by Richard Dancsi
* http://www.wimagguc.com/
*
*/
define(
['jquery'],
function($) {
// for ie9 doesn't support debug console >>>
if (!window.console) {
window.console = {};
}
if (!window.console.log) {
window.console.log = function () {
};
}
// ^^^
$.fn.euCookieLawPopup = (function() {
var _self = this;
///////////////////////////////////////////////////////////////////////////////////////////////
// PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////
_self.params = {
cookiePolicyUrl : 'http://www.wimagguc.com/?cookie-policy',
popupPosition : 'top',
colorStyle : 'default',
compactStyle : false,
popupTitle : 'This website is using cookies',
popupText : 'We use cookies to ensure that we give you the best experience on our website. ' +
'If you continue without changing your settings, we\'ll assume that you are happy to ' +
'receive all cookies on this website.',
buttonContinueTitle : 'Continue',
buttonLearnmoreTitle : 'Learn more',
buttonLearnmoreOpenInNewWindow : true,
agreementExpiresInDays : 30,
autoAcceptCookiePolicy : false,
htmlMarkup : null
};
///////////////////////////////////////////////////////////////////////////////////////////////
// VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////
_self.vars = {
INITIALISED : false,
HTML_MARKUP : null,
COOKIE_NAME : 'EU_COOKIE_LAW_CONSENT'
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATE FUNCTIONS FOR MANIPULATING DATA ////////////////////////////////////////////////////
// Overwrite default parameters if any of those is present
var parseParameters = function(object, markup, settings) {
if (object) {
var className = $(object).attr('class') ? $(object).attr('class') : '';
if (className.indexOf('eupopup-top') > -1) {
_self.params.popupPosition = 'top';
}
else if (className.indexOf('eupopup-fixedtop') > -1) {
_self.params.popupPosition = 'fixedtop';
}
else if (className.indexOf('eupopup-bottomright') > -1) {
_self.params.popupPosition = 'bottomright';
}
else if (className.indexOf('eupopup-bottomleft') > -1) {
_self.params.popupPosition = 'bottomleft';
}
else if (className.indexOf('eupopup-bottom') > -1) {
_self.params.popupPosition = 'bottom';
}
else if (className.indexOf('eupopup-block') > -1) {
_self.params.popupPosition = 'block';
}
if (className.indexOf('eupopup-color-default') > -1) {
_self.params.colorStyle = 'default';
}
else if (className.indexOf('eupopup-color-inverse') > -1) {
_self.params.colorStyle = 'inverse';
}
if (className.indexOf('eupopup-style-compact') > -1) {
_self.params.compactStyle = true;
}
}
if (markup) {
_self.params.htmlMarkup = markup;
}
if (settings) {
if (typeof settings.cookiePolicyUrl !== 'undefined') {
_self.params.cookiePolicyUrl = settings.cookiePolicyUrl;
}
if (typeof settings.popupPosition !== 'undefined') {
_self.params.popupPosition = settings.popupPosition;
}
if (typeof settings.colorStyle !== 'undefined') {
_self.params.colorStyle = settings.colorStyle;
}
if (typeof settings.popupTitle !== 'undefined') {
_self.params.popupTitle = settings.popupTitle;
}
if (typeof settings.popupText !== 'undefined') {
_self.params.popupText = settings.popupText;
}
if (typeof settings.buttonContinueTitle !== 'undefined') {
_self.params.buttonContinueTitle = settings.buttonContinueTitle;
}
if (typeof settings.buttonLearnmoreTitle !== 'undefined') {
_self.params.buttonLearnmoreTitle = settings.buttonLearnmoreTitle;
}
if (typeof settings.buttonLearnmoreOpenInNewWindow !== 'undefined') {
_self.params.buttonLearnmoreOpenInNewWindow = settings.buttonLearnmoreOpenInNewWindow;
}
if (typeof settings.agreementExpiresInDays !== 'undefined') {
_self.params.agreementExpiresInDays = settings.agreementExpiresInDays;
}
if (typeof settings.autoAcceptCookiePolicy !== 'undefined') {
_self.params.autoAcceptCookiePolicy = settings.autoAcceptCookiePolicy;
}
if (typeof settings.htmlMarkup !== 'undefined') {
_self.params.htmlMarkup = settings.htmlMarkup;
}
}
};
var createHtmlMarkup = function() {
if (_self.params.htmlMarkup) {
return _self.params.htmlMarkup;
}
var html =
'<div class="eupopup-container' +
' eupopup-container-' + _self.params.popupPosition +
(_self.params.compactStyle ? ' eupopup-style-compact' : '') +
' eupopup-color-' + _self.params.colorStyle + '">' +
'<div class="eupopup-head">' + _self.params.popupTitle + '</div>' +
'<div class="eupopup-body">' + _self.params.popupText + '</div>' +
'<div class="eupopup-buttons">' +
'<a href="#" class="eupopup-button eupopup-button_1">' + _self.params.buttonContinueTitle + '</a>' +
'<a href="' + _self.params.cookiePolicyUrl + '"' +
(_self.params.buttonLearnmoreOpenInNewWindow ? ' target=_blank ' : '') +
' class="eupopup-button eupopup-button_2">' + _self.params.buttonLearnmoreTitle + '</a>' +
'<div class="clearfix"></div>' +
'</div>' +
'<a href="#" class="eupopup-closebutton">x</a>' +
'</div>';
return html;
};
// Storing the consent in a cookie
var setUserAcceptsCookies = function(consent) {
var d = new Date();
var expiresInDays = _self.params.agreementExpiresInDays * 24 * 60 * 60 * 1000;
d.setTime( d.getTime() + expiresInDays );
var expires = "expires=" + d.toGMTString();
document.cookie = _self.vars.COOKIE_NAME + '=' + consent + "; " + expires + ";path=/";
$(document).trigger("user_cookie_consent_changed", {'consent' : consent});
};
// Let's see if we have a consent cookie already
var userAlreadyAcceptedCookies = function() {
var userAcceptedCookies = false;
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var c = cookies[i].trim();
if (c.indexOf(_self.vars.COOKIE_NAME) == 0) {
userAcceptedCookies = c.substring(_self.vars.COOKIE_NAME.length + 1, c.length);
}
}
return userAcceptedCookies;
};
var hideContainer = function() {
// $('.eupopup-container').slideUp(200);
$('.eupopup-container').animate({
opacity: 0,
height: 0
}, 200, function() {
$('.eupopup-container').hide(0);
});
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PUBLIC FUNCTIONS //////////////////////////////////////////////////////////////////////////
var publicfunc = {
// INITIALIZE EU COOKIE LAW POPUP /////////////////////////////////////////////////////////
init : function(settings) {
parseParameters(
$(".eupopup").first(),
$(".eupopup-markup").html(),
settings);
// No need to display this if user already accepted the policy
if (userAlreadyAcceptedCookies()) {
return;
}
// We should initialise only once
if (_self.vars.INITIALISED) {
return;
}
_self.vars.INITIALISED = true;
// Markup and event listeners >>>
_self.vars.HTML_MARKUP = createHtmlMarkup();
if ($('.eupopup-block').length > 0) {
$('.eupopup-block').append(_self.vars.HTML_MARKUP);
} else {
$('BODY').append(_self.vars.HTML_MARKUP);
}
$('.eupopup-button_1').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
$('.eupopup-closebutton').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
// ^^^ Markup and event listeners
// Ready to start!
$('.eupopup-container').show();
// In case it's alright to just display the message once
if (_self.params.autoAcceptCookiePolicy) {
setUserAcceptsCookies(true);
}
}
};
return publicfunc;
});
});
/**
*
* JQUERY EU COOKIE LAW POPUPS
* version 1.0.1
*
* Code on Github:
* https://github.com/wimagguc/jquery-eu-cookie-law-popup
*
* To see a live demo, go to:
* http://www.wimagguc.com/2015/03/jquery-eu-cookie-law-popup/
*
* by Richard Dancsi
* http://www.wimagguc.com/
*
*/
define(
['jquery'],
function($) {
// for ie9 doesn't support debug console >>>
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
// ^^^
$.fn.euCookieLawPopup = (function() {
var _self = this;
///////////////////////////////////////////////////////////////////////////////////////////////
// PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////
_self.params = {
cookiePolicyUrl : 'http://www.wimagguc.com/?cookie-policy',
popupPosition : 'top',
colorStyle : 'default',
compactStyle : false,
popupTitle : 'This website is using cookies',
popupText : 'We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we\'ll assume that you are happy to receive all cookies on this website.',
buttonContinueTitle : 'Continue',
buttonLearnmoreTitle : 'Learn&nbsp;more',
buttonLearnmoreOpenInNewWindow : true,
agreementExpiresInDays : 30,
autoAcceptCookiePolicy : false,
htmlMarkup : null
};
///////////////////////////////////////////////////////////////////////////////////////////////
// VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////
_self.vars = {
INITIALISED : false,
HTML_MARKUP : null,
COOKIE_NAME : 'EU_COOKIE_LAW_CONSENT'
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATE FUNCTIONS FOR MANIPULATING DATA ////////////////////////////////////////////////////
// Overwrite default parameters if any of those is present
var parseParameters = function(object, markup, settings) {
if (object) {
var className = $(object).attr('class') ? $(object).attr('class') : '';
if (className.indexOf('eupopup-top') > -1) {
_self.params.popupPosition = 'top';
}
else if (className.indexOf('eupopup-fixedtop') > -1) {
_self.params.popupPosition = 'fixedtop';
}
else if (className.indexOf('eupopup-bottomright') > -1) {
_self.params.popupPosition = 'bottomright';
}
else if (className.indexOf('eupopup-bottomleft') > -1) {
_self.params.popupPosition = 'bottomleft';
}
else if (className.indexOf('eupopup-bottom') > -1) {
_self.params.popupPosition = 'bottom';
}
else if (className.indexOf('eupopup-block') > -1) {
_self.params.popupPosition = 'block';
}
if (className.indexOf('eupopup-color-default') > -1) {
_self.params.colorStyle = 'default';
}
else if (className.indexOf('eupopup-color-inverse') > -1) {
_self.params.colorStyle = 'inverse';
}
if (className.indexOf('eupopup-style-compact') > -1) {
_self.params.compactStyle = true;
}
}
if (markup) {
_self.params.htmlMarkup = markup;
}
if (settings) {
if (typeof settings.cookiePolicyUrl !== 'undefined') {
_self.params.cookiePolicyUrl = settings.cookiePolicyUrl;
}
if (typeof settings.popupPosition !== 'undefined') {
_self.params.popupPosition = settings.popupPosition;
}
if (typeof settings.colorStyle !== 'undefined') {
_self.params.colorStyle = settings.colorStyle;
}
if (typeof settings.popupTitle !== 'undefined') {
_self.params.popupTitle = settings.popupTitle;
}
if (typeof settings.popupText !== 'undefined') {
_self.params.popupText = settings.popupText;
}
if (typeof settings.buttonContinueTitle !== 'undefined') {
_self.params.buttonContinueTitle = settings.buttonContinueTitle;
}
if (typeof settings.buttonLearnmoreTitle !== 'undefined') {
_self.params.buttonLearnmoreTitle = settings.buttonLearnmoreTitle;
}
if (typeof settings.buttonLearnmoreOpenInNewWindow !== 'undefined') {
_self.params.buttonLearnmoreOpenInNewWindow = settings.buttonLearnmoreOpenInNewWindow;
}
if (typeof settings.agreementExpiresInDays !== 'undefined') {
_self.params.agreementExpiresInDays = settings.agreementExpiresInDays;
}
if (typeof settings.autoAcceptCookiePolicy !== 'undefined') {
_self.params.autoAcceptCookiePolicy = settings.autoAcceptCookiePolicy;
}
if (typeof settings.htmlMarkup !== 'undefined') {
_self.params.htmlMarkup = settings.htmlMarkup;
}
}
};
var createHtmlMarkup = function() {
if (_self.params.htmlMarkup) {
return _self.params.htmlMarkup;
}
var html =
'<div class="eupopup-container' +
' eupopup-container-' + _self.params.popupPosition +
(_self.params.compactStyle ? ' eupopup-style-compact' : '') +
' eupopup-color-' + _self.params.colorStyle + '">' +
'<div class="eupopup-head">' + _self.params.popupTitle + '</div>' +
'<div class="eupopup-body">' + _self.params.popupText + '</div>' +
'<div class="eupopup-buttons">' +
'<a href="#" class="eupopup-button eupopup-button_1">' + _self.params.buttonContinueTitle + '</a>' +
'<a href="' + _self.params.cookiePolicyUrl + '"' +
(_self.params.buttonLearnmoreOpenInNewWindow ? ' target=_blank ' : '') +
' class="eupopup-button eupopup-button_2">' + _self.params.buttonLearnmoreTitle + '</a>' +
'<div class="clearfix"></div>' +
'</div>' +
'<a href="#" class="eupopup-closebutton">x</a>' +
'</div>';
return html;
};
// Storing the consent in a cookie
var setUserAcceptsCookies = function(consent) {
var d = new Date();
var expiresInDays = _self.params.agreementExpiresInDays * 24 * 60 * 60 * 1000;
d.setTime( d.getTime() + expiresInDays );
var expires = "expires=" + d.toGMTString();
document.cookie = _self.vars.COOKIE_NAME + '=' + consent + "; " + expires + ";path=/";
$(document).trigger("user_cookie_consent_changed", {'consent' : consent});
};
// Let's see if we have a consent cookie already
var userAlreadyAcceptedCookies = function() {
var userAcceptedCookies = false;
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var c = cookies[i].trim();
if (c.indexOf(_self.vars.COOKIE_NAME) == 0) {
userAcceptedCookies = c.substring(_self.vars.COOKIE_NAME.length + 1, c.length);
}
}
return userAcceptedCookies;
};
var hideContainer = function() {
// $('.eupopup-container').slideUp(200);
$('.eupopup-container').animate({
opacity: 0,
height: 0
}, 200, function() {
$('.eupopup-container').hide(0);
});
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PUBLIC FUNCTIONS //////////////////////////////////////////////////////////////////////////
var publicfunc = {
// INITIALIZE EU COOKIE LAW POPUP /////////////////////////////////////////////////////////
init : function(settings) {
parseParameters(
$(".eupopup").first(),
$(".eupopup-markup").html(),
settings);
// No need to display this if user already accepted the policy
if (userAlreadyAcceptedCookies()) {
return;
}
// We should initialise only once
if (_self.vars.INITIALISED) {
return;
}
_self.vars.INITIALISED = true;
// Markup and event listeners >>>
_self.vars.HTML_MARKUP = createHtmlMarkup();
if ($('.eupopup-block').length > 0) {
$('.eupopup-block').append(_self.vars.HTML_MARKUP);
} else {
$('BODY').append(_self.vars.HTML_MARKUP);
}
$('.eupopup-button_1').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
$('.eupopup-closebutton').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
// ^^^ Markup and event listeners
// Ready to start!
$('.eupopup-container').show();
// In case it's alright to just display the message once
if (_self.params.autoAcceptCookiePolicy) {
setUserAcceptsCookies(true);
}
}
};
return publicfunc;
});
});

View File

@ -0,0 +1,56 @@
jQuery EU Cookie Law popups 1.0.1
-------------
https://github.com/wimagguc/jquery-eu-cookie-law-popup
Instructions to import 'jQuery EU Cookie Law popups' into Moodle:
1. Download the latest release from https://github.com/wimagguc/jquery-eu-cookie-law-popup
2. Copy 'js/jquery-eu-cookie-law-popup.js' into 'amd/src/jquery-eu-cookie-law-popup.js':
2.a. Replace jquery reference
------------------
(function($) {
------------------
to
------------------
define(
['jquery'],
function($) {
------------------
2.b. Remove initialisation code. It will be added and configured only in the pages where is needed
------------------
$(document).ready( function() {
if ($(".eupopup").length > 0) {
$(document).euCookieLawPopup().init({
'info' : 'YOU_CAN_ADD_MORE_SETTINGS_HERE',
'popupTitle' : 'This website is using cookies. ',
'popupText' : 'We use them to give you the best experience. If you continue using our website, we\'ll assume that you are happy to receive all cookies on this website.'
});
}
------------------
2.c. Remove code
------------------
$(document).bind("user_cookie_consent_changed", function(event, object) {
console.log("User cookie consent changed: " + $(object).attr('consent') );
});
}(jQuery));
------------------
3. Copy the following styles from 'css/jquery-eu-cookie-law-popup.css' into the
"jquery-eu-cookie-law-popup styles" section in 'styles.css':
.eupopup-container
.eupopup-container-bottom
.eupopup-closebutton
.eupopup-buttons
.eupopup-button
.eupopup-button:hover
.eupopup-button:focus
Add "tool_policy styles" to the end of the styles file.
4. Execute grunt to compile js
grunt js

View File

@ -1,16 +1,4 @@
/* eupopup styles */
.eupopup-body li {
display: inline;
}
.eupopup-body li:before {
content: ", ";
}
.eupopup-body li:first-child:before {
content: "";
}
/* jquery-eu-cookie-law-popup styles */
.eupopup-container {
background-color: rgba(25, 25, 25, 0.9);
color: #efefef;
@ -42,6 +30,38 @@
padding: 5px 10px;
}
.eupopup-buttons {
padding: 7px 0 5px 0;
}
.eupopup-button {
margin: 0 10px;
}
.eupopup-button:hover,
.eupopup-button:focus {
text-decoration: underline;
color: #f6a21d;
}
/* tool_policy styles */
.eupopup-body li {
display: inline;
}
.eupopup-body li:before {
content: ", ";
}
.eupopup-body li:first-child:before {
content: "";
}
.eupopup-body ul {
padding: 0;
margin: 0 0 3px;
}
.eupopup-closebutton:hover,
.eupopup-closebutton:active {
text-decoration: none;
@ -53,15 +73,6 @@
padding: 7px;
}
.eupopup-body ul {
padding: 0;
margin: 0 0 3px;
}
.eupopup-buttons {
padding: 7px 0 5px 0;
}
.eupopup-button_1 {
font-weight: bold;
font-size: 14px;
@ -72,13 +83,6 @@
}
.eupopup-button {
margin: 0 10px;
color: #f6a21d;
}
.eupopup-button:hover,
.eupopup-button:focus {
text-decoration: underline;
color: #f6a21d;
}
@ -88,5 +92,5 @@
}
#page-admin-tool-policy-acceptances .colselect {
max-width: 15px;
width: 35px;
}