From 2edf130472e652d0364c8a05d41c77cea731c09f Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Tue, 12 Aug 2014 19:19:37 +0200
Subject: [PATCH] added autoresize option and updated documentation

---
 README.md       |  5 ++++-
 index.html      | 11 -----------
 info/index.html |  7 ++++++-
 js/uhr.js       | 16 +++++++++++++++-
 4 files changed, 25 insertions(+), 14 deletions(-)

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 <http://www.gnu.org/licenses/>.
 				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);
 	</script>
 </body>
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 <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>.
 		<br/>Typ: boolean
 		<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>
 	<script type="text/javascript">
 		(function($) {
@@ -150,7 +154,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 				language: 'de_CH',
 				theme: 'black',
 				controls: false,
-				force: true
+				force: true,
+				autoresize: false
 			});
 		})(jQuery);
 	</script>
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,