mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Removed jquery-backstretch that handled the UserBackground
The UserBackground is now handled with CSS3 on body.thm-body This allowed me to remove the #rl-bg so that the "video-on-login-screen" plugin will not work indefinitely.
This commit is contained in:
djmaze
parent
213f5d183e
commit
412d69ce75
|
|
@ -34,7 +34,7 @@ import {
|
|||
Magics
|
||||
} from 'Common/Enums';
|
||||
|
||||
import { $html, leftPanelWidth, leftPanelDisabled, bAnimationSupported, bMobileDevice } from 'Common/Globals';
|
||||
import { $html, leftPanelWidth, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
|
||||
|
||||
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
|
||||
import { runHook } from 'Common/Plugins';
|
||||
|
|
@ -146,14 +146,12 @@ class AppUser extends AbstractApp {
|
|||
|
||||
if (Settings.settingsGet('UserBackgroundHash')) {
|
||||
_.delay(() => {
|
||||
$('#rl-bg')
|
||||
.attr('style', 'background-image: none !important;')
|
||||
.backstretch(userBackground(Settings.settingsGet('UserBackgroundHash')), {
|
||||
fade: bAnimationSupported ? Magics.Time1s : 0,
|
||||
centeredX: true,
|
||||
centeredY: true
|
||||
})
|
||||
.removeAttr('style');
|
||||
const img = userBackground(Settings.settingsGet('UserBackgroundHash')),
|
||||
b = window.document.body;
|
||||
if (img) {
|
||||
b.classList.add('UserBackground');
|
||||
b.style.backgroundImage = "url("+img+")";
|
||||
}
|
||||
}, Magics.Time1s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -234,16 +234,13 @@ function runApp() {
|
|||
jassl(appData.StaticLibJsLink).then(() => {
|
||||
if (window.$) {
|
||||
window.$('#rl-check').remove();
|
||||
|
||||
if (appData.IncludeBackground) {
|
||||
window
|
||||
.$('#rl-bg')
|
||||
.attr('style', 'background-image: none !important;')
|
||||
.backstretch(
|
||||
appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0'),
|
||||
{ fade: 100, centeredX: true, centeredY: true }
|
||||
)
|
||||
.removeAttr('style');
|
||||
}
|
||||
if (appData.IncludeBackground) {
|
||||
const img = appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0'),
|
||||
b = window.document.body;
|
||||
if (img) {
|
||||
b.classList.add('UserBackground');
|
||||
b.style.backgroundImage = "url("+img+")";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div id="rl-bg" class="thm-body"></div>
|
||||
<div id="rl-loading" class="thm-loading" style="opacity:0">
|
||||
<div id="rl-loading-desc"></div>
|
||||
<div class="e-spinner">
|
||||
|
|
@ -21,4 +20,4 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="rl-templates"></div>
|
||||
<div id="rl-hidden"></div>
|
||||
<div id="rl-hidden"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import window from 'window';
|
||||
import _ from '_';
|
||||
import $ from '$';
|
||||
import ko from 'ko';
|
||||
|
||||
import Jua from 'Jua';
|
||||
|
|
@ -48,20 +48,13 @@ class ThemesUserSettings {
|
|||
});
|
||||
|
||||
this.background.hash.subscribe((value) => {
|
||||
const $bg = $('#rl-bg');
|
||||
const b = window.document.body;
|
||||
if (!value) {
|
||||
if ($bg.data('backstretch')) {
|
||||
$bg.backstretch('destroy').attr('style', '');
|
||||
}
|
||||
b.classList.remove('UserBackground');
|
||||
b.removeAttribute('style');
|
||||
} else {
|
||||
$bg
|
||||
.attr('style', 'background-image: none !important;')
|
||||
.backstretch(userBackground(value), {
|
||||
fade: Magics.Time1s,
|
||||
centeredX: true,
|
||||
centeredY: true
|
||||
})
|
||||
.removeAttr('style');
|
||||
b.classList.add('UserBackground');
|
||||
b.style.backgroundImage = "url("+userBackground(value)+")";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
|
||||
#rl-bg {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
.UserBackground {
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#rl-content {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@
|
|||
"gulp-zip": "5.0.1",
|
||||
"ifvisible.js": "1.0.6",
|
||||
"jquery": "3.4.1",
|
||||
"jquery-backstretch": "2.1.18",
|
||||
"js-cookie": "2.2.1",
|
||||
"knockout": "3.4.2",
|
||||
"knockout-sortable": "1.2.0",
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 RainLoop Team
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1 +0,0 @@
|
|||
Fullscreen background video on login screen.
|
||||
|
|
@ -1 +0,0 @@
|
|||
1.1
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<?php
|
||||
|
||||
class VideoOnLoginScreenPlugin extends \RainLoop\Plugins\AbstractPlugin
|
||||
{
|
||||
/**
|
||||
* @return void
|
||||
*/
|
||||
public function Init()
|
||||
{
|
||||
$this->addJs('js/vide/jquery.vide.js');
|
||||
$this->addJs('js/video-on-login.js');
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array
|
||||
*/
|
||||
public function configMapping()
|
||||
{
|
||||
return array(
|
||||
\RainLoop\Plugins\Property::NewInstance('mp4_file')->SetLabel('Url to a mp4 file')
|
||||
->SetPlaceholder('http://')
|
||||
->SetAllowedInJs(true)
|
||||
->SetDefaultValue(''),
|
||||
\RainLoop\Plugins\Property::NewInstance('webm_file')->SetLabel('Url to a webm file')
|
||||
->SetPlaceholder('http://')
|
||||
->SetAllowedInJs(true)
|
||||
->SetDefaultValue(''),
|
||||
\RainLoop\Plugins\Property::NewInstance('ogv_file')->SetLabel('Url to a ogv file')
|
||||
->SetPlaceholder('http://')
|
||||
->SetAllowedInJs(true)
|
||||
->SetDefaultValue(''),
|
||||
\RainLoop\Plugins\Property::NewInstance('playback_rate')->SetLabel('Playback rate')
|
||||
->SetAllowedInJs(true)
|
||||
->SetType(\RainLoop\Enumerations\PluginPropertyType::SELECTION)
|
||||
->SetDefaultValue(array('100%', '25%', '50%', '75%', '125%', '150%', '200%')),
|
||||
\RainLoop\Plugins\Property::NewInstance('muted')->SetLabel('Muted')
|
||||
->SetType(\RainLoop\Enumerations\PluginPropertyType::BOOL)
|
||||
->SetAllowedInJs(true)
|
||||
->SetDefaultValue(true),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
### 0.3.0
|
||||
* Added the `resizing` option.
|
||||
* Updated tests.
|
||||
|
||||
### 0.2.1
|
||||
* Code refactoring.
|
||||
* Updated devDependencies.
|
||||
|
||||
### 0.2.0
|
||||
* Lots of updates since 0.1.0.
|
||||
* Improved code linting.
|
||||
* Cleaned up the repository.
|
||||
* Added bower dependencies.
|
||||
* Updated devDependencies.
|
||||
|
||||
### 0.1.4
|
||||
* Fixed wrong URL parsing.
|
||||
* Changed main files in bower.json.
|
||||
|
||||
### 0.1.3
|
||||
* Path argument can receive list of sources.
|
||||
* Strings with options and pathes can be passed to the constructor directly.
|
||||
* Added `posterType: none` value.
|
||||
* Updated README.
|
||||
* Updated JSDoc.
|
||||
* Updated tests.
|
||||
* Updated examples.
|
||||
* Added CONTRIBUTING.md
|
||||
* Other small fixes and optimizations.
|
||||
|
||||
### 0.1.2
|
||||
* Restored `posterType` option to specify poster image type.
|
||||
|
||||
### 0.1.1
|
||||
* Support of absolute URLs (#10).
|
||||
* Fixed the CORS issue (#11).
|
||||
* Fixed the destroy method.
|
||||
* Fixed parsing of empty options.
|
||||
* Poster and video positions are the same now.
|
||||
* Syntax and behavior of the position option are similar to the CSS `background-position` property.
|
||||
* Add support of the `.jpeg` extension.
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
CONTRIBUTING
|
||||
====
|
||||
|
||||
1. Fork.
|
||||
2. Run `npm install`.
|
||||
3. Make your changes on the `src` folder.
|
||||
4. Update tests.
|
||||
5. Run `npm test`, make sure everything is okay.
|
||||
6. Submit a pull request to the master branch.
|
||||
|
||||
Thanks.
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Ilya Makarov, http://vodkabears.github.io
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
[](http://badge.fury.io/bo/vide)
|
||||
[](https://travis-ci.org/VodkaBears/Vide)
|
||||
[](https://david-dm.org/vodkabears/vide#info=devDependencies)
|
||||
Vide
|
||||
====
|
||||
|
||||
Easy as hell jQuery plugin for video backgrounds.
|
||||
|
||||
## Notes
|
||||
|
||||
* All modern desktop browsers are supported.
|
||||
* IE9+
|
||||
* iOS plays video from a browser only in the native player. So video for iOS is disabled, only fullscreen poster will be used.
|
||||
* Some android devices play video, some not — go figure. So video for android is disabled, only fullscreen poster will be used.
|
||||
|
||||
## Instructions
|
||||
|
||||
Download it from [GitHub](https://github.com/VodkaBears/Vide/releases/latest) or via Bower:
|
||||
`bower install vide`
|
||||
|
||||
Include plugin: `<script src="js/jquery.vide.min.js"></script>`
|
||||
|
||||
Prepare your video in several formats like '.webm', '.mp4' for cross browser compatability, also add a poster with `.jpg`, `.png` or `.gif` extension:
|
||||
```
|
||||
path/
|
||||
├── to/
|
||||
│ ├── video.mp4
|
||||
│ ├── video.ogv
|
||||
│ ├── video.webm
|
||||
│ └── video.jpg
|
||||
```
|
||||
|
||||
Add `data-vide-bg` attribute with a path to the video and poster without extension, video and poster must have the same name. Add `data-vide-options` to pass vide options, if you need it. By default video is muted, looped and starts automatically.
|
||||
```html
|
||||
<div style="width: 1000px; height: 500px;"
|
||||
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
|
||||
</div>
|
||||
```
|
||||
|
||||
Also you can set extended path:
|
||||
```html
|
||||
<div style="width: 1000px; height: 500px;"
|
||||
data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster" data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
|
||||
</div>
|
||||
```
|
||||
|
||||
In some situations it can be helpful to initialize it with JS because Vide doesn't have mutation observers:
|
||||
```js
|
||||
$("#myBlock").vide("path/to/video");
|
||||
$("#myBlock").vide("path/to/video", {
|
||||
...options...
|
||||
});
|
||||
$("#myBlock").vide({
|
||||
mp4: path/to/video1,
|
||||
webm: path/to/video2,
|
||||
ogv: path/to/video3,
|
||||
poster: path/to/poster
|
||||
}, {
|
||||
...options...
|
||||
});
|
||||
$("#myBlock").vide("extended path as a string", "options as a string");
|
||||
```
|
||||
|
||||
Easy as hell.
|
||||
|
||||
## Options
|
||||
|
||||
Below is a complete list of options and matching default values:
|
||||
|
||||
```js
|
||||
$("#yourElement").vide({
|
||||
volume: 1,
|
||||
playbackRate: 1,
|
||||
muted: true,
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
position: "50% 50%", // Similar to the CSS `background-position` property.
|
||||
posterType: "detect", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
|
||||
resizing: true // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
|
||||
});
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
Below is a complete list of methods:
|
||||
|
||||
```js
|
||||
// Get instance of the plugin
|
||||
var instance = $("#yourElement").data("vide");
|
||||
|
||||
// Get video element of the background. Do what you want.
|
||||
instance.getVideoObject();
|
||||
|
||||
// Resize video background.
|
||||
// It calls automatically, if window resize (or element, if you will use something like https://github.com/cowboy/jquery-resize).
|
||||
instance.resize();
|
||||
|
||||
// Destroy plugin instance
|
||||
instance.destroy();
|
||||
```
|
||||
|
||||
## Resizing
|
||||
|
||||
The Vide plugin resizes if the window resizes. If you will use something like https://github.com/cowboy/jquery-resize, it will resize automatically when the container resizes. Or simply use `resize()` method whenever you need.
|
||||
|
||||
Set the `resizing` option to false to disable auto-resizing.
|
||||
|
||||
## Encoding video
|
||||
|
||||
http://diveintohtml5.info/video.html#miro
|
||||
|
||||
## Ruby Gem
|
||||
|
||||
[Vider](https://github.com/wazery/vider) by Islam Wazery.
|
||||
|
||||
## License
|
||||
|
||||
```
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Ilya Makarov, http://vodkabears.github.io
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
```
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
{
|
||||
"name": "vide",
|
||||
"version": "0.3.0",
|
||||
"homepage": "http://vodkabears.github.io/vide/",
|
||||
"authors": [
|
||||
"Ilya Makarov <dfrost.00@gmail.com>"
|
||||
],
|
||||
"description": "Easy as hell jQuery plugin for video backgrounds.",
|
||||
"main": "dist/jquery.vide.js",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"examples/",
|
||||
"libs/",
|
||||
"src/",
|
||||
"test/",
|
||||
"*.md",
|
||||
"Gruntfile.js",
|
||||
"package.json",
|
||||
"vide.jquery.json"
|
||||
],
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"plugin",
|
||||
"jquery-plugin",
|
||||
"video",
|
||||
"background",
|
||||
"ui",
|
||||
"responsive",
|
||||
"declarative"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"qunit": "~1.15.0",
|
||||
"jquery": "jquery#^1.11.1",
|
||||
"jquery2": "jquery#^2.1.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,442 +0,0 @@
|
|||
/*
|
||||
* Vide - v0.3.0
|
||||
* Easy as hell jQuery plugin for video backgrounds.
|
||||
* http://vodkabears.github.io/vide/
|
||||
*
|
||||
* Made by Ilya Makarov
|
||||
* Under MIT License
|
||||
*/
|
||||
!(function($, window, document, navigator) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Vide settings
|
||||
* @private
|
||||
*/
|
||||
var pluginName = "vide",
|
||||
defaults = {
|
||||
volume: 1,
|
||||
playbackRate: 1,
|
||||
muted: true,
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
position: "50% 50%",
|
||||
posterType: "detect",
|
||||
resizing: true
|
||||
},
|
||||
|
||||
// is iOs?
|
||||
isIOS = /iPad|iPhone|iPod/i.test(navigator.userAgent),
|
||||
|
||||
// is Android?
|
||||
isAndroid = /Android/i.test(navigator.userAgent);
|
||||
|
||||
/**
|
||||
* Parse string with options
|
||||
* @param {String} str
|
||||
* @returns {Object|String}
|
||||
* @private
|
||||
*/
|
||||
function parseOptions(str) {
|
||||
var obj = {},
|
||||
delimiterIndex,
|
||||
option,
|
||||
prop, val,
|
||||
arr, len,
|
||||
i;
|
||||
|
||||
// remove spaces around delimiters and split
|
||||
arr = str.replace(/\s*:\s*/g, ":").replace(/\s*,\s*/g, ",").split(",");
|
||||
|
||||
// parse string
|
||||
for (i = 0, len = arr.length; i < len; i++) {
|
||||
option = arr[i];
|
||||
|
||||
// Ignore urls and string without colon delimiters
|
||||
if (option.search(/^(http|https|ftp):\/\//) !== -1 ||
|
||||
option.search(":") === -1)
|
||||
{
|
||||
break;
|
||||
}
|
||||
|
||||
delimiterIndex = option.indexOf(":");
|
||||
prop = option.substring(0, delimiterIndex);
|
||||
val = option.substring(delimiterIndex + 1);
|
||||
|
||||
// if val is an empty string, make it undefined
|
||||
if (!val) {
|
||||
val = undefined;
|
||||
}
|
||||
|
||||
// convert string value if it is like a boolean
|
||||
if (typeof val === "string") {
|
||||
val = val === "true" || (val === "false" ? false : val);
|
||||
}
|
||||
|
||||
// convert string value if it is like a number
|
||||
if (typeof val === "string") {
|
||||
val = !isNaN(val) ? +val : val;
|
||||
}
|
||||
|
||||
obj[prop] = val;
|
||||
}
|
||||
|
||||
// if nothing is parsed
|
||||
if (prop == null && val == null) {
|
||||
return str;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse position option
|
||||
* @param {String} str
|
||||
* @returns {Object}
|
||||
* @private
|
||||
*/
|
||||
function parsePosition(str) {
|
||||
str = "" + str;
|
||||
|
||||
// default value is a center
|
||||
var args = str.split(/\s+/),
|
||||
x = "50%", y = "50%",
|
||||
len, arg,
|
||||
i;
|
||||
|
||||
for (i = 0, len = args.length; i < len; i++) {
|
||||
arg = args[i];
|
||||
|
||||
// convert values
|
||||
if (arg === "left") {
|
||||
x = "0%";
|
||||
} else if (arg === "right") {
|
||||
x = "100%";
|
||||
} else if (arg === "top") {
|
||||
y = "0%";
|
||||
} else if (arg === "bottom") {
|
||||
y = "100%";
|
||||
} else if (arg === "center") {
|
||||
if (i === 0) {
|
||||
x = "50%";
|
||||
} else {
|
||||
y = "50%";
|
||||
}
|
||||
} else {
|
||||
if (i === 0) {
|
||||
x = arg;
|
||||
} else {
|
||||
y = arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
/**
|
||||
* Search poster
|
||||
* @param {String} path
|
||||
* @param {Function} callback
|
||||
* @private
|
||||
*/
|
||||
function findPoster(path, callback) {
|
||||
var onLoad = function() {
|
||||
callback(this.src);
|
||||
};
|
||||
|
||||
$("<img src='" + path + ".gif'>").load(onLoad);
|
||||
$("<img src='" + path + ".jpg'>").load(onLoad);
|
||||
$("<img src='" + path + ".jpeg'>").load(onLoad);
|
||||
$("<img src='" + path + ".png'>").load(onLoad);
|
||||
}
|
||||
|
||||
/**
|
||||
* Vide constructor
|
||||
* @param {HTMLElement} element
|
||||
* @param {Object|String} path
|
||||
* @param {Object|String} options
|
||||
* @constructor
|
||||
*/
|
||||
function Vide(element, path, options) {
|
||||
this.$element = $(element);
|
||||
|
||||
// parse path
|
||||
if (typeof path === "string") {
|
||||
path = parseOptions(path);
|
||||
}
|
||||
|
||||
// parse options
|
||||
if (!options) {
|
||||
options = {};
|
||||
} else if (typeof options === "string") {
|
||||
options = parseOptions(options);
|
||||
}
|
||||
|
||||
// remove extension
|
||||
if (typeof path === "string") {
|
||||
path = path.replace(/\.\w*$/, "");
|
||||
} else if (typeof path === "object") {
|
||||
for (var i in path) {
|
||||
if (path.hasOwnProperty(i)) {
|
||||
path[i] = path[i].replace(/\.\w*$/, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
this.path = path;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization
|
||||
* @public
|
||||
*/
|
||||
Vide.prototype.init = function() {
|
||||
var vide = this,
|
||||
position = parsePosition(vide.settings.position),
|
||||
sources,
|
||||
poster;
|
||||
|
||||
// Set video wrapper styles
|
||||
vide.$wrapper = $("<div>").css({
|
||||
"position": "absolute",
|
||||
"z-index": -1,
|
||||
"top": 0,
|
||||
"left": 0,
|
||||
"bottom": 0,
|
||||
"right": 0,
|
||||
"overflow": "hidden",
|
||||
"-webkit-background-size": "cover",
|
||||
"-moz-background-size": "cover",
|
||||
"-o-background-size": "cover",
|
||||
"background-size": "cover",
|
||||
"background-repeat": "no-repeat",
|
||||
"background-position": position.x + " " + position.y
|
||||
});
|
||||
|
||||
// Get poster path
|
||||
poster = vide.path;
|
||||
if (typeof vide.path === "object") {
|
||||
if (vide.path.poster) {
|
||||
poster = vide.path.poster;
|
||||
} else {
|
||||
if (vide.path.mp4) {
|
||||
poster = vide.path.mp4;
|
||||
} else if (vide.path.webm) {
|
||||
poster = vide.path.webm;
|
||||
} else if (vide.path.ogv) {
|
||||
poster = vide.path.ogv;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set video poster
|
||||
// if (vide.settings.posterType === "detect") {
|
||||
// findPoster(poster, function(url) {
|
||||
// vide.$wrapper.css("background-image", "url(" + url + ")");
|
||||
// });
|
||||
// } else if (vide.settings.posterType !== "none") {
|
||||
// vide.$wrapper
|
||||
// .css("background-image", "url(" + poster + "." + vide.settings.posterType + ")");
|
||||
// }
|
||||
|
||||
// if parent element has a static position, make it relative
|
||||
if (vide.$element.css("position") === "static") {
|
||||
vide.$element.css("position", "relative");
|
||||
}
|
||||
|
||||
vide.$element.prepend(vide.$wrapper);
|
||||
|
||||
if (!isIOS && !isAndroid) {
|
||||
sources = "";
|
||||
|
||||
if (typeof vide.path === "object") {
|
||||
if (vide.path.mp4) {
|
||||
sources += "<source src='" + vide.path.mp4 + ".mp4' type='video/mp4'>";
|
||||
}
|
||||
if (vide.path.webm) {
|
||||
sources += "<source src='" + vide.path.webm + ".webm' type='video/webm'>";
|
||||
}
|
||||
if (vide.path.ogv) {
|
||||
sources += "<source src='" + vide.path.ogv + ".ogv' type='video/ogv'>";
|
||||
}
|
||||
|
||||
vide.$video = $("<video>" + sources + "</video>");
|
||||
} else {
|
||||
vide.$video = $("<video>" +
|
||||
"<source src='" + vide.path + ".mp4' type='video/mp4'>" +
|
||||
"<source src='" + vide.path + ".webm' type='video/webm'>" +
|
||||
"<source src='" + vide.path + ".ogv' type='video/ogg'>" +
|
||||
"</video>");
|
||||
}
|
||||
|
||||
// Disable visibility, while loading
|
||||
vide.$video.css("visibility", "hidden");
|
||||
|
||||
// Set video properties
|
||||
vide.$video.prop({
|
||||
autoplay: vide.settings.autoplay,
|
||||
loop: vide.settings.loop,
|
||||
volume: vide.settings.volume,
|
||||
muted: vide.settings.muted,
|
||||
playbackRate: vide.settings.playbackRate
|
||||
});
|
||||
|
||||
// Append video
|
||||
vide.$wrapper.append(vide.$video);
|
||||
|
||||
// Video alignment
|
||||
vide.$video.css({
|
||||
"margin": "auto",
|
||||
"position": "absolute",
|
||||
"z-index": -1,
|
||||
"top": position.y,
|
||||
"left": position.x,
|
||||
"-webkit-transform": "translate(-" + position.x + ", -" + position.y + ")",
|
||||
"-ms-transform": "translate(-" + position.x + ", -" + position.y + ")",
|
||||
"transform": "translate(-" + position.x + ", -" + position.y + ")"
|
||||
});
|
||||
|
||||
// resize video, when it's loaded
|
||||
vide.$video.bind("loadedmetadata." + pluginName, function() {
|
||||
vide.$video.css("visibility", "visible");
|
||||
vide.resize();
|
||||
vide.$wrapper.css("background-image", "none");
|
||||
});
|
||||
|
||||
// resize event is available only for 'window',
|
||||
// use another code solutions to detect DOM elements resizing
|
||||
vide.$element.bind("resize." + pluginName, function() {
|
||||
if (vide.settings.resizing) {
|
||||
vide.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get video element of the background
|
||||
* @returns {HTMLVideoElement|null}
|
||||
* @public
|
||||
*/
|
||||
Vide.prototype.getVideoObject = function() {
|
||||
return this.$video ? this.$video[0] : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Resize video background
|
||||
* @public
|
||||
*/
|
||||
Vide.prototype.resize = function() {
|
||||
if (!this.$video) {
|
||||
return;
|
||||
}
|
||||
|
||||
var
|
||||
// get native video size
|
||||
videoHeight = this.$video[0].videoHeight,
|
||||
videoWidth = this.$video[0].videoWidth,
|
||||
|
||||
// get wrapper size
|
||||
wrapperHeight = this.$wrapper.height(),
|
||||
wrapperWidth = this.$wrapper.width();
|
||||
|
||||
if (wrapperWidth / videoWidth > wrapperHeight / videoHeight) {
|
||||
this.$video.css({
|
||||
"width": wrapperWidth + 2,
|
||||
|
||||
// +2 pixels to prevent empty space after transformation
|
||||
"height": "auto"
|
||||
});
|
||||
} else {
|
||||
this.$video.css({
|
||||
"width": "auto",
|
||||
|
||||
// +2 pixels to prevent empty space after transformation
|
||||
"height": wrapperHeight + 2
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy video background
|
||||
* @public
|
||||
*/
|
||||
Vide.prototype.destroy = function() {
|
||||
this.$element.unbind(pluginName);
|
||||
|
||||
if (this.$video) {
|
||||
this.$video.unbind(pluginName);
|
||||
}
|
||||
|
||||
delete $[pluginName].lookup[this.index];
|
||||
this.$element.removeData(pluginName);
|
||||
this.$wrapper.remove();
|
||||
};
|
||||
|
||||
/**
|
||||
* Special plugin object for instances.
|
||||
* @type {Object}
|
||||
* @public
|
||||
*/
|
||||
$[pluginName] = {
|
||||
lookup: []
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin constructor
|
||||
* @param {Object|String} path
|
||||
* @param {Object|String} options
|
||||
* @returns {JQuery}
|
||||
* @constructor
|
||||
*/
|
||||
$.fn[pluginName] = function(path, options) {
|
||||
var instance;
|
||||
|
||||
this.each(function() {
|
||||
instance = $.data(this, pluginName);
|
||||
|
||||
if (instance) {
|
||||
|
||||
// destroy plugin instance if exists
|
||||
instance.destroy();
|
||||
}
|
||||
|
||||
// create plugin instance
|
||||
instance = new Vide(this, path, options);
|
||||
instance.index = $[pluginName].lookup.push(instance) - 1;
|
||||
$.data(this, pluginName, instance);
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
// window resize event listener
|
||||
$(window).bind("resize." + pluginName, function() {
|
||||
for (var len = $[pluginName].lookup.length, i = 0, instance; i < len; i++) {
|
||||
instance = $[pluginName].lookup[i];
|
||||
|
||||
if (instance && instance.settings.resizing) {
|
||||
instance.resize();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Auto initialization.
|
||||
// Add 'data-vide-bg' attribute with a path to the video without extension.
|
||||
// Also you can pass options throw the 'data-vide-options' attribute.
|
||||
// 'data-vide-options' must be like "muted: false, volume: 0.5".
|
||||
$(document).find("[data-" + pluginName + "-bg]").each(function(i, element) {
|
||||
var $element = $(element),
|
||||
options = $element.data(pluginName + "-options"),
|
||||
path = $element.data(pluginName + "-bg");
|
||||
|
||||
$element[pluginName](path, options);
|
||||
});
|
||||
});
|
||||
})(window.jQuery, window, document, navigator);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/*
|
||||
* Vide - v0.3.0
|
||||
* Easy as hell jQuery plugin for video backgrounds.
|
||||
* http://vodkabears.github.io/vide/
|
||||
*
|
||||
* Made by Ilya Makarov
|
||||
* Under MIT License
|
||||
*/
|
||||
!function(a,b,c,d){"use strict";function e(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;g>h&&(c=f[h],-1===c.search(/^(http|https|ftp):\/\//)&&-1!==c.search(":"));h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||("false"===e?!1:e)),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function f(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;b>d;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function g(b,c){var d=function(){c(this.src)};a("<img src='"+b+".gif'>").load(d),a("<img src='"+b+".jpg'>").load(d),a("<img src='"+b+".jpeg'>").load(d),a("<img src='"+b+".png'>").load(d)}function h(b,c,d){if(this.$element=a(b),"string"==typeof c&&(c=e(c)),d?"string"==typeof d&&(d=e(d)):d={},"string"==typeof c)c=c.replace(/\.\w*$/,"");else if("object"==typeof c)for(var f in c)c.hasOwnProperty(f)&&(c[f]=c[f].replace(/\.\w*$/,""));this.settings=a.extend({},j,d),this.path=c,this.init()}var i="vide",j={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0},k=/iPad|iPhone|iPod/i.test(d.userAgent),l=/Android/i.test(d.userAgent);h.prototype.init=function(){var b,c,d=this,e=f(d.settings.position);d.$wrapper=a("<div>").css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":e.x+" "+e.y}),c=d.path,"object"==typeof d.path&&(d.path.poster?c=d.path.poster:d.path.mp4?c=d.path.mp4:d.path.webm?c=d.path.webm:d.path.ogv&&(c=d.path.ogv)),"detect"===d.settings.posterType?g(c,function(a){d.$wrapper.css("background-image","url("+a+")")}):"none"!==d.settings.posterType&&d.$wrapper.css("background-image","url("+c+"."+d.settings.posterType+")"),"static"===d.$element.css("position")&&d.$element.css("position","relative"),d.$element.prepend(d.$wrapper),k||l||(b="","object"==typeof d.path?(d.path.mp4&&(b+="<source src='"+d.path.mp4+".mp4' type='video/mp4'>"),d.path.webm&&(b+="<source src='"+d.path.webm+".webm' type='video/webm'>"),d.path.ogv&&(b+="<source src='"+d.path.ogv+".ogv' type='video/ogv'>"),d.$video=a("<video>"+b+"</video>")):d.$video=a("<video><source src='"+d.path+".mp4' type='video/mp4'><source src='"+d.path+".webm' type='video/webm'><source src='"+d.path+".ogv' type='video/ogg'></video>"),d.$video.css("visibility","hidden"),d.$video.prop({autoplay:d.settings.autoplay,loop:d.settings.loop,volume:d.settings.volume,muted:d.settings.muted,playbackRate:d.settings.playbackRate}),d.$wrapper.append(d.$video),d.$video.css({margin:"auto",position:"absolute","z-index":-1,top:e.y,left:e.x,"-webkit-transform":"translate(-"+e.x+", -"+e.y+")","-ms-transform":"translate(-"+e.x+", -"+e.y+")",transform:"translate(-"+e.x+", -"+e.y+")"}),d.$video.bind("loadedmetadata."+i,function(){d.$video.css("visibility","visible"),d.resize(),d.$wrapper.css("background-image","none")}),d.$element.bind("resize."+i,function(){d.settings.resizing&&d.resize()}))},h.prototype.getVideoObject=function(){return this.$video?this.$video[0]:null},h.prototype.resize=function(){if(this.$video){var a=this.$video[0].videoHeight,b=this.$video[0].videoWidth,c=this.$wrapper.height(),d=this.$wrapper.width();this.$video.css(d/b>c/a?{width:d+2,height:"auto"}:{width:"auto",height:c+2})}},h.prototype.destroy=function(){this.$element.unbind(i),this.$video&&this.$video.unbind(i),delete a[i].lookup[this.index],this.$element.removeData(i),this.$wrapper.remove()},a[i]={lookup:[]},a.fn[i]=function(b,c){var d;return this.each(function(){d=a.data(this,i),d&&d.destroy(),d=new h(this,b,c),d.index=a[i].lookup.push(d)-1,a.data(this,i,d)}),this},a(c).ready(function(){a(b).bind("resize."+i,function(){for(var b,c=a[i].lookup.length,d=0;c>d;d++)b=a[i].lookup[d],b&&b.settings.resizing&&b.resize()}),a(c).find("[data-"+i+"-bg]").each(function(b,c){var d=a(c),e=d.data(i+"-options"),f=d.data(i+"-bg");d[i](f,e)})})}(window.jQuery,window,document,navigator);
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
(function ($, window) {
|
||||
|
||||
$(function () {
|
||||
|
||||
if (window.rl && window.rl && !window.rl.settingsGet('Auth'))
|
||||
{
|
||||
var
|
||||
iRate = 1,
|
||||
sRate = window.rl.pluginSettingsGet('video-on-login-screen', 'playback_rate')
|
||||
;
|
||||
|
||||
switch (sRate)
|
||||
{
|
||||
case '25%':
|
||||
iRate = 0.25;
|
||||
break;
|
||||
case '50%':
|
||||
iRate = 0.5;
|
||||
break;
|
||||
case '75%':
|
||||
iRate = 0.75;
|
||||
break;
|
||||
case '125%':
|
||||
iRate = 1.25;
|
||||
break;
|
||||
case '150%':
|
||||
iRate = 1.5;
|
||||
break;
|
||||
case '200%':
|
||||
iRate = 2;
|
||||
break;
|
||||
}
|
||||
|
||||
$('#rl-bg').vide({
|
||||
'mp4': window.rl.pluginSettingsGet('video-on-login-screen', 'mp4_file') || '',
|
||||
'webm': window.rl.pluginSettingsGet('video-on-login-screen', 'webm_file') || '',
|
||||
'ogv': window.rl.pluginSettingsGet('video-on-login-screen', 'ogv_file') || ''
|
||||
}, {
|
||||
playbackRate: iRate,
|
||||
muted: !!window.rl.pluginSettingsGet('video-on-login-screen', 'muted')
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}($, window));
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
</style>
|
||||
</head>
|
||||
<body class="content">
|
||||
<body class="content thm-body">
|
||||
<div class="error-header">
|
||||
{{ErrorHeader}}
|
||||
</div>
|
||||
|
|
@ -53,4 +53,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
box-shadow: @shadow !important;
|
||||
}
|
||||
.thm-body-background-image(@value) when (isstring(@value)) {
|
||||
background-image: url("@{base}@{value}") !important;
|
||||
background-image: url("@{base}@{value}");
|
||||
}
|
||||
.thm-body-background-image(@value) when not (isstring(@value)) {
|
||||
background-image: @value !important;
|
||||
background-image: @value;
|
||||
}
|
||||
.thm-rgba-background-color(@simple, @rgba) when (@rgba = false) {
|
||||
background-color: @simple !important;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ config.paths.js = {
|
|||
name: 'libs.js',
|
||||
src: [
|
||||
'node_modules/jquery/dist/jquery.min.js',
|
||||
'node_modules/jquery-backstretch/jquery.backstretch.min.js',
|
||||
'vendors/jquery-ui/js/jquery-ui-1.10.3.custom.min.js', // custom
|
||||
'vendors/jquery-wakeup/jquery.wakeup.js', // no-npm
|
||||
'vendors/jquery-letterfx/jquery-letterfx.min.js', // no-npm
|
||||
|
|
|
|||
|
|
@ -4086,13 +4086,6 @@ istextorbinary@2.2.1:
|
|||
editions "^1.3.3"
|
||||
textextensions "2"
|
||||
|
||||
jquery-backstretch@2.1.18:
|
||||
version "2.1.18"
|
||||
resolved "https://registry.yarnpkg.com/jquery-backstretch/-/jquery-backstretch-2.1.18.tgz#d3e1e16d387f72172c2d70d3eef5512e1aabbeb2"
|
||||
integrity sha512-qUUTfZD/pwpqlCVvgr8VLTNa0utQBUW+HTXLPZkyqcSiudgWf+ImXlRE7oKQ8o2MbcrZ28n6HCg38Sfhwn9CNw==
|
||||
dependencies:
|
||||
jquery "^3.1.1"
|
||||
|
||||
jquery@3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue