WordPress.org
Get WordPress

Plugin Directory

Changeset 1257332


Ignore:
Timestamp:
10/01/2015 11:06:08 AM (11 years ago)
Author:
nikdo
Message:

Image loading indicator

Location:
react-webcam/trunk
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed

  • react-webcam/trunk/css/react-webcam.css

    r1255686 r1257332  
    44
    55
    6 /* Current image with info and navigation */
     6/* Current image with navigation */
    77div.rwc-image-container {
    88    position: relative;
    … …  
    1010    padding: 56.25% 0 0 0;
    1111}
    12 div.rwc-image-container img {
    13     display: block;
    14     max-width: 100%;
    15     max-height: 100%;
     12div.rwc-image-container * {
    1613    position: absolute;
    1714    top: 0;
    … …  
    1916    bottom: 0;
    2017    left: 0;
    21 }
    22 div.rwc-image-container span {
    23     z-index: 100;
    24     position: absolute;
    25     top: 0;
    26     bottom: 0;
    27     width: 30%;
    28     cursor: pointer;
    2918    text-indent: 100%;
    3019    white-space: nowrap;
    3120    overflow: hidden;
     21}
     22div.rwc-image-container img {
     23    display: block;
     24    max-width: 100%;
     25    max-height: 100%;
     26}
     27div.rwc-image-container span.rwc-loading {
     28    z-index: 90;
     29    background: url('../img/loader.gif') no-repeat center rgba(255,255,255,0.1);
     30}
     31div.rwc-image-container span.prev,
     32div.rwc-image-container span.next {
     33    z-index: 100;
     34    cursor: pointer;
    3235    -webkit-touch-callout: none;
    3336    -webkit-user-select: none;
    … …  
    3740    user-select: none;
    3841}
    39 div.rwc-image-container span.prev { left: 0; }
    40 div.rwc-image-container span.next { right: 0; }
     42div.rwc-image-container span.prev { right: 70%; }
     43div.rwc-image-container span.next { left: 70%; }
    4144div.rwc-image-container span.next:hover {
    4245    background: url('../img/right.png') no-repeat right 1em center;
    … …  
    4750div.rwc-image-container a.full-resolution {
    4851    z-index: 100;
    49     position: absolute;
    50     top: 0;
    51     bottom: 0;
    5252    left: 30%;
    5353    right: 30%;
    54     text-indent: 100%;
    55     white-space: nowrap;
    56     overflow: hidden;
    5754}
     55
     56
     57/* Info under webcam image */
    5858p.rwc-info {
    5959    background-color: #a9a9a9;

  • react-webcam/trunk/js/Webcam.js

    r1256905 r1257332  
    1515            history: server.initialHistory,
    1616            selectedItemIndex: 0,
    17             secondsToRefresh: server.refreshInterval + INITIAL_REFRESH_DELAY
     17            secondsToRefresh: server.refreshInterval + INITIAL_REFRESH_DELAY,
     18            loading: true
    1819        };
    1920       
    … …  
    2829                this.setState({ secondsToRefresh: server.refreshInterval });
    2930                if (this.state.selectedItemIndex == 0) {
    30                     this.setState({ history: JSON.parse(xhr.responseText) });
     31                    this.setState({
     32                        history: JSON.parse(xhr.responseText),
     33                        loading: true
     34                    });
    3135                }
    3236            }
    … …  
    6064        }
    6165        this.setState({
    62             selectedItemIndex: index
     66            selectedItemIndex: index,
     67            loading: true
    6368        });
    6469    },
    … …  
    6772        var i = this.state.selectedItemIndex;
    6873        if (i < this.state.history.length - 1)
    69             this.setState({ selectedItemIndex:  i + 1 });   
     74            this.setState({
     75                selectedItemIndex:  i + 1,
     76                loading: true
     77            });
    7078    },
    7179
    … …  
    7381        var i = this.state.selectedItemIndex;
    7482        if (i > 0)
    75             this.setState({ selectedItemIndex:  i - 1 });
     83            this.setState({
     84                selectedItemIndex:  i - 1,
     85                loading: true
     86            });
    7687       
     88    },
     89
     90    imageLoaded: function() {
     91        this.setState({
     92            loading: false
     93        })
    7794    },
    7895
    … …  
    115132            React.createElement('div', null,
    116133                React.createElement('div', { className: 'rwc-image-container' },
    117                     React.createElement('img', { src: currentImageUrl, width: 1920, height: 1080 }),
     134                    React.createElement('img', {
     135                        src: currentImageUrl,
     136                        onLoad: this.imageLoaded,
     137                        width: 1920,
     138                        height: 1080
     139                    }),
    118140                    firstImageActive ? null : React.createElement('span', {
    119141                            className: 'prev',
    … …  
    133155                            title: 'Plné rozlišení'
    134156                         },
    135                         'Plné rozlišení')
     157                        'Plné rozlišení'),
     158                    this.state.loading
     159                        ? React.createElement('span', {
     160                                className: 'rwc-loading'
     161                            },
     162                            'Načítání')
     163                        : null
    136164                ),
    137165                React.createElement('p', { className: 'rwc-info' },

  • react-webcam/trunk/react-webcam.php

    r1257256 r1257332  
    22/*
    33Plugin Name: React Webcam
    4 Version: 2.2.0
     4Version: 2.3.0
    55Author: Radek Matej
    66Description: Add auto-refreshing image from your webcam to any page.

  • react-webcam/trunk/readme.txt

    r1246533 r1257332  
    3030= 1.1 =
    3131* Configurable refresh interval.
     32
     33= 2.3.0 =
     34* Image loading indicator
Note: See TracChangeset for help on using the changeset viewer.