diff --git a/README.md b/README.md index 1c4d44f..507df0e 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: * Sprache ist Bärndütsch * Die Uhr ist eingeschaltet * 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. @@ -77,8 +78,10 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: width: '100%', // eine CSS-Grössenangabe (default: 100%) force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; // 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 + autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an + // false: Die Uhr behält ihre anfängliche Grösse }); 5. Sonderfunktionen diff --git a/index.html b/index.html index 320b743..6ca09a2 100644 --- a/index.html +++ b/index.html @@ -57,17 +57,6 @@ along with this program. If not, see . language: 'de_CH', 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); diff --git a/info/index.html b/info/index.html index d37ef76..07b9622 100644 --- a/info/index.html +++ b/info/index.html @@ -142,6 +142,10 @@ along with this program. If not, see .
Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind true oder false.
Typ: boolean
Default: true
+
autoresize
+
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 true oder false. +
Typ: boolean +
Default: true
diff --git a/js/uhr.js b/js/uhr.js index 0e85f0b..b2d2ea3 100644 --- a/js/uhr.js +++ b/js/uhr.js @@ -259,6 +259,19 @@ themeChooser.val(selectedTheme); this.options.theme = ""; 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 options = {}; @@ -358,7 +371,8 @@ theme: uhrGlobals.themes[0].styleClass, force: false, controls: true, - cookiePath: undefined + cookiePath: undefined, + autoresize: true }, "start": start, "stop": stop,