mirror of https://github.com/friendica/friendica
Deprecate themes duepuntozero, quattro and smoothly
This commit is contained in:
parent
8cec89195b
commit
9aa05eb911
|
|
@ -30,13 +30,3 @@ Here you can find an overview of the different ways to comment and sort existing
|
|||
<P style="clear: both;"></p>
|
||||
|
||||
<img src="doc/img/post_choose.png" width="27" height="32" alt="post_choose.png" align="left"> This symbol is used to choose more than one post to delete in a single step. After selecting all posts, go to the end of the page and click "Delete Selected Items".<P style="clear: both;"></p>
|
||||
|
||||
**Symbols of other themes**
|
||||
|
||||
Darkbubble <img src="doc/img/darkbubble.png" alt="darkbubble.png" style="padding-left: 20px; vertical-align:middle;">
|
||||
|
||||
Darkzero <img src="doc/img/darkzero.png" alt="darkzero.png" style="padding-left: 35px; vertical-align:middle;">
|
||||
|
||||
<span style="padding-left: 10px; font-style:italic;">(incl. more "zero"-themes, slackr, comix, easterbunny, facepark)</span>
|
||||
|
||||
Dispy <img src="doc/img/dispy.png" alt="dispy.png" style="padding-left: 57px; vertical-align:middle;"> <i>(incl. smoothly, testbubble)</i>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ Below are examples of the post editor in 3 of Friendica's common themes:
|
|||
<figcaption>Post editor, with the <b>Vier</b> theme.</figcaption>
|
||||
</figure>
|
||||
<p style="clear:both;"></p>
|
||||
<figure>
|
||||
<img src="doc/img/editor_dpzero.png" alt="duepuntozero editor">
|
||||
<figcaption>Post editor, with the <b>Duepuntozero</b> theme.</figcaption>
|
||||
</figure>
|
||||
|
||||
Post title is optional, you can set it by clicking on "Set title".
|
||||
|
||||
|
|
@ -73,11 +69,6 @@ These icons can change depending on the theme. Some examples:
|
|||
<td><img src="doc/img/vier_icons.png" alt="vier.png" style="vertical-align:middle;"></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Smoothly: </td>
|
||||
<td><img src="doc/img/editor_darkbubble.png" alt="darkbubble.png" style="vertical-align:middle;"></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
<i><b>*</b> how to [upload](help/FAQ#upload) files</i>
|
||||
<p style="clear:both;"> </p>
|
||||
|
|
|
|||
|
|
@ -47,13 +47,3 @@ Wähle eine vorhandene Gruppe oder gib einen neuen Namen ein. Die erstellten Gru
|
|||
<img src="doc/img/post_choose.png" width="27" height="32" alt="post_choose.png" align="left"> Mit diesem Symbol kannst du mehrere Beiträge auswählen und gesammelt löschen.
|
||||
Hierfür gehst du nach dem Markieren aller gewünschten Beiträge auf "Lösche die markierten Beiträge" am Ende der Seite mit allen Beiträgen.
|
||||
<P style="clear: both;"></p>
|
||||
|
||||
**Im Folgenden findest du Symbole weiterer Themen**
|
||||
|
||||
Darkbubble <img src="doc/img/darkbubble.png" alt="darkbubble.png" style="padding-left: 20px; vertical-align:middle;">
|
||||
|
||||
Darkzero <img src="doc/img/darkzero.png" alt="darkzero.png" style="padding-left: 35px; vertical-align:middle;">
|
||||
|
||||
<span style="padding-left: 10px; font-style:italic;">(inkl. weiterer "zero"-Themen, slackr, comix, easterbunny, facepark)</span>
|
||||
|
||||
Dispy <img src="doc/img/dispy.png" alt="dispy.png" style="padding-left: 57px; vertical-align:middle;"> <i>(inkl. smoothly, testbubble)</i>
|
||||
|
|
|
|||
|
|
@ -9,35 +9,35 @@ Achtung: für dieses Beispiel wurde das Thema <b>"Diabook"</b> genutzt.
|
|||
Wenn du ein anderes Design benutzt, wirst du manche dieser Symbole gar nicht oder in anderer Form vorfinden.
|
||||
</span>
|
||||
|
||||
<img src="doc/img/friendica_editor.png" width="538" height="218" alt="editor">
|
||||
<img src="doc/img/friendica_rich_editor.png" width="538" height="218" alt="editor">
|
||||
|
||||
<i>Die einzelnen Symbole</i>
|
||||
|
||||
<img src="doc/img/camera.png" width="44" height="33" alt="editor" align="left" style="padding-bottom: 20px;"> Wenn du auf dieses Symbol klickst, dann kannst du ein Bild von deinem Computer hinzufügen.
|
||||
<img src="doc/img/camera.png" alt="editor" align="left" style="margin: 0 10px 10px 0;"> Wenn du auf dieses Symbol klickst, dann kannst du ein Bild von deinem Computer hinzufügen.
|
||||
Wenn du eine Internetadresse (URL) eingeben willst, dann kannst du das "Baum"-Symbol im oberen Teil des Editors nutzen.
|
||||
Wenn du ein Bild ausgewählt hast, dann erscheint eine Miniaturdarstellung des Bildes im Editor.*
|
||||
<p style="clear:both;"></p>
|
||||
|
||||
<img src="doc/img/paper_clip.png" width="44" height="33" alt="paper_clip" align="left"> Wenn du dieses Symbol anklickst, dann kannst du weitere Dateien von deinem Computer einfügen. Eine Vorschau des Dateiinhalts erfolgt nicht.*
|
||||
<img src="doc/img/paper_clip.png" alt="paper_clip" align="left" style="margin: 0 10px 10px 0;"> Wenn du dieses Symbol anklickst, dann kannst du weitere Dateien von deinem Computer einfügen. Eine Vorschau des Dateiinhalts erfolgt nicht.*
|
||||
<p style="clear:both;"></p>
|
||||
|
||||
<img src="doc/img/chain.png" width="44" height="33" alt="chain" align="left"> Wenn du die Kette anklickst, dann kannst du eine Internetadresse (URL) einfügen.
|
||||
<img src="doc/img/chain.png" alt="chain" align="left" style="margin: 0 10px 10px 0;"> Wenn du die Kette anklickst, dann kannst du eine Internetadresse (URL) einfügen.
|
||||
Im Editor erscheint automatisch eine kurze Information zum eingefügten Link.*
|
||||
<p style="clear:both;"></p>
|
||||
|
||||
<img src="doc/img/video.png" width="44" height="33" alt="video" align="left" style="padding-bottom: 40px;"> Mit dieser Funktion kannst du die Internetadresse (URL) einer Videodatei einfügen.
|
||||
<img src="doc/img/video.png" alt="video" align="left" style="margin: 0 10px 10px 0;"> Mit dieser Funktion kannst du die Internetadresse (URL) einer Videodatei einfügen.
|
||||
Das Video erscheint dann mit einem Player in deinem Beitrag.
|
||||
Da Friendica zur Einbindung [HTML5](http://en.wikipedia.org/wiki/HTML5_video) verwendet, werden je nach Browser verschiedene Videoformate unterstützt (z.B. WebM oder MP4).
|
||||
Außerdem kannst du hier die URLs von Videos auf Youtube, Vimeo und manchen anderen Videohostern eingeben.
|
||||
Die Videos werden dann mit Vorschaubild angezeigt, nach einem Klick öffnet sich ein eingebetteter Player.*
|
||||
<p style="clear:both;"></p>
|
||||
|
||||
<img src="doc/img/mic.png" width="44" height="33" alt="mic" align="left" style="padding-bottom: 40px;"> Mit dieser Funktion kannst du die Internetadresse (URL) einer Sound-Datei einfügen.
|
||||
<img src="doc/img/mic.png" alt="mic" align="left" style="margin: 0 10px 10px 0;"> Mit dieser Funktion kannst du die Internetadresse (URL) einer Sound-Datei einfügen.
|
||||
Da Friendica zur Einbindung [HTML5](http://en.wikipedia.org/wiki/HTML5_video) verwendet, werden je nach Browser und Betriebssystem MP3, Ogg oder AAC unterstützt.
|
||||
Außerdem kannst du hier auch URLs von manchen Audiohostern wie Soundcloud eingeben, um eine dort gespeicherte Audiodatei mit Player in deinem Beitrag anzuzeigen.*
|
||||
<p style="clear:both;"></p>
|
||||
|
||||
<img src="doc/img/globe.png" width="44" height="33" alt="globe" align="left"> Wenn du dieses Symbol wählst, dann kannst du deinen Standort festlegen.
|
||||
<img src="doc/img/globe.png" alt="globe" align="left" style="margin: 0 10px 10px 0;"> Wenn du dieses Symbol wählst, dann kannst du deinen Standort festlegen.
|
||||
Hier reicht schon eine Angabe wie "Berlin" oder "10775".
|
||||
Dieser Eintrag führt anschließend zu einer Suchanfrage bei Google Maps.
|
||||
<p style="clear:both;"></p>
|
||||
|
|
@ -46,12 +46,6 @@ Dieser Eintrag führt anschließend zu einer Suchanfrage bei Google Maps.
|
|||
|
||||
**Im Folgenden findest du Symbole weiterer Themen**
|
||||
|
||||
Cleanzero <img src="doc/img/editor_zero.png" alt="cleanzero.png" style="padding-left: 20px; vertical-align:middle;">
|
||||
|
||||
<span style="padding-left: 10px; font-style:italic;">(inkl. weiterer "zero"-Themen, comix, easterbunny, facepark, slackr </span>
|
||||
|
||||
Darkbubble <img src="doc/img/editor_darkbubble.png" alt="darkbubble.png" style="padding-left: 14px; vertical-align:middle;"> <i>(inkl. smoothly, testbubble)</i>
|
||||
|
||||
Frio <img src="doc/img/editor_frio.png" alt="frio.png" style="padding-left: 44px; vertical-align:middle;">
|
||||
|
||||
Vier <img src="doc/img/editor_vier.png" alt="vier.png" style="padding-left: 44px; vertical-align:middle;"> <i>(inkl. dispy)</i>
|
||||
Vier <img src="doc/img/editor_vier.png" alt="vier.png" style="padding-left: 44px; vertical-align:middle;">
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
170
doc/themes.md
170
doc/themes.md
|
|
@ -17,7 +17,7 @@ The below for a more detailed description of theme heritage.
|
|||
|
||||
Some themes also allow users to select *variants* of the theme.
|
||||
Those theme variants most often contain an additional [CSS](https://en.wikipedia.org/wiki/CSS) file to override some styling of the default theme values.
|
||||
From the themes in the main repository *duepunto zero* and *vier* are using this methods for variations.
|
||||
From the themes in the main repository *vier* and *vier* are using this methods for variations.
|
||||
Quattro is using a slightly different approach.
|
||||
|
||||
Third you can start your theme from scratch.
|
||||
|
|
@ -60,145 +60,6 @@ they will be overwritten by files in
|
|||
|
||||
/view/theme/**your-theme-name**/js.
|
||||
|
||||
## Expand an existing Theme
|
||||
|
||||
### Theme Variations
|
||||
|
||||
Many themes are more *theme families* than only one theme.
|
||||
*duepunto zero* and *vier* allow easily to add new theme variation.
|
||||
We will go through the process of creating a new variation for *duepunto zero*.
|
||||
The same (well almost, some names change) procedure applies to the *vier* theme.
|
||||
And similar steps are needed for *quattro* but this theme is using [lesscss](http://lesscss.org/#docs) to maintain the CSS files..
|
||||
|
||||
In
|
||||
|
||||
/view/theme/duepuntozero/deriv
|
||||
|
||||
you find a couple of CSS files that define color derivations from the duepunto theme.
|
||||
These resemble some of the now as unsupported marked themes, that were inherited by the duepunto theme.
|
||||
Darkzero and Easter Bunny for example.
|
||||
|
||||
The selection of the colorset is done in a combination of a template for a new form in the settings and aome functions in the theme.php file.
|
||||
The template (theme_settings.tpl)
|
||||
|
||||
{{include file="field_select.tpl" field=$colorset}}
|
||||
<div class="settings-submit-wrapper">
|
||||
<input type="submit" value="{{$submit}}" class="settings-submit" name="duepuntozero-settings-submit" />
|
||||
</div>
|
||||
|
||||
defines a formular consisting of a [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) pull-down which contains all aviable variants and s submit button.
|
||||
See the documentation about [SMARTY3 templates](/help/snarty3-templates.md) for a summary of friendica specific blocks other than the select element.
|
||||
But we don't really need to change anything at the template itself.
|
||||
|
||||
The template alone wont work though.
|
||||
You make friendica aware of its existance and tell it how to use the template file, by defining a config.php file.
|
||||
It needs to define at least the following functions
|
||||
|
||||
* theme_content
|
||||
* theme_post
|
||||
|
||||
and may also define functions for the admin interface
|
||||
|
||||
* theme_admin
|
||||
* theme_admin_post.
|
||||
|
||||
theme_content and theme_admin are used to make the form available in the settings, repectively the admin panel.
|
||||
The _post functions handle the processing of the send form, in this case they save to selected variand in friendicas database.
|
||||
|
||||
To make your own variation appear in the menu, all you need to do is to create a new CSS file in the deriv directoy and include it in the array in the config.php:
|
||||
|
||||
$colorset = array(
|
||||
'default'=>DI::l10n()->t('default'),
|
||||
'greenzero'=>DI::l10n()->t('greenzero'),
|
||||
'purplezero'=>DI::l10n()->t('purplezero'),
|
||||
'easterbunny'=>DI::l10n()->t('easterbunny'),
|
||||
'darkzero'=>DI::l10n()->t('darkzero'),
|
||||
'comix'=>DI::l10n()->t('comix'),
|
||||
'slackr'=>DI::l10n()->t('slackr'),
|
||||
);
|
||||
|
||||
the 1st part of the line is the name of the CSS file (without the .css) the 2nd part is the common name of the variant.
|
||||
Calling the DI::l10n()->t() function with the common name makes the string translateable.
|
||||
The selected 1st part will be saved in the database by the theme_post function.
|
||||
|
||||
function theme_post(App $a){
|
||||
// non local users shall not pass
|
||||
if (!Session::getLocalUser()) {
|
||||
return;
|
||||
}
|
||||
// if the one specific submit button was pressed then proceed
|
||||
if (isset($_POST['duepuntozero-settings-submit'])){
|
||||
// and save the selection key into the personal config of the user
|
||||
DI::pConfig()->set(Session::getLocalUser(), 'duepuntozero', 'colorset', $_POST['duepuntozero_colorset']);
|
||||
}
|
||||
}
|
||||
|
||||
Now that this information is set in the database, what should friendica do with it?
|
||||
For this, have a look at the theme.php file of the *duepunto zero*.
|
||||
There you'll find somethink alike
|
||||
|
||||
$colorset = DI::pConfig()->get(Session::getLocalUser(), 'duepuntozero','colorset');
|
||||
if (!$colorset)
|
||||
$colorset = DI::config()->get('duepuntozero', 'colorset');
|
||||
if ($colorset) {
|
||||
if ($colorset == 'greenzero')
|
||||
DI::page()['htmlhead'] .= '<link rel="stylesheet" href="view/theme/duepuntozero/deriv/greenzero.css" type="text/css" media="screen" />'."\n";
|
||||
/* some more variants */
|
||||
}
|
||||
|
||||
which tells friendica to get the personal config of a user.
|
||||
Check if it is set and if not look for the global config.
|
||||
And finally if a config for the colorset was found, apply it by adding a link to the CSS file into the HTML header of the page.
|
||||
So you'll just need to add a if selection, fitting your variant keyword and link to the CSS file of it.
|
||||
|
||||
Done.
|
||||
Now you can use the variant on your system.
|
||||
But remember once the theme.php or the config.php you have to readd your variant to them.
|
||||
If you think your color variation could be benifical for other friendica users as well, feel free to generate a pull request at github so we can include your work into the repository.
|
||||
|
||||
### Inheritation
|
||||
|
||||
Say, you like the duepuntozero but you want to have the content of the outer columns left and right exchanged.
|
||||
That would be not a color variation as shown above.
|
||||
Instead we will create a new theme, duepuntozero_lr, inherit the properties of duepuntozero and make small changes to the underlying php files.
|
||||
|
||||
So create a directory called duepunto_lr and create a file called theme.php with your favorite text editor.
|
||||
The content of this file should be something like
|
||||
|
||||
<?php
|
||||
/* meta informations for the theme, see below */
|
||||
use Friendica\App;
|
||||
|
||||
function duepuntozero_lr_init(App $a) {
|
||||
$a->setThemeInfoValue('extends', 'duepuntozero');
|
||||
|
||||
$a->set_template_engine('smarty3');
|
||||
/* and more stuff e.g. the JavaScript function for the header */
|
||||
}
|
||||
|
||||
Next take the default.php file found in the /view direcotry and exchange the aside and right_aside elements.
|
||||
So the central part of the file now looks like this:
|
||||
|
||||
<body>
|
||||
<?php if(!empty($page['nav'])) echo $page['nav']; ?>
|
||||
<aside><?php if(!empty($page['right_aside'])) echo $page['right_aside']; ?></aside>
|
||||
<section><?php if(!empty($page['content'])) echo $page['content']; ?>
|
||||
<div id="page-footer"></div>
|
||||
</section>
|
||||
<right_aside><?php if(!empty($page['aside'])) echo $page['aside']; ?></right_aside>
|
||||
<footer><?php if(!empty($page['footer'])) echo $page['footer']; ?></footer>
|
||||
</body>
|
||||
|
||||
Finally we need a style.css file, inheriting the definitions from the parent theme and containing out changes for the new theme.
|
||||
***Note***:You need to create the style.css and at lest import the base CSS file from the parent theme.
|
||||
|
||||
@import url('../duepuntozero/style.css');
|
||||
|
||||
Done.
|
||||
But I agree it is not really useful at this state.
|
||||
Nevertheless, to use it, you just need to activate in the admin panel.
|
||||
That done, you can select it in the settings like any other activated theme.
|
||||
|
||||
## Creating a Theme from Scratch
|
||||
|
||||
Keep patient.
|
||||
|
|
@ -231,15 +92,19 @@ Supported formats are PNG and JPEG.
|
|||
|
||||
This is the main definition file of the theme.
|
||||
In the header of that file, some meta information is stored.
|
||||
For example, have a look at the theme.php of the *quattro* theme:
|
||||
For example, have a look at the theme.php of the *vier* theme:
|
||||
|
||||
<?php
|
||||
/**
|
||||
* Name: Quattro
|
||||
* Version: 0.6
|
||||
* [Licence]
|
||||
*
|
||||
* Name: Vier
|
||||
* Version: 1.2
|
||||
* Author: Fabio <http://kirgroup.com/profile/fabrixxm>
|
||||
* Maintainer: Fabio <http://kirgroup.com/profile/fabrixxm>
|
||||
* Maintainer: Tobias <https://f.diekershoff.de/profile/tobias>
|
||||
* Author: Ike <http://pirati.ca/profile/heluecht>
|
||||
* Author: Beanow <https://fc.oscp.info/profile/beanow>
|
||||
* Maintainer: Ike <http://pirati.ca/profile/heluecht>
|
||||
* Description: "Vier" is a very compact and modern theme. It uses the font awesome font library: http://fortawesome.github.com/Font-Awesome/
|
||||
*/
|
||||
|
||||
You see the definition of the theme's name, it's version and the initial author of the theme.
|
||||
|
|
@ -255,11 +120,11 @@ This will make our job a little easier, as we don't have to specify the full nam
|
|||
|
||||
The next crucial part of the theme.php file is a definition of an init function.
|
||||
The name of the function is <theme-name>_init.
|
||||
So in the case of quattro it is
|
||||
So in the case of vier it is
|
||||
|
||||
function quattro_init(App $a) {
|
||||
$a->theme_info = array();
|
||||
$a->set_template_engine('smarty3');
|
||||
function vier_init(App $a) {
|
||||
$a->theme_info = array();
|
||||
$a->set_template_engine('smarty3');
|
||||
}
|
||||
|
||||
Here we have set the basic theme information, in this case they are empty.
|
||||
|
|
@ -269,12 +134,6 @@ At the moment you should use the *smarty3* engine.
|
|||
There once was a friendica specific templating engine as well but that is not used anymore.
|
||||
If you like to use another templating engine, please implement it.
|
||||
|
||||
When you want to inherit stuff from another theme you have to *announce* this in the theme_info:
|
||||
|
||||
$a->setThemeInfoValue('extends', 'duepuntozero');
|
||||
|
||||
which declares *duepuntozero* as parent of the theme.
|
||||
|
||||
If you want to add something to the HTML header of the theme, one way to do so is by adding it to the theme.php file.
|
||||
To do so, add something alike
|
||||
|
||||
|
|
@ -282,7 +141,6 @@ To do so, add something alike
|
|||
/* stuff you want to add to the header */
|
||||
EOT;
|
||||
|
||||
The $a variable holds the friendica application.
|
||||
So you can access the properties of this friendica session from the theme.php file as well.
|
||||
|
||||
### default.php
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ return [
|
|||
|
||||
// allowed_themes (Comma-separated list)
|
||||
// Themes users can change to in their settings.
|
||||
'allowed_themes' => 'frio,quattro,vier,duepuntozero,smoothly',
|
||||
'allowed_themes' => 'frio,vier',
|
||||
|
||||
// cache_contact_avatar (Boolean)
|
||||
// Cache versions of the contact avatars. Uses a lot of storage space
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $a->config['php_path'] = '/another/php';
|
|||
$a->config['system']['huburl'] = '[internal]';
|
||||
|
||||
// allowed themes (change this from admin panel after installation)
|
||||
$a->config['system']['allowed_themes'] = 'frio,quattro,vier,duepuntozero';
|
||||
$a->config['system']['allowed_themes'] = 'frio,vier';
|
||||
|
||||
// default system theme
|
||||
$a->config['system']['theme'] = 'frio';
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ class ConfigFileLoaderTest extends MockedTest
|
|||
self::assertEquals('999', $configCache->get('config', 'max_import_size'));
|
||||
self::assertEquals('666', $configCache->get('system', 'maximagesize'));
|
||||
|
||||
self::assertEquals('frio,quattro,vier,duepuntozero', $configCache->get('system', 'allowed_themes'));
|
||||
self::assertEquals('frio,vier', $configCache->get('system', 'allowed_themes'));
|
||||
self::assertEquals('1', $configCache->get('system', 'no_regfullname'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
// @license magnet:?xt=urn:btih:e95b018ef3580986a04669f1b5879592219e2a7a&dn=public-domain.txt Public Domains
|
||||
/*!
|
||||
* jQuery Tools v1.2.7 - The missing UI library for the Web
|
||||
*
|
||||
* rangeinput/rangeinput.js
|
||||
*
|
||||
* NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
|
||||
*
|
||||
* http://flowplayer.org/tools/
|
||||
*
|
||||
*/
|
||||
(function(a){a.tools=a.tools||{version:"v1.2.7"};var b;b=a.tools.rangeinput={conf:{min:0,max:100,step:"any",steps:0,value:0,precision:undefined,vertical:0,keyboard:!0,progress:!1,speed:100,css:{input:"range",slider:"slider",progress:"progress",handle:"handle"}}};var c,d;a.fn.drag=function(b){document.ondragstart=function(){return!1},b=a.extend({x:!0,y:!0,drag:!0},b),c=c||a(document).on("mousedown mouseup",function(e){var f=a(e.target);if(e.type=="mousedown"&&f.data("drag")){var g=f.position(),h=e.pageX-g.left,i=e.pageY-g.top,j=!0;c.on("mousemove.drag",function(a){var c=a.pageX-h,e=a.pageY-i,g={};b.x&&(g.left=c),b.y&&(g.top=e),j&&(f.trigger("dragStart"),j=!1),b.drag&&f.css(g),f.trigger("drag",[e,c]),d=f}),e.preventDefault()}else try{d&&d.trigger("dragEnd")}finally{c.off("mousemove.drag"),d=null}});return this.data("drag",!0)};function e(a,b){var c=Math.pow(10,b);return Math.round(a*c)/c}function f(a,b){var c=parseInt(a.css(b),10);if(c)return c;var d=a[0].currentStyle;return d&&d.width&&parseInt(d.width,10)}function g(a){var b=a.data("events");return b&&b.onSlide}function h(b,c){var d=this,h=c.css,i=a("<div><div/><a href='#'/></div>").data("rangeinput",d),j,k,l,m,n;b.before(i);var o=i.addClass(h.slider).find("a").addClass(h.handle),p=i.find("div").addClass(h.progress);a.each("min,max,step,value".split(","),function(a,d){var e=b.attr(d);parseFloat(e)&&(c[d]=parseFloat(e,10))});var q=c.max-c.min,r=c.step=="any"?0:c.step,s=c.precision;s===undefined&&(s=r.toString().split("."),s=s.length===2?s[1].length:0);if(b.attr("type")=="range"){var t=b.clone().wrap("<div/>").parent().html(),u=a(t.replace(/type/i,"type=text data-orig-type"));u.val(c.value),b.replaceWith(u),b=u}b.addClass(h.input);var v=a(d).add(b),w=!0;function x(a,f,g,h){g===undefined?g=f/m*q:h&&(g-=c.min),r&&(g=Math.round(g/r)*r);if(f===undefined||r)f=g*m/q;if(isNaN(g))return d;f=Math.max(0,Math.min(f,m)),g=f/m*q;if(h||!j)g+=c.min;j&&(h?f=m-f:g=c.max-g),g=e(g,s);var i=a.type=="click";if(w&&k!==undefined&&!i){a.type="onSlide",v.trigger(a,[g,f]);if(a.isDefaultPrevented())return d}var l=i?c.speed:0,t=i?function(){a.type="change",v.trigger(a,[g])}:null;j?(o.animate({top:f},l,t),c.progress&&p.animate({height:m-f+o.height()/2},l)):(o.animate({left:f},l,t),c.progress&&p.animate({width:f+o.width()/2},l)),k=g,n=f,b.val(g);return d}a.extend(d,{getValue:function(){return k},setValue:function(b,c){y();return x(c||a.Event("api"),undefined,b,!0)},getConf:function(){return c},getProgress:function(){return p},getHandle:function(){return o},getInput:function(){return b},step:function(b,e){e=e||a.Event();var f=c.step=="any"?1:c.step;d.setValue(k+f*(b||1),e)},stepUp:function(a){return d.step(a||1)},stepDown:function(a){return d.step(-a||-1)}}),a.each("onSlide,change".split(","),function(b,e){a.isFunction(c[e])&&a(d).on(e,c[e]),d[e]=function(b){b&&a(d).on(e,b);return d}}),o.drag({drag:!1}).on("dragStart",function(){y(),w=g(a(d))||g(b)}).on("drag",function(a,c,d){if(b.is(":disabled"))return!1;x(a,j?c:d)}).on("dragEnd",function(a){a.isDefaultPrevented()||(a.type="change",v.trigger(a,[k]))}).click(function(a){return a.preventDefault()}),i.click(function(a){if(b.is(":disabled")||a.target==o[0])return a.preventDefault();y();var c=j?o.height()/2:o.width()/2;x(a,j?m-l-c+a.pageY:a.pageX-l-c)}),c.keyboard&&b.keydown(function(c){if(!b.attr("readonly")){var e=c.keyCode,f=a([75,76,38,33,39]).index(e)!=-1,g=a([74,72,40,34,37]).index(e)!=-1;if((f||g)&&!(c.shiftKey||c.altKey||c.ctrlKey)){f?d.step(e==33?10:1,c):g&&d.step(e==34?-10:-1,c);return c.preventDefault()}}}),b.blur(function(b){var c=a(this).val();c!==k&&d.setValue(c,b)}),a.extend(b[0],{stepUp:d.stepUp,stepDown:d.stepDown});function y(){j=c.vertical||f(i,"height")>f(i,"width"),j?(m=f(i,"height")-f(o,"height"),l=i.offset().top+m):(m=f(i,"width")-f(o,"width"),l=i.offset().left)}function z(){y(),d.setValue(c.value!==undefined?c.value:c.min)}z(),m||a(window).load(z)}a.expr[":"].range=function(b){var c=b.getAttribute("type");return c&&c=="range"||a(b).filter("input").data("rangeinput")},a.fn.rangeinput=function(c){if(this.data("rangeinput"))return this;c=a.extend(!0,{},b.conf,c);var d;this.each(function(){var b=new h(a(this),a.extend(!0,{},c)),e=b.getInput().data("rangeinput",b);d=d?d.add(e):e});return d?d:this}})(jQuery);
|
||||
|
||||
// @license-end
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script src="{{$baseurl}}/view/theme/quattro/jquery.tools.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
|
||||
<script src="{{$baseurl}}/view/theme/frio/js/jquery.tools.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
|
||||
<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
|
||||
|
||||
<div class="form-group field select">
|
||||
|
|
|
|||
Loading…
Reference in New Issue