1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
// Copyright 2009 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview provides a reusable photo UI component that renders photos that
* contains metadata (such as captions, description, thumbnail/high resolution
* versions, etc).
*
* goog.ui.media.Photo is actually a {@link goog.ui.ControlRenderer},
* a stateless class - that could/should be used as a Singleton with the static
* method {@code goog.ui.media.Photo.getInstance} -, that knows how to render
* Photos. It is designed to be used with a {@link goog.ui.Control}, which will
* actually control the media renderer and provide the {@link goog.ui.Component}
* base. This design guarantees that all different types of medias will behave
* alike but will look different.
*
* goog.ui.media.Photo expects {@code goog.ui.media.MediaModel} on
* {@code goog.ui.Control.getModel} as data models.
*
* Example of usage:
*
* <pre>
* var photo = goog.ui.media.Photo.newControl(
* new goog.ui.media.MediaModel('http://hostname/file.jpg'));
* photo.render(goog.dom.getElement('parent'));
* </pre>
*
* Photo medias currently support the following states:
*
* <ul>
* <li> {@link goog.ui.Component.State.HOVER}: mouse cursor is over the photo.
* <li> {@link goog.ui.Component.State.SELECTED}: photo is being displayed.
* </ul>
*
* Which can be accessed by
*
* <pre>
* photo.setHighlighted(true);
* photo.setSelected(true);
* </pre>
*
*/
goog.provide('goog.ui.media.Photo');
goog.require('goog.ui.media.Media');
goog.require('goog.ui.media.MediaRenderer');
/**
* Subclasses a goog.ui.media.MediaRenderer to provide a Photo specific media
* renderer. Provides a base class for any other renderer that wants to display
* photos.
*
* This class is meant to be used as a singleton static stateless class, that
* takes {@code goog.ui.media.Media} instances and renders it.
*
* This design is patterned after
* http://go/closure_control_subclassing
*
* @constructor
* @extends {goog.ui.media.MediaRenderer}
*/
goog.ui.media.Photo = function() {
goog.ui.media.MediaRenderer.call(this);
};
goog.inherits(goog.ui.media.Photo, goog.ui.media.MediaRenderer);
goog.addSingletonGetter(goog.ui.media.Photo);
/**
* Default CSS class to be applied to the root element of components rendered
* by this renderer.
*
* @type {string}
*/
goog.ui.media.Photo.CSS_CLASS = goog.getCssName('goog-ui-media-photo');
/**
* A static convenient method to construct a goog.ui.media.Media control out of
* a photo {@code goog.ui.media.MediaModel}. It sets it as the data model
* goog.ui.media.Photo renderer uses, sets the states supported by the renderer,
* and returns a Control that binds everything together. This is what you
* should be using for constructing Photos, except if you need finer control
* over the configuration.
*
* @param {goog.ui.media.MediaModel} dataModel The photo data model.
* @return {goog.ui.media.Media} A goog.ui.Control subclass with the photo
* renderer.
*/
goog.ui.media.Photo.newControl = function(dataModel) {
var control = new goog.ui.media.Media(
dataModel,
goog.ui.media.Photo.getInstance());
return control;
};
/**
* Creates the initial DOM structure of a photo.
*
* @param {goog.ui.Control} c The media control.
* @return {Element} A DOM structure that represents the control.
* @override
*/
goog.ui.media.Photo.prototype.createDom = function(c) {
var control = /** @type {goog.ui.media.Media} */ (c);
var div = goog.ui.media.Photo.superClass_.createDom.call(this, control);
var img = control.getDomHelper().createDom('img', {
src: control.getDataModel().getPlayer().getUrl(),
className: goog.getCssName(this.getCssClass(), 'image')
});
div.appendChild(img);
return div;
};
/**
* Returns the CSS class to be applied to the root element of components
* rendered using this renderer.
* @return {string} Renderer-specific CSS class.
* @override
*/
goog.ui.media.Photo.prototype.getCssClass = function() {
return goog.ui.media.Photo.CSS_CLASS;
};
|
