@oat-sa/tao-core-ui 1.64.1 → 1.64.2

package/src/resource/list.js

@@ -1,200 +1,200 @@
-/**
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; under version 2
- * of the License (non-upgradable).
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * Copyright (c) 2017-2019 (original work) Open Assessment Technologies SA ;
- */
-
-/**
- * A list component mostly used as a data viewer/selector for the resource selector.
- * The data flow works on the query/update model:
- * @example
- * resourceListFactory(container, config)
- *     .on('query', function(params){
- *         var self = this;
- *         fetch('someurl', params).then(nodes){
- *             self.update(nodedata, params);
- *         });
- *     });
- *
- * @author Bertrand Chevrier <bertrand@taotesting.com>
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import component from 'ui/component';
-import selectable from 'ui/resource/selectable';
-import hider from 'ui/hider';
-import listTpl from 'ui/resource/tpl/list';
-import listNodeTpl from 'ui/resource/tpl/listNode';
-import DOMPurify from 'dompurify';
-
-var defaultConfig = {
-    multiple: true
-};
-
-/**
- * Builds the resource list component
- *
- * @param {jQueryElement} $container - where to append the component
- * @param {Object} config - the component config
- * @param {String} config.classUri - the root Class URI
- * @param {Object[]} [config.nodes] - the nodes to preload
- * @param {String} [config.icon] - the icon class to show close to the resources
- * @param {Boolean} [config.multiple = true] - multiple vs unique selection
- * @returns {resourceList} the component
- */
-export default function resourceListFactory($container, config) {
-    var $list;
-    var $loadMore;
-
-    /**
-     * A selectable component
-     * @typedef {ui/component} resourceList
-     */
-    var resourceList = selectable(
-        component(
-            {
-                /**
-                 * Ask for a query (forward the event)
-                 * @param {Object} [params] - the query parameters
-                 * @param {String} [params.classUri] - the class URI
-                 * @param {Number} [params.offset = 0] - for paging
-                 * @param {Number} [params.limit] - for paging
-                 * @returns {resourceList} chains
-                 * @fires resourceList#query
-                 */
-                query: function query(params) {
-                    if (!this.is('loading')) {
-                        /**
-                         * Formulate the query
-                         * @event resourceList#query
-                         * @param {Object} params
-                         */
-                        this.trigger(
-                            'query',
-                            _.defaults(params || {}, {
-                                classUri: this.classUri
-                            })
-                        );
-                    }
-                },
-
-                /**
-                 * Update the component with the given nodes
-                 * @param resources
-                 * @returns {resourceList} chains
-                 * @fires resourceList#update
-                 */
-                update: function update(resources) {
-                    var self = this;
-
-                    if (this.is('rendered')) {
-                        $list.html(
-                            _.reduce(
-                                resources.nodes,
-                                function (acc, node) {
-                                    node.icon = self.config.icon;
-                                    node.label = DOMPurify.sanitize(node.label);
-                                    acc += listNodeTpl(node);
-                                    return acc;
-                                },
-                                ''
-                            )
-                        );
-
-                        _.forEach(resources.nodes, function (node) {
-                            self.addNode(node.uri, node);
-                        });
-
-                        if (resources.total > _.size(self.getNodes())) {
-                            hider.show($loadMore);
-                        } else {
-                            hider.hide($loadMore);
-                        }
-
-                        /**
-                         * The list has been updated
-                         * @event resourceList#update
-                         */
-                        this.trigger('update');
-                    }
-                }
-            },
-            defaultConfig
-        )
-    );
-
-    resourceList
-        .setTemplate(listTpl)
-        .on('init', function () {
-            this.classUri = this.config.classUri;
-
-            this.setState('multiple', !!this.config.multiple);
-
-            this.render($container);
-        })
-        .on('render', function () {
-            var self = this;
-
-            var $component = this.getElement();
-            $list = $component.children('ul');
-            $loadMore = $('.more', $component);
-
-            //selection
-            $component.on('click', 'li', function (e) {
-                var $instance = $(e.currentTarget);
-                e.preventDefault();
-                e.stopPropagation();
-                if ($instance.hasClass('selected')) {
-                    self.unselect($instance.data('uri'));
-                } else {
-                    self.select($instance.data('uri'), !self.is('multiple'));
-                }
-            });
-
-            //load next page
-            $loadMore.on('click', function (e) {
-                e.preventDefault();
-
-                self.query({
-                    offset: _.size(self.getNodes())
-                });
-            });
-
-            //initial data loading
-            if (this.config.nodes) {
-                this.update(this.config.nodes);
-            } else {
-                this.query();
-            }
-        })
-        .on('query', function () {
-            this.setState('loading', true);
-        })
-        .on('update', function () {
-            this.setState('loading', false);
-        })
-        .on('remove', function (uri) {
-            if (this.is('rendered')) {
-                $('[data-uri="' + uri + '"]', this.getElement()).remove();
-            }
-        });
-
-    //always defer the initialization to let consumers listen for init and render events.
-    _.defer(function () {
-        resourceList.init(config);
-    });
-
-    return resourceList;
-}
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2017-2019 (original work) Open Assessment Technologies SA ;
+ */
+
+/**
+ * A list component mostly used as a data viewer/selector for the resource selector.
+ * The data flow works on the query/update model:
+ * @example
+ * resourceListFactory(container, config)
+ *     .on('query', function(params){
+ *         var self = this;
+ *         fetch('someurl', params).then(nodes){
+ *             self.update(nodedata, params);
+ *         });
+ *     });
+ *
+ * @author Bertrand Chevrier <bertrand@taotesting.com>
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import component from 'ui/component';
+import selectable from 'ui/resource/selectable';
+import hider from 'ui/hider';
+import listTpl from 'ui/resource/tpl/list';
+import listNodeTpl from 'ui/resource/tpl/listNode';
+import DOMPurify from 'dompurify';
+
+var defaultConfig = {
+    multiple: true
+};
+
+/**
+ * Builds the resource list component
+ *
+ * @param {jQueryElement} $container - where to append the component
+ * @param {Object} config - the component config
+ * @param {String} config.classUri - the root Class URI
+ * @param {Object[]} [config.nodes] - the nodes to preload
+ * @param {String} [config.icon] - the icon class to show close to the resources
+ * @param {Boolean} [config.multiple = true] - multiple vs unique selection
+ * @returns {resourceList} the component
+ */
+export default function resourceListFactory($container, config) {
+    var $list;
+    var $loadMore;
+
+    /**
+     * A selectable component
+     * @typedef {ui/component} resourceList
+     */
+    var resourceList = selectable(
+        component(
+            {
+                /**
+                 * Ask for a query (forward the event)
+                 * @param {Object} [params] - the query parameters
+                 * @param {String} [params.classUri] - the class URI
+                 * @param {Number} [params.offset = 0] - for paging
+                 * @param {Number} [params.limit] - for paging
+                 * @returns {resourceList} chains
+                 * @fires resourceList#query
+                 */
+                query: function query(params) {
+                    if (!this.is('loading')) {
+                        /**
+                         * Formulate the query
+                         * @event resourceList#query
+                         * @param {Object} params
+                         */
+                        this.trigger(
+                            'query',
+                            _.defaults(params || {}, {
+                                classUri: this.classUri
+                            })
+                        );
+                    }
+                },
+
+                /**
+                 * Update the component with the given nodes
+                 * @param resources
+                 * @returns {resourceList} chains
+                 * @fires resourceList#update
+                 */
+                update: function update(resources) {
+                    var self = this;
+
+                    if (this.is('rendered')) {
+                        $list.html(
+                            _.reduce(
+                                resources.nodes,
+                                function (acc, node) {
+                                    node.icon = self.config.icon;
+                                    node.label = DOMPurify.sanitize(node.label);
+                                    acc += listNodeTpl(node);
+                                    return acc;
+                                },
+                                ''
+                            )
+                        );
+
+                        _.forEach(resources.nodes, function (node) {
+                            self.addNode(node.uri, node);
+                        });
+
+                        if (resources.total > _.size(self.getNodes())) {
+                            hider.show($loadMore);
+                        } else {
+                            hider.hide($loadMore);
+                        }
+
+                        /**
+                         * The list has been updated
+                         * @event resourceList#update
+                         */
+                        this.trigger('update');
+                    }
+                }
+            },
+            defaultConfig
+        )
+    );
+
+    resourceList
+        .setTemplate(listTpl)
+        .on('init', function () {
+            this.classUri = this.config.classUri;
+
+            this.setState('multiple', !!this.config.multiple);
+
+            this.render($container);
+        })
+        .on('render', function () {
+            var self = this;
+
+            var $component = this.getElement();
+            $list = $component.children('ul');
+            $loadMore = $('.more', $component);
+
+            //selection
+            $component.on('click', 'li', function (e) {
+                var $instance = $(e.currentTarget);
+                e.preventDefault();
+                e.stopPropagation();
+                if ($instance.hasClass('selected')) {
+                    self.unselect($instance.data('uri'));
+                } else {
+                    self.select($instance.data('uri'), !self.is('multiple'));
+                }
+            });
+
+            //load next page
+            $loadMore.on('click', function (e) {
+                e.preventDefault();
+
+                self.query({
+                    offset: _.size(self.getNodes())
+                });
+            });
+
+            //initial data loading
+            if (this.config.nodes) {
+                this.update(this.config.nodes);
+            } else {
+                this.query();
+            }
+        })
+        .on('query', function () {
+            this.setState('loading', true);
+        })
+        .on('update', function () {
+            this.setState('loading', false);
+        })
+        .on('remove', function (uri) {
+            if (this.is('rendered')) {
+                $('[data-uri="' + uri + '"]', this.getElement()).remove();
+            }
+        });
+
+    //always defer the initialization to let consumers listen for init and render events.
+    _.defer(function () {
+        resourceList.init(config);
+    });
+
+    return resourceList;
+}

