button.js
5 years ago
collapse.js
5 years ago
component-wrapper.js
5 years ago
list-table-heading.js
5 years ago
list-table-item.js
5 years ago
list-table.js
5 years ago
notice-component.js
5 years ago
notice.js
5 years ago
pagination.js
5 years ago
popup.js
5 years ago
repeater-item.js
5 years ago
repeater.js
5 years ago
tabs-panel.js
5 years ago
tabs.js
5 years ago
title.js
5 years ago
notice-component.js
73 lines
| 1 | const NoticeComponent = { |
| 2 | name: 'cx-vui-notice', |
| 3 | template: '#cx-vui-notice', |
| 4 | data: function() { |
| 5 | return { |
| 6 | stack: {}, |
| 7 | destroyQueue: {}, |
| 8 | } |
| 9 | }, |
| 10 | methods: { |
| 11 | addToStack: function( item, itemID ) { |
| 12 | |
| 13 | var self = this; |
| 14 | var destroyTimeout = setTimeout( function() { |
| 15 | self.destroyItem( itemID ); |
| 16 | }, item.duration ); |
| 17 | |
| 18 | self.$set( self.stack, itemID, item ); |
| 19 | self.$set( self.destroyQueue, itemID, destroyTimeout ); |
| 20 | |
| 21 | }, |
| 22 | destroyItem: function( itemID ) { |
| 23 | this.$delete( this.stack, itemID ); |
| 24 | |
| 25 | if ( this.destroyQueue[ itemID ] ) { |
| 26 | clearTimeout( this.destroyQueue[ itemID ] ); |
| 27 | this.$delete( this.destroyQueue, itemID ); |
| 28 | } |
| 29 | |
| 30 | }, |
| 31 | destroyAll: function() { |
| 32 | |
| 33 | for ( var itemID in this.destroyQueue ) { |
| 34 | console.log( this.destroyQueue[ itemID ] ); |
| 35 | clearTimeout( this.destroyQueue[ itemID ] ); |
| 36 | } |
| 37 | |
| 38 | this.stack = {}; |
| 39 | this.destroyQueue = {}; |
| 40 | |
| 41 | }, |
| 42 | getIcon: function( type ) { |
| 43 | |
| 44 | var icon; |
| 45 | |
| 46 | switch ( type ) { |
| 47 | |
| 48 | case 'success': |
| 49 | |
| 50 | icon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.38498 12.0188L13.5962 4.80751L12.4695 3.64319L6.38498 9.7277L3.53052 6.87324L2.40376 8L6.38498 12.0188ZM2.32864 2.3662C3.9061 0.788732 5.79656 0 8 0C10.2034 0 12.0814 0.788732 13.6338 2.3662C15.2113 3.91862 16 5.79656 16 8C16 10.2034 15.2113 12.0939 13.6338 13.6714C12.0814 15.2238 10.2034 16 8 16C5.79656 16 3.9061 15.2238 2.32864 13.6714C0.776213 12.0939 0 10.2034 0 8C0 5.79656 0.776213 3.91862 2.32864 2.3662Z"/></svg>'; |
| 51 | |
| 52 | break; |
| 53 | |
| 54 | case 'error': |
| 55 | |
| 56 | icon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.71489 10.1136V6.71605H7.28511V10.1136H8.71489ZM8.71489 13.4716V11.7728H7.28511V13.4716H8.71489ZM0 16L8 0L16 16H0Z"/></svg>'; |
| 57 | |
| 58 | break; |
| 59 | |
| 60 | default: |
| 61 | |
| 62 | icon = '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.78873 5.59624V3.98122H7.21127V5.59624H8.78873ZM8.78873 12.0188V7.21127H7.21127V12.0188H8.78873ZM2.32864 2.3662C3.9061 0.788732 5.79656 0 8 0C10.2034 0 12.0814 0.788732 13.6338 2.3662C15.2113 3.91862 16 5.79656 16 8C16 10.2034 15.2113 12.0939 13.6338 13.6714C12.0814 15.2238 10.2034 16 8 16C5.79656 16 3.9061 15.2238 2.32864 13.6714C0.776213 12.0939 0 10.2034 0 8C0 5.79656 0.776213 3.91862 2.32864 2.3662Z"/></svg>'; |
| 63 | |
| 64 | break; |
| 65 | } |
| 66 | |
| 67 | return icon; |
| 68 | } |
| 69 | }, |
| 70 | }; |
| 71 | |
| 72 | export default NoticeComponent; |
| 73 |