View | Details | Raw Unified | Return to bug 27378
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss (+49 lines)
Lines 4698-4703 div .suggestion_note { Link Here
4698
    }
4698
    }
4699
}
4699
}
4700
4700
4701
/* Cookie consent bar */
4702
#cookieConsentBar {
4703
    display: none;
4704
    padding: 20px;
4705
    position: fixed;
4706
    bottom: 0;
4707
    left: 0;
4708
    right: 0;
4709
    background: rgba(0,0,0,0.7);
4710
    color: rgba(255,255,255,0.9);
4711
    z-index: 1;
4712
    a:link, a:visited {
4713
        color: #d7ebff;
4714
    }
4715
    #consentButtons {
4716
        margin-top: 10px;
4717
        text-align: right;
4718
    }
4719
    button:not(:last-child) {
4720
        margin-right: 10px;
4721
    }
4722
}
4723
4724
/* Cookie consent modal */
4725
#cookieConsentModal {
4726
    .modal-dialog {
4727
        width: 700px;
4728
    }
4729
    .consentModalItem {
4730
        display: flex;
4731
        align-items: center;
4732
        border: 1px solid #ccc;
4733
        padding: 10px 20px;
4734
        border-radius: 5px;
4735
    }
4736
    .consentModalItem:not(:last-child) {
4737
        margin-bottom: 20px;
4738
    }
4739
    .consentItemCheckbox {
4740
        padding-right: 20px;
4741
    }
4742
    .consentItemName {
4743
        font-weight: bold;
4744
    }
4745
    #cookieConsentPopupText {
4746
        margin: 20px 0;
4747
    }
4748
}
4749
4701
@media (min-width: 200px) {
4750
@media (min-width: 200px) {
4702
4751
4703
}
4752
}
(-)a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc (+69 lines)
Lines 1-6 Link Here
1
[% USE raw %]
1
[% USE raw %]
2
[% USE Koha %]
2
[% USE Koha %]
3
[% USE KohaPlugins %]
3
[% USE KohaPlugins %]
4
[% USE Asset %]
5
[% IF Koha.Preference( 'CookieConsent' ) %]
6
    [% USE JSConsents %]
7
[% END %]
4
        </div>
8
        </div>
5
[% IF ( ( languages_loop ) && ( ! popup_window ) && ( Koha.Preference('StaffLangSelectorMode') == 'both' || Koha.Preference('StaffLangSelectorMode') == 'footer') ) %]
9
[% IF ( ( languages_loop ) && ( ! popup_window ) && ( Koha.Preference('StaffLangSelectorMode') == 'both' || Koha.Preference('StaffLangSelectorMode') == 'footer') ) %]
6
    [% UNLESS ( one_language_enabled ) %]
10
    [% UNLESS ( one_language_enabled ) %]
Lines 74-78 Link Here
74
    [% END %]
78
    [% END %]
75
[% KohaPlugins.get_plugins_intranet_js | $raw %]
79
[% KohaPlugins.get_plugins_intranet_js | $raw %]
76
80
81
    <!-- Cookie consent -->
82
    [% IF Koha.Preference( 'CookieConsent' ) %]
83
        <!-- Cookie consent bar -->
84
        <div id="cookieConsentBar" aria-hidden="true">
85
            [% Koha.Preference( 'CookieConsentBar' ) | $raw %]
86
            <div id="consentButtons">
87
                <button type="button" class="btn btn-primary consentAcceptAll">Accept all cookies</button>
88
                [% IF ( Koha.Preference( 'ConsentJS' ).length > 0 ) %]
89
                    <button type="button" class="btn btn-primary consentAcceptEssential">Accept only essential cookies</button>
90
                    <button type="button" class="btn btn-info" id="consentMoreInfo">More information</button>
91
                [% END %]
92
            </div>
93
        </div> <!-- /#cookieConsentBar -->
94
        <!-- Cookie consent modal -->
95
        <div id="cookieConsentModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="cookieConsentModalLabel" aria-hidden="true">
96
            <div class="modal-dialog">