package/src/resource/scss/_filters.scss

@@ -1,26 +1,26 @@
-.filters {
-    position: relative;
-    height: 100%;
-    opacity : 0;
-    &.rendered {
-        opacity: 1;
-        @include transition(opacity, 300ms, linear);
-    }
-
-    .ui-generis-form {
-        margin: 0;
-        padding: 10px;
-        width: 100%;
-        background-color: $uiClickableDefaultBg;
-        border: none;
-        h2 {
-            margin: 0;
-        }
-        .left {
-            width: 100%;
-        }
-        .toolbar {
-            margin: 0;
-        }
-    }
-}
+.filters {
+    position: relative;
+    height: 100%;
+    opacity : 0;
+    &.rendered {
+        opacity: 1;
+        @include transition(opacity, 300ms, linear);
+    }
+
+    .ui-generis-form {
+        margin: 0;
+        padding: 10px;
+        width: 100%;
+        background-color: $uiClickableDefaultBg;
+        border: none;
+        h2 {
+            margin: 0;
+        }
+        .left {
+            width: 100%;
+        }
+        .toolbar {
+            margin: 0;
+        }
+    }
+}

package/src/resource/scss/_resource-list.scss

@@ -1,107 +1,107 @@
-.resource-list {
-    position: relative;
-    height: 100%;
-
-    opacity : 0;
-    &.rendered {
-        opacity: 1;
-        @include transition(opacity, 300ms, linear);
-    }
-
-    &.multiple ul li a:after{
-        display: block;
-        @include transition(all, 200ms, linear);
-    }
-
-    &.multiple ul li[data-access="denied"] a:after {
-        display: none;
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-
-        li {
-            position: relative;
-            height: 40px;
-            padding: 10px;
-            border-bottom: solid 1px $uiGeneralContentBorder;
-
-            @include transition(background-color, 200ms, linear);
-
-            a {
-                @include transition(color, 200ms, linear);
-                color: $textColor;
-                display: inline-block;
-                width: 100%;
-                padding-right: 25px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-
-                &:after {
-                    @include tao-icon-setup;
-                    @include icon-checkbox;
-                    color: $info;
-                    position: absolute;
-                    right: 17px;
-                    top: 12px;
-                    display: none;
-                }
-                &:hover {
-                    text-decoration: none;
-                }
-
-                & > span {
-                    color: $info;
-                    margin-right: 4px;
-                    @include font-size(16);
-                    vertical-align: top;
-                }
-            }
-
-            &.selected, &:hover {
-                background-color: $uiClickableHoverBg;
-                cursor: pointer;
-                @include transition(background-color, 200ms, linear);
-                a {
-                    color: $textHighlight;
-                    @include transition(color, 200ms, linear);
-
-                    &:after {
-                        color: $textHighlight;
-                    }
-                    & > span {
-                        color: $textHighlight;
-                    }
-                }
-            }
-            &.selected a:after {
-                @include icon-checkbox-checked;
-            }
-
-            &[data-access=denied] > a, &[data-access=partial] > a {
-                [class^="icon-"], [class*=" icon-"] {
-                    position: relative;
-                    &:after {
-                        @include icon-lock;
-                        color: #555;
-                        position: absolute;
-                        left: 7px;
-                        top: 6px;
-                    }
-                }
-            }
-            &[data-access=denied] {
-                color: $uiClickableActiveBg;
-                background-color: $textHighlight;
-                &:hover, &:hover > a, & > a, [class^="icon-"]:before, [class*=" icon-"]:before  {
-                    cursor: auto;
-                    background-color: $textHighlight;
-                    color: $uiClickableActiveBg !important;
-                }
-            }
-        }
-    }
-}
+.resource-list {
+    position: relative;
+    height: 100%;
+
+    opacity : 0;
+    &.rendered {
+        opacity: 1;
+        @include transition(opacity, 300ms, linear);
+    }
+
+    &.multiple ul li a:after{
+        display: block;
+        @include transition(all, 200ms, linear);
+    }
+
+    &.multiple ul li[data-access="denied"] a:after {
+        display: none;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            position: relative;
+            height: 40px;
+            padding: 10px;
+            border-bottom: solid 1px $uiGeneralContentBorder;
+
+            @include transition(background-color, 200ms, linear);
+
+            a {
+                @include transition(color, 200ms, linear);
+                color: $textColor;
+                display: inline-block;
+                width: 100%;
+                padding-right: 25px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                &:after {
+                    @include tao-icon-setup;
+                    @include icon-checkbox;
+                    color: $info;
+                    position: absolute;
+                    right: 17px;
+                    top: 12px;
+                    display: none;
+                }
+                &:hover {
+                    text-decoration: none;
+                }
+
+                & > span {
+                    color: $info;
+                    margin-right: 4px;
+                    @include font-size(16);
+                    vertical-align: top;
+                }
+            }
+
+            &.selected, &:hover {
+                background-color: $uiClickableHoverBg;
+                cursor: pointer;
+                @include transition(background-color, 200ms, linear);
+                a {
+                    color: $textHighlight;
+                    @include transition(color, 200ms, linear);
+
+                    &:after {
+                        color: $textHighlight;
+                    }
+                    & > span {
+                        color: $textHighlight;
+                    }
+                }
+            }
+            &.selected a:after {
+                @include icon-checkbox-checked;
+            }
+
+            &[data-access=denied] > a, &[data-access=partial] > a {
+                [class^="icon-"], [class*=" icon-"] {
+                    position: relative;
+                    &:after {
+                        @include icon-lock;
+                        color: #555;
+                        position: absolute;
+                        left: 7px;
+                        top: 6px;
+                    }
+                }
+            }
+            &[data-access=denied] {
+                color: $uiClickableActiveBg;
+                background-color: $textHighlight;
+                &:hover, &:hover > a, & > a, [class^="icon-"]:before, [class*=" icon-"]:before  {
+                    cursor: auto;
+                    background-color: $textHighlight;
+                    color: $uiClickableActiveBg !important;
+                }
+            }
+        }
+    }
+}