From d7c5d6014bbb8879ef3be4d1f3023506bb11ddfd Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Tue, 3 Mar 2015 19:30:44 +0100 Subject: [PATCH] Added default image when actual favicon fails to load --- .../PM/UI/Components/Cards/FavIcon.js | 56 +++++++++++++++++++ .../Clipperz/PM/UI/Components/Cards/List.js | 3 +- .../PM/UI/Components/Cards/TextArea.js | 4 +- 3 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js new file mode 100644 index 0000000..8b83418 --- /dev/null +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js @@ -0,0 +1,56 @@ +/* + +Copyright 2008-2013 Clipperz Srl + +This file is part of Clipperz, the online password manager. +For further information about its features and functionalities please +refer to http://www.clipperz.com. + +* Clipperz is free software: you can redistribute it and/or modify it + under the terms of the GNU Affero General Public License as published + by the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + +* Clipperz 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 Affero General Public License for more details. + +* You should have received a copy of the GNU Affero General Public + License along with Clipperz. If not, see http://www.gnu.org/licenses/. + +*/ + +'use strict'; + +Clipperz.Base.module('Clipperz.PM.UI.Components.Cards'); + +Clipperz.PM.UI.Components.Cards.FavIcon = React.createClass({ + + propTypes: { + 'src': React.PropTypes.string, + }, + + getInitialState: function() { + return { + 'src': this.props['src'] + }; + }, + + defaultIcon: function () { + return 'data:image/png;charset=utf-8;base64,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TUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTAzLTAzVDE5OjAzOjM0PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDMuMy4xPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjcyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj43MjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2Ny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'; + }, + + //---------------------------------------------------------------------------- + + faviconEvent: function (anEvent) { + if (anEvent['type'] == 'error') { + this.setState({'src':this.defaultIcon()}); + } + }, + + render: function() { + return React.DOM.img({'className':'favicon', 'src':this.state['src'] ? this.state['src'] : this.defaultIcon(), /*'onLoad':this.faviconEvent,*/ 'onError':this.faviconEvent}, this.props.children); + }, + +}); \ No newline at end of file diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js index dc61a6f..0f4ad9a 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js @@ -50,7 +50,8 @@ Clipperz.PM.UI.Components.Cards.List = React.createClass({ }; result = React.DOM.li({'className':React.addons.classSet(classes), 'onClick': this.handleClick, 'key':anItem['_reference'], 'data-reference':anItem['_reference'], 'data-label':anItem['label']}, [ - React.DOM.span({'className':'favicon'}, [ React.DOM.img({src:anItem['favicon']})]), +// React.DOM.span({'className':'favicon'}, React.DOM.img({'onLoad':this.faviconEvent, 'onError':this.faviconEvent, 'onAbort':this.faviconEvent, 'src':anItem['favicon']})), + React.DOM.span({'className':'favicon'}, Clipperz.PM.UI.Components.Cards.FavIcon({'src':anItem['favicon']})), React.DOM.span({'className':'label'}, anItem['label']), // React.DOM.span({'className':'action'}, 'show detail') ]); diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js index 24efc4e..66ad1ef 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js @@ -68,7 +68,7 @@ Clipperz.PM.UI.Components.Cards.TextArea = React.createClass({ node.style.height = node.scrollHeight+'px'; window.scrollTo(window.scrollLeft, (node.scrollTop + node.scrollHeight)); }, - +/* recalculateSize_2: function() { var diff; var node = this.getDOMNode(); @@ -96,7 +96,7 @@ Clipperz.PM.UI.Components.Cards.TextArea = React.createClass({ node.style.height = 'auto'; node.style.height = (node.scrollHeight - diff) + 'px'; }, - +*/ //---------------------------------------------------------------------------- // render: function () {