97
                <div class="modal-content">
98
                    <div class="modal-header">
99
                        <h2 class="modal-title" id="cookieConsentModalLabel">Cookie consent</h2>
100
                    </div>
101
                    <div class="modal-body">
102
                        [% IF Koha.Preference( 'CookieConsentPopup' ) %]
103
                            <div id="cookieConsentPopupText">
104
                                [% Koha.Preference( 'CookieConsentPopup' ) | $raw %]
105
                            </div>
106
                        [% END %]
107
                        <div id="consentCookieList">
108
                            [% consents = JSConsents.all() %]
109
                            [% FOREACH consent IN consents %]
110
                                <div class="consentModalItem">
111
                                    <div class="consentItemCheckbox">
112
                                        <input class="consentCheckbox" type="checkbox" name="consentCheckbox" value="[% consent.id %]">
113
                                    </div>
114
                                    <div class="consentItemMeta">
115
                                        <div class="consentItemName">[% consent.name | html %]</div>
116
                                        <div class="consentItemDescription">[% consent.description | html %]</div>
117
                                    </div>
118
                                </div>
119
                            [% END %]
120
                        </div>
121
                    </div>
122
                    <div class="modal-footer">
123
                        <div id="consentButtons">
124
                            <button type="button" class="btn btn-primary consentAcceptAll">Accept all cookies</button>
125
                            [% IF ( Koha.Preference( 'ConsentJS' ).length > 0 ) %]
126
                                <button type="button" class="btn btn-primary consentAcceptEssential">Accept only essential cookies</button>
127
                                <button type="button" class="btn btn-warning" id="consentAcceptSelected">Accept selected non-essential cookies</button>
128
                            [% END %]
129
                        </div>
130
                    </div>
131
                </div> <!-- /.modal-content -->
132
            </div> <!-- /.modal-dialog -->
133
        </div>  <!-- /#cookieConsentModal  -->
134
    [% END %]
135
    <!-- ConsentJS code that may run -->
136
    [% IF Koha.Preference( 'CookieConsent' ) && Koha.Preference( 'ConsentJS' ).length > 0 %]
137
        [% consents = JSConsents.all() %]
138
        [% FOREACH consent IN consents %]
139
            <div class="consentCode" style="display:none" aria-hidden="true" data-consent-id="[% consent.id %]" data-consent-code="[% consent.code %]" data-requires-consent="[% consent.staffConsent ? 'true' : 'false' %]"></div>
140
        [% END %]
141
    [% END %]
142
    [% IF Koha.Preference( 'CookieConsent' ) %]
143
        [% Asset.js("js/cookieconsent.js") | $raw %]
144
    [% END %]
