← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/js/UI/UserVideoGallery.js

  • Committer: Jeff Stys
  • Date: 2015-03-02 22:05:55 UTC
  • Revision ID: jstys@sesda3.com-20150302220555-iegnr7cgcydml91o
+ Added Help menu with buttons for links that were previously in the footer
+ Added styleing for hover and opened states for the Help and Settings Button

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/js/UI/UserVideoGallery.js
19
19
    init : function (url) {
20
20
        this._container   = $("#user-video-gallery-main");
21
21
        this._loader      = $("#user-video-gallery-spinner");
 
22
        this._nextPageBtn = $("#user-video-gallery-next");
 
23
        this._prevPageBtn = $("#user-video-gallery-prev");
22
24
 
23
25
        this._working     = false;
24
26
 
25
27
        // Feed URL
26
28
        this.url = url || Helioviewer.api;
27
29
 
 
30
        // Local
 
31
        this._pageSize = this._choosePageSize();
 
32
        this._startIndex = 0;
 
33
 
28
34
        // Remote (may differ from local due to deleted videos, etc)
29
 
        this._numVideos = 20;
 
35
        this._numVideos = 40;
30
36
 
31
37
        this._videos = [];
32
38
 
 
39
        this._setupEventHandlers();
33
40
        this._fetchVideos();
34
41
 
35
42
        // Auto-refresh every couple minutes
44
51
     * Updates video gallery to show new entries
45
52
     */
46
53
    _updateGallery: function () {
47
 
        this._buildHTML(this._videos);
 
54
        var endIndex = Math.min(this._startIndex + this._pageSize,
 
55
                                this._videos.length);
 
56
 
 
57
        this._buildHTML(this._videos.slice(this._startIndex, endIndex));
48
58
    },
49
59
 
50
60
    /**
133
143
 
134
144
            html += "<a target='_blank' href='" + vid.url + "' " +
135
145
                    "alt='video thumbnail'>" +
136
 
                    "<div id='user-video-thumbnail-container'>" +
137
 
                    "<img class='user-video-thumbnail' src='" + img + "' alt='user video thumbnail' />" +
138
 
                    "<div style='text-align: center;'>" +
 
146
                    "<div class='user-video-thumbnail-container'>" +
 
147
                    "<div style='text-align: left; margin-left: 25px;'>" +
139
148
                    when + "</div>" +
 
149
                    "<img src='" + img + "' alt='user video thumbnail' />" +
140
150
                    "</div></a><br />";
141
151
        });
142
152
 
145
155
 
146
156
        this._loader.hide();
147
157
        this._container.append(html);
 
158
        //this._container.fadeIn();
148
159
 
149
160
        this._working = false;
150
161
    },
151
162
 
152
163
    /**
 
164
     * Go to the previous page
 
165
     */
 
166
    _prevPage: function () {
 
167
        if (this._working) {
 
168
            return false;
 
169
        }
 
170
 
 
171
        if (this._startIndex + this._pageSize < this._videos.length) {
 
172
            this._startIndex += this._pageSize;
 
173
            this._updateGallery();
 
174
        }
 
175
 
 
176
        return false;
 
177
    },
 
178
 
 
179
    /**
 
180
     * Go to the next page
 
181
     */
 
182
    _nextPage: function () {
 
183
        if (this._working) {
 
184
            return false;
 
185
        }
 
186
 
 
187
        if (this._startIndex > 0) {
 
188
            this._startIndex = Math.max(0, this._startIndex - this._pageSize);
 
189
            this._updateGallery();
 
190
        }
 
191
 
 
192
        return false;
 
193
    },
 
194
 
 
195
    /**
 
196
     * Performs a quick check on the browser height to decide how many video
 
197
     * thumbnails to show at once
 
198
     */
 
199
    _choosePageSize: function () {
 
200
        var height = $(window).height();
 
201
 
 
202
        if (height > 1035) {
 
203
            return 3;
 
204
        } else if (height > 780) {
 
205
            return 2;
 
206
        }
 
207
        return 1;
 
208
    },
 
209
 
 
210
    /**
 
211
     * Enables scrolling through video gallery pages using the mouse wheel
 
212
     */
 
213
    _onMouseWheelMove: function (e, delta) {
 
214
        if (delta > 0) {
 
215
            this._nextPage();
 
216
        } else {
 
217
            this._prevPage();
 
218
        }
 
219
        return false;
 
220
    },
 
221
 
 
222
    /**
 
223
     * Resize user video gallery to use up any available space
 
224
     */
 
225
    _onResize: function (e) {
 
226
        var oldPageSize = this._pageSize;
 
227
 
 
228
        // Determine new optimal pageSize
 
229
        this._pageSize = this._choosePageSize();
 
230
 
 
231
        // Don't update HTML no videos have been retrieved yet
 
232
        if (this._videos.length === 0) {
 
233
            return;
 
234
        }
 
235
 
 
236
        // Only update HTML if the page size has changed
 
237
        if (this._pageSize !== oldPageSize) {
 
238
            // Expand gallery size when currently displaying last page and
 
239
            // resizing
 
240
            if (this._startIndex + this._pageSize > this._videos.length) {
 
241
                this._startIndex = this._videos.length - this._pageSize;
 
242
            }
 
243
            this._updateGallery();
 
244
        }
 
245
    },
 
246
 
 
247
    /**
153
248
     * Hover event handler
154
249
     */
155
250
    _onVideoHover: function (event) {
158
253
        } else {
159
254
            $(this).find("img").removeClass("video-glow");
160
255
        }
 
256
    },
 
257
 
 
258
    /**
 
259
     * Setup event handlers
 
260
     */
 
261
    _setupEventHandlers: function () {
 
262
        this._nextPageBtn.click($.proxy(this._nextPage, this));
 
263
        this._prevPageBtn.click($.proxy(this._prevPage, this));
 
264
 
 
265
        $(window).resize($.proxy(this._onResize, this));
 
266
 
 
267
        // Setup hover event handler
 
268
        //this._container.find("a")
 
269
        //    .live('mouseover mouseout', this._onVideoHover);
 
270
 
 
271
        this._container.mousewheel($.proxy(this._onMouseWheelMove, this));
161
272
    }
162
 
 
163
273
});