manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

added autoresize option and updated documentation

Browse source
This commit is contained in:
Manuel Friedli 2014-08-12 19:19:37 +02:00
parent e8a0bfe5be
commit 2edf130472
4 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -55,6 +55,7 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Sprache ist Bärndütsch * Sprache ist Bärndütsch
* Die Uhr ist eingeschaltet * Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt * Die Bedienelemente werden angezeigt
* Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln. Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln.
@ -77,8 +78,10 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
width: '100%', // eine CSS-Grössenangabe (default: 100%) width: '100%', // eine CSS-Grössenangabe (default: 100%)
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
// true: immer die angegebene Konfiguration verwenden // true: immer die angegebene Konfiguration verwenden
controls: true // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
// false: Die Bedienelemente werden nicht angezeigt // false: Die Bedienelemente werden nicht angezeigt
autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an
// false: Die Uhr behält ihre anfängliche Grösse
}); });
5. Sonderfunktionen 5. Sonderfunktionen

11
index.html
View file

@ -57,17 +57,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
language: 'de_CH', language: 'de_CH',
controls: true controls: true
}); });
$(window).on('resize', function (event) {
var $uhr = $('#uhr');
var $parent = $uhr.parent();
var $window = $(window);
var parentWidth = $parent.width();
var parentHeight = $parent.height();
var windowWidth = $window.width();
var windowHeight = $window.height();
var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
$uhr.uhr("width", size);
});
})(jQuery); })(jQuery);
</script> </script>
</body> </body>

7
info/index.html
View file

@ -142,6 +142,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>. <dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
<br/>Typ: boolean <br/>Typ: boolean
<br/>Default: <code>true</code></dd> <br/>Default: <code>true</code></dd>
<dt><code>autoresize</code></dt>
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
<br/>Typ: boolean
<br/>Default: <code>true</code></dd>
</dl> </dl>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {
@ -150,7 +154,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
language: 'de_CH', language: 'de_CH',
theme: 'black', theme: 'black',
controls: false, controls: false,
force: true force: true,
autoresize: false
}); });
})(jQuery); })(jQuery);
</script> </script>

16
js/uhr.js
View file

@ -259,6 +259,19 @@
themeChooser.val(selectedTheme); themeChooser.val(selectedTheme);
this.options.theme = ""; this.options.theme = "";
this.theme(selectedTheme); this.theme(selectedTheme);
if (this.options.autoresize) {
$(window).on('resize', function () {
var $e = this.element;
var $parent = $e.parent();
var $window = $(window);
var parentWidth = $parent.width();
var parentHeight = $parent.height();
var windowWidth = $window.width();
var windowHeight = $window.height();
var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
setWidth.bind(this)(size);
}.bind(this));
}
}; };
var setCookie = function setCookie(cookieName, cookieValue) { var setCookie = function setCookie(cookieName, cookieValue) {
var options = {}; var options = {};
@ -358,7 +371,8 @@
theme: uhrGlobals.themes[0].styleClass, theme: uhrGlobals.themes[0].styleClass,
force: false, force: false,
controls: true, controls: true,
cookiePath: undefined cookiePath: undefined,
autoresize: true
}, },
"start": start, "start": start,
"stop": stop, "stop": stop,