2011-09-28 13:16:26 +00:00
|
|
|
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2019-02-09 03:21:36 +00:00
|
|
|
const { Clutter, GObject, Shell, St } = imports.gi;
|
2013-01-31 15:07:16 +00:00
|
|
|
const Signals = imports.signals;
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2010-03-17 14:36:57 +00:00
|
|
|
const Params = imports.misc.params;
|
|
|
|
const Tweener = imports.ui.tweener;
|
|
|
|
|
2017-07-18 17:47:27 +00:00
|
|
|
var DEFAULT_FADE_FACTOR = 0.4;
|
2019-05-31 14:42:56 +00:00
|
|
|
var VIGNETTE_BRIGHTNESS = 0.2;
|
2017-07-18 17:47:27 +00:00
|
|
|
var VIGNETTE_SHARPNESS = 0.7;
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
const VIGNETTE_DECLARATIONS = '\
|
|
|
|
uniform float brightness;\n\
|
|
|
|
uniform float vignette_sharpness;\n';
|
|
|
|
|
|
|
|
const VIGNETTE_CODE = '\
|
|
|
|
cogl_color_out.a = cogl_color_in.a;\n\
|
|
|
|
cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);\n\
|
|
|
|
vec2 position = cogl_tex_coord_in[0].xy - 0.5;\n\
|
|
|
|
float t = length(2.0 * position);\n\
|
|
|
|
t = clamp(t, 0.0, 1.0);\n\
|
|
|
|
float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
|
|
|
|
cogl_color_out.a = cogl_color_out.a * (1 - pixel_brightness * brightness);';
|
2012-12-15 01:41:03 +00:00
|
|
|
|
2017-10-31 01:23:39 +00:00
|
|
|
var RadialShaderQuad = GObject.registerClass(
|
|
|
|
class RadialShaderQuad extends Shell.GLSLQuad {
|
2017-10-31 00:03:21 +00:00
|
|
|
_init(params) {
|
2017-10-31 01:23:39 +00:00
|
|
|
super._init(params);
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
this._brightnessLocation = this.get_uniform_location('brightness');
|
|
|
|
this._sharpnessLocation = this.get_uniform_location('vignette_sharpness');
|
|
|
|
|
|
|
|
this.brightness = 1.0;
|
|
|
|
this.vignetteSharpness = 0.0;
|
2017-10-31 01:23:39 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
2017-10-31 00:03:21 +00:00
|
|
|
vfunc_build_pipeline() {
|
2012-12-15 01:41:03 +00:00
|
|
|
this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT,
|
2014-03-06 15:17:36 +00:00
|
|
|
VIGNETTE_DECLARATIONS, VIGNETTE_CODE, true);
|
2017-10-31 01:23:39 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
get brightness() {
|
|
|
|
return this._brightness;
|
2017-10-31 01:23:39 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
set brightness(v) {
|
|
|
|
this._brightness = v;
|
|
|
|
this.set_uniform_float(this._brightnessLocation,
|
|
|
|
1, [this._brightness]);
|
2017-10-31 01:23:39 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
get vignetteSharpness() {
|
|
|
|
return this._sharpness;
|
2017-10-31 01:23:39 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
|
|
|
set vignetteSharpness(v) {
|
|
|
|
this._sharpness = v;
|
|
|
|
this.set_uniform_float(this._sharpnessLocation,
|
|
|
|
1, [this._sharpness]);
|
|
|
|
}
|
2012-12-15 01:41:03 +00:00
|
|
|
});
|
|
|
|
|
2009-09-22 19:24:14 +00:00
|
|
|
/**
|
|
|
|
* Lightbox:
|
|
|
|
* @container: parent Clutter.Container
|
2010-03-17 14:36:57 +00:00
|
|
|
* @params: (optional) additional parameters:
|
|
|
|
* - inhibitEvents: whether to inhibit events for @container
|
|
|
|
* - width: shade actor width
|
|
|
|
* - height: shade actor height
|
2012-02-06 22:28:48 +00:00
|
|
|
* - fadeInTime: seconds used to fade in
|
|
|
|
* - fadeOutTime: seconds used to fade out
|
2009-09-22 19:24:14 +00:00
|
|
|
*
|
|
|
|
* Lightbox creates a dark translucent "shade" actor to hide the
|
|
|
|
* contents of @container, and allows you to specify particular actors
|
|
|
|
* in @container to highlight by bringing them above the shade. It
|
|
|
|
* tracks added and removed actors in @container while the lightboxing
|
|
|
|
* is active, and ensures that all actors are returned to their
|
|
|
|
* original stacking order when the lightboxing is removed. (However,
|
|
|
|
* if actors are restacked by outside code while the lightboxing is
|
|
|
|
* active, the lightbox may later revert them back to their original
|
|
|
|
* order.)
|
|
|
|
*
|
|
|
|
* By default, the shade window will have the height and width of
|
|
|
|
* @container and will track any changes in its size. You can override
|
2010-03-17 14:36:57 +00:00
|
|
|
* this by passing an explicit width and height in @params.
|
2009-09-22 19:24:14 +00:00
|
|
|
*/
|
2017-10-31 01:19:44 +00:00
|
|
|
var Lightbox = class Lightbox {
|
|
|
|
constructor(container, params) {
|
2010-03-17 14:36:57 +00:00
|
|
|
params = Params.parse(params, { inhibitEvents: false,
|
|
|
|
width: null,
|
|
|
|
height: null,
|
2013-05-12 15:39:44 +00:00
|
|
|
fadeFactor: DEFAULT_FADE_FACTOR,
|
2012-12-15 01:41:03 +00:00
|
|
|
radialEffect: false,
|
2010-03-17 14:36:57 +00:00
|
|
|
});
|
|
|
|
|
2009-09-22 19:24:14 +00:00
|
|
|
this._container = container;
|
|
|
|
this._children = container.get_children();
|
2012-02-06 22:28:48 +00:00
|
|
|
this._fadeFactor = params.fadeFactor;
|
2014-07-24 13:40:19 +00:00
|
|
|
this._radialEffect = Clutter.feature_available(Clutter.FeatureFlags.SHADERS_GLSL) && params.radialEffect;
|
|
|
|
if (this._radialEffect)
|
2012-12-15 01:41:03 +00:00
|
|
|
this.actor = new RadialShaderQuad({ x: 0,
|
|
|
|
y: 0,
|
|
|
|
reactive: params.inhibitEvents });
|
|
|
|
else
|
|
|
|
this.actor = new St.Bin({ x: 0,
|
|
|
|
y: 0,
|
2014-03-06 15:17:36 +00:00
|
|
|
opacity: 0,
|
2012-12-15 01:41:03 +00:00
|
|
|
style_class: 'lightbox',
|
|
|
|
reactive: params.inhibitEvents });
|
2009-09-22 19:24:14 +00:00
|
|
|
|
|
|
|
container.add_actor(this.actor);
|
|
|
|
this.actor.raise_top();
|
2010-03-17 14:36:57 +00:00
|
|
|
this.actor.hide();
|
2012-02-06 22:28:48 +00:00
|
|
|
this.shown = false;
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2017-12-02 00:27:35 +00:00
|
|
|
this.actor.connect('destroy', this._onDestroy.bind(this));
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2010-03-17 14:36:57 +00:00
|
|
|
if (params.width && params.height) {
|
|
|
|
this.actor.width = params.width;
|
|
|
|
this.actor.height = params.height;
|
2009-09-22 19:24:14 +00:00
|
|
|
} else {
|
2012-02-15 15:16:23 +00:00
|
|
|
let constraint = new Clutter.BindConstraint({ source: container,
|
|
|
|
coordinate: Clutter.BindCoordinate.ALL });
|
|
|
|
this.actor.add_constraint(constraint);
|
2009-09-22 19:24:14 +00:00
|
|
|
}
|
|
|
|
|
2017-12-02 00:27:35 +00:00
|
|
|
this._actorAddedSignalId = container.connect('actor-added', this._actorAdded.bind(this));
|
|
|
|
this._actorRemovedSignalId = container.connect('actor-removed', this._actorRemoved.bind(this));
|
2009-09-22 19:24:14 +00:00
|
|
|
|
|
|
|
this._highlighted = null;
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2017-10-31 00:03:21 +00:00
|
|
|
_actorAdded(container, newChild) {
|
2009-09-22 19:24:14 +00:00
|
|
|
let children = this._container.get_children();
|
|
|
|
let myIndex = children.indexOf(this.actor);
|
|
|
|
let newChildIndex = children.indexOf(newChild);
|
|
|
|
|
2009-09-22 21:48:44 +00:00
|
|
|
if (newChildIndex > myIndex) {
|
2009-09-22 19:24:14 +00:00
|
|
|
// The child was added above the shade (presumably it was
|
|
|
|
// made the new top-most child). Move it below the shade,
|
|
|
|
// and add it to this._children as the new topmost actor.
|
|
|
|
newChild.lower(this.actor);
|
|
|
|
this._children.push(newChild);
|
2009-09-22 21:48:44 +00:00
|
|
|
} else if (newChildIndex == 0) {
|
|
|
|
// Bottom of stack
|
|
|
|
this._children.unshift(newChild);
|
2009-09-22 19:24:14 +00:00
|
|
|
} else {
|
|
|
|
// Somewhere else; insert it into the correct spot
|
2009-09-22 21:48:44 +00:00
|
|
|
let prevChild = this._children.indexOf(children[newChildIndex - 1]);
|
|
|
|
if (prevChild != -1) // paranoia
|
|
|
|
this._children.splice(prevChild + 1, 0, newChild);
|
2009-09-22 19:24:14 +00:00
|
|
|
}
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2009-09-22 19:24:14 +00:00
|
|
|
|
2017-10-31 00:03:21 +00:00
|
|
|
show(fadeInTime) {
|
2013-05-12 15:39:44 +00:00
|
|
|
fadeInTime = fadeInTime || 0;
|
|
|
|
|
2013-01-17 22:55:17 +00:00
|
|
|
Tweener.removeTweens(this.actor);
|
2014-03-06 15:17:36 +00:00
|
|
|
if (this._radialEffect) {
|
2010-03-17 14:36:57 +00:00
|
|
|
Tweener.addTween(this.actor,
|
2014-03-06 15:17:36 +00:00
|
|
|
{ brightness: VIGNETTE_BRIGHTNESS,
|
|
|
|
vignetteSharpness: VIGNETTE_SHARPNESS,
|
2013-05-12 15:39:44 +00:00
|
|
|
time: fadeInTime,
|
2012-02-06 22:28:48 +00:00
|
|
|
transition: 'easeOutQuad',
|
2017-10-31 00:38:18 +00:00
|
|
|
onComplete: () => {
|
2012-02-06 22:28:48 +00:00
|
|
|
this.shown = true;
|
2013-01-17 22:55:17 +00:00
|
|
|
this.emit('shown');
|
2017-10-31 00:38:18 +00:00
|
|
|
}
|
2010-03-17 14:36:57 +00:00
|
|
|
});
|
|
|
|
} else {
|
2014-03-06 15:17:36 +00:00
|
|
|
Tweener.addTween(this.actor,
|
|
|
|
{ opacity: 255 * this._fadeFactor,
|
|
|
|
time: fadeInTime,
|
|
|
|
transition: 'easeOutQuad',
|
2017-10-31 00:38:18 +00:00
|
|
|
onComplete: () => {
|
2014-03-06 15:17:36 +00:00
|
|
|
this.shown = true;
|
|
|
|
this.emit('shown');
|
2017-10-31 00:38:18 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
});
|
2010-03-17 14:36:57 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
|
2010-03-17 14:36:57 +00:00
|
|
|
this.actor.show();
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2010-03-17 14:36:57 +00:00
|
|
|
|
2017-10-31 00:03:21 +00:00
|
|
|
hide(fadeOutTime) {
|
2013-05-12 15:39:44 +00:00
|
|
|
fadeOutTime = fadeOutTime || 0;
|
|
|
|
|
2012-02-06 22:28:48 +00:00
|
|
|
this.shown = false;
|
2013-01-17 22:55:17 +00:00
|
|
|
Tweener.removeTweens(this.actor);
|
2014-03-06 15:17:36 +00:00
|
|
|
if (this._radialEffect) {
|
2010-03-17 14:36:57 +00:00
|
|
|
Tweener.addTween(this.actor,
|
2014-03-06 15:17:36 +00:00
|
|
|
{ brightness: 1.0,
|
|
|
|
vignetteSharpness: 0.0,
|
|
|
|
opacity: 0,
|
2013-05-12 15:39:44 +00:00
|
|
|
time: fadeOutTime,
|
2010-03-17 14:36:57 +00:00
|
|
|
transition: 'easeOutQuad',
|
2017-10-31 00:38:18 +00:00
|
|
|
onComplete: () => {
|
2010-03-17 14:36:57 +00:00
|
|
|
this.actor.hide();
|
2017-10-31 00:38:18 +00:00
|
|
|
}
|
2010-03-17 14:36:57 +00:00
|
|
|
});
|
|
|
|
} else {
|
2014-03-06 15:17:36 +00:00
|
|
|
Tweener.addTween(this.actor,
|
|
|
|
{ opacity: 0,
|
|
|
|
time: fadeOutTime,
|
|
|
|
transition: 'easeOutQuad',
|
2017-10-31 00:38:18 +00:00
|
|
|
onComplete: () => {
|
2014-03-06 15:17:36 +00:00
|
|
|
this.actor.hide();
|
2017-10-31 00:38:18 +00:00
|
|
|
}
|
2014-03-06 15:17:36 +00:00
|
|
|
});
|
2010-03-17 14:36:57 +00:00
|
|
|
}
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2010-03-17 14:36:57 +00:00
|
|
|
|
2017-10-31 00:03:21 +00:00
|
|
|
_actorRemoved(container, child) {
|
2009-09-22 19:24:14 +00:00
|
|
|
let index = this._children.indexOf(child);
|
|
|
|
if (index != -1) // paranoia
|
|
|
|
this._children.splice(index, 1);
|
|
|
|
|
|
|
|
if (child == this._highlighted)
|
|
|
|
this._highlighted = null;
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2009-09-22 19:24:14 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* highlight:
|
|
|
|
* @window: actor to highlight
|
|
|
|
*
|
|
|
|
* Highlights the indicated actor and unhighlights any other
|
|
|
|
* currently-highlighted actor. With no arguments or a false/null
|
|
|
|
* argument, all actors will be unhighlighted.
|
|
|
|
*/
|
2017-10-31 00:03:21 +00:00
|
|
|
highlight(window) {
|
2009-09-22 19:24:14 +00:00
|
|
|
if (this._highlighted == window)
|
|
|
|
return;
|
|
|
|
|
|
|
|
// Walk this._children raising and lowering actors as needed.
|
|
|
|
// Things get a little tricky if the to-be-raised and
|
|
|
|
// to-be-lowered actors were originally adjacent, in which
|
|
|
|
// case we may need to indicate some *other* actor as the new
|
|
|
|
// sibling of the to-be-lowered one.
|
|
|
|
|
|
|
|
let below = this.actor;
|
2009-09-22 21:48:44 +00:00
|
|
|
for (let i = this._children.length - 1; i >= 0; i--) {
|
2009-09-22 19:24:14 +00:00
|
|
|
if (this._children[i] == window)
|
|
|
|
this._children[i].raise_top();
|
|
|
|
else if (this._children[i] == this._highlighted)
|
|
|
|
this._children[i].lower(below);
|
|
|
|
else
|
|
|
|
below = this._children[i];
|
|
|
|
}
|
|
|
|
|
|
|
|
this._highlighted = window;
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2009-09-22 19:24:14 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* destroy:
|
|
|
|
*
|
2010-02-18 15:43:58 +00:00
|
|
|
* Destroys the lightbox.
|
2009-09-22 19:24:14 +00:00
|
|
|
*/
|
2017-10-31 00:03:21 +00:00
|
|
|
destroy() {
|
2010-02-18 15:43:58 +00:00
|
|
|
this.actor.destroy();
|
2017-10-31 01:19:44 +00:00
|
|
|
}
|
2010-02-18 15:43:58 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* _onDestroy:
|
|
|
|
*
|
|
|
|
* This is called when the lightbox' actor is destroyed, either
|
|
|
|
* by destroying its container or by explicitly calling this.destroy().
|
|
|
|
*/
|
2017-10-31 00:03:21 +00:00
|
|
|
_onDestroy() {
|
2009-09-22 19:24:14 +00:00
|
|
|
this._container.disconnect(this._actorAddedSignalId);
|
|
|
|
this._container.disconnect(this._actorRemovedSignalId);
|
|
|
|
|
|
|
|
this.highlight(null);
|
|
|
|
}
|
2017-10-31 01:19:44 +00:00
|
|
|
};
|
2013-01-17 22:55:17 +00:00
|
|
|
Signals.addSignalMethods(Lightbox.prototype);
|