145
77
</body>
146
</body>
78
</html>
147
</html>
(-)a/koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js (-1 / +165 lines)
Line 0 Link Here
0
- 
1
(function () {
2
    // Has the user previously consented, establish our
3
    // initial state
4
    let selected = [];
5
    let existingConsent = '';
6
    // The presence of a 'cookieConsent' local storage item indicates
7
    // that previous consent has been set. If the value is empty, then
8
    // no consent to non-essential cookies was given
9
    const hasStoredConsent = localStorage.getItem('cookieConsent');
10
    getExistingConsent();
11
12
    // The consent bar may not be in the DOM if it is not being used
13
    const consentBar = $('#cookieConsentBar');
14
    if (!consentBar) {
15
        return;
16
    }
17
    if (hasStoredConsent === null) {
18
        showConsentBar();
19
    }
20
    addButtonHandlers();
21
22
    // When the modal is opened, populate our state based on currently
23
    // selected values
24
    $('#cookieConsentModal').on('shown.bs.modal', function () {
25
        initialiseSelected();
26
    });
27
28
    // Initialise existing consent based on local storage
29
    function getExistingConsent() {
30
        existingConsent = localStorage.getItem('cookieConsent') ?
31
            localStorage.getItem('cookieConsent') :
32
            [];
33
    }
34
35
    function showConsentBar() {
36
        const consentBar = $('#cookieConsentBar');
37
        consentBar.attr('aria-hidden', 'false');
38
        consentBar.show();
39
    }
40
41
    function hideConsentBar() {
42
        const consentBar = $('#cookieConsentBar');
43
        consentBar.attr('aria-hidden', 'true');
44
        consentBar.hide();
45
    }
46
47
    // Hides the appropriate consent container, depending on what
48
    // is currently visible
49
    function hideContainer() {
50
        if ($('#cookieConsentModal').hasClass('in')) {
51
            $('#cookieConsentModal').modal('hide');
52
        } else {
53
            hideConsentBar();
54
        }
55
    }
56
57
    // Initialise our state of selected item and enable/disable
58
    // the "Accept selected" button appropriately
59
    function initialiseSelected() {
60
        selected = [];
61
        $('.consentCheckbox').each(function () {
62
            const val = $(this).val();
63
            if (existingConsent.indexOf(val) > -1 ) {
64
                $(this).prop('checked', true);
65
                selected.push(val);
66
            } else {
67
                $(this).prop('checked', false);
68
            }
69
        });
70
        enableDisableSelectedButton();
71
    }
72
73
    // Maintain our state of selected items and enable/disable
74
    // the "Accept selected" button appropriately
75
    function maintainSelected() {
76
        selected = [];
77
        $('.consentCheckbox:checked').each(function () {
78
            selected.push($(this).val());
79
        });
80
        enableDisableSelectedButton();
81
    }
82
83
    // Set the enabled / disabled state of the
84
    // "Accept selected button based on the checkbox
85
    // states
86
    function enableDisableSelectedButton() {
87
        $('#consentAcceptSelected').prop(
88
            'disabled',
89
            selected.length === 0
90
        );
91
    }
92
93
    function runConsentedCode() {
94
        getExistingConsent();
95
        $('.consentCode').each(function () {
96
            // The user has explicitly consented to this code, or the
97
            // code doesn't require consent in the staff view
98
            if (
99
                existingConsent.indexOf($(this).data('consent-id')) > -1 ||
100
                !$(this).data('requires-consent')
101
            ) {
102
                const code = atob($(this).data('consent-code'));
103
                const func = Function(code);
104
                func();
105
            }
106
        });
107
    }
108
109
    function addButtonHandlers() {
110
        // "Accept all" handler
111
        $('.consentAcceptAll').on('click', function(e) {
112
            e.preventDefault();
113
            let toSave = [];
114
            $('.consentCheckbox').each(function () {
115
                const val = $(this).val();
116
                toSave.push(val);
117
            });
118
            localStorage.setItem('cookieConsent', toSave);
119
            hideContainer();
120
            runConsentedCode();
121
        });
122
123
        // "Accept essential" handler
124
        $('.consentAcceptEssential').on('click', function(e) {
125
            e.preventDefault();
126
            localStorage.setItem('cookieConsent', []);
127
            hideContainer();
128
        });
129
130
        // "Accept selected" handler
131
        $('#consentAcceptSelected').on('click', function(e) {
132
            e.preventDefault();
133
            const toSave = selected.length > 0 ? selected : [];
134
            localStorage.setItem('cookieConsent', toSave);
135
            hideContainer();
136
            runConsentedCode();
137
        });
138
139
        // "More information" handler
140
        $('#consentMoreInfo').on(
141
            'click',
142
            function (e) {
143
                e.preventDefault();
144
                hideConsentBar();
145
                // Ensure we're up to date with the existing consent
146
                getExistingConsent();
147
                // Prevent the modal from being closed with anything
148
                // but the buttons
149
                $('#cookieConsentModal')
150
                    .modal({
151
                        backdrop: 'static',
152
                        keyboard: false,
153
                        focus: true,
154
                        show: true
155
                    });
156
            }
157
        );
158
        $('.consentCheckbox').on('click', function () {
159
            maintainSelected();
160
        });
161
    }
162
163
    // On page load, run any code that has been given consent
164
    runConsentedCode();
165
})();

Return to bug 27378