Handled empty Umbrella instance in size and scroll methods (#152)

docs/documentation.html

@@ -1025,7 +1025,7 @@ <h2 id="-size-">.size()</h2>
 <h3 id="parameters">Parameters</h3>
 <p>None</p>
 <h3 id="return">Return</h3>
-<p>Returns a simple object with the following properties referring to the first matched element:</p>
+<p>Returns a simple object with the following properties referring to the first matched element, or <code>null</code> if there is no one:</p>
 <ul>
 <li>left</li>
 <li>right</li>
@@ -1036,7 +1036,10 @@ <h3 id="return">Return</h3>
 </ul>
 <h3 id="examples">Examples</h3>
 <pre><code class="language-js">u(&#39;body&#39;).size();
-// {&quot;left&quot;:0,&quot;right&quot;:400,&quot;top&quot;:0,&quot;height&quot;:300,&quot;bottom&quot;:300,&quot;width&quot;:400}</code></pre>
+// {&quot;left&quot;:0,&quot;right&quot;:400,&quot;top&quot;:0,&quot;height&quot;:300,&quot;bottom&quot;:300,&quot;width&quot;:400}
+
+u().size()
+// null</code></pre>
 <h2 id="-text-">.text()</h2>
 <p>Retrieve or set the text content of matched elements:</p>
 <pre><code class="language-js">// GET
@@ -1117,56 +1120,56 @@ <h3 id="return">Return</h3>
 <h3 id="examples">Examples</h3>
 <p>Wrap an element in an html element:</p>
 <p>Original element:</p>
-<pre><code class="language-html">&lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;</code></pre>
+<pre><code class="language-html">&lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;</code></pre>
 <pre><code class="language-js">u(&quot;.example&quot;).wrap(&#39;&lt;a class=&quot;wrapper&quot;&gt;&#39;);</code></pre>
 <p>Result:</p>
 <pre><code class="language-html">&lt;a class=&quot;wrapper&quot;&gt;
-  &lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
+  &lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
 &lt;/a&gt;</code></pre>
 <p>Wrap an element in an html element and chain Umbrella methods:</p>
 <pre><code class="language-js">u(&quot;.example&quot;).wrap(&#39;&lt;a&gt;&#39;).attr({class: &quot;wrapper&quot;, href: &quot;http://google.com&quot;});</code></pre>
 <p>Result:</p>
 <pre><code class="language-html">&lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-  &lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
+  &lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
 &lt;/a&gt;</code></pre>
 <p>Wrap several elements in an html element</p>
-<pre><code class="language-html">&lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
-&lt;button class=&quot;example&quot;&gt;Link2&lt;/button&gt;
-&lt;button class=&quot;example&quot;&gt;Link3&lt;/button&gt;
+<pre><code class="language-html">&lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
+&lt;span class=&quot;example&quot;&gt;Link2&lt;/span&gt;
+&lt;span class=&quot;example&quot;&gt;Link3&lt;/span&gt;
 </code></pre>
 <pre><code class="language-js">u(&quot;.example&quot;).wrap(&#39;&lt;a&gt;&#39;).attr({class: &quot;wrapper&quot;, href: &quot;http://google.com&quot;});</code></pre>
 <p>Result:</p>
 <pre><code class="language-html">&lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-  &lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
+  &lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
 &lt;/a&gt;
 &lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-  &lt;button class=&quot;example&quot;&gt;Link2&lt;/button&gt;
+  &lt;span class=&quot;example&quot;&gt;Link2&lt;/span&gt;
 &lt;/a&gt;
 &lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-  &lt;button class=&quot;example&quot;&gt;Link3&lt;/button&gt;
+  &lt;span class=&quot;example&quot;&gt;Link3&lt;/span&gt;
 &lt;/a&gt;</code></pre>
 <p>Nested selector arguments:</p>
-<pre><code class="language-html">&lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;</code></pre>
+<pre><code class="language-html">&lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;</code></pre>
 <pre><code class="language-js">u(&quot;.example&quot;).wrap(&#39;&lt;div class=&quot;a1&quot;&gt;&lt;div class=&quot;b1&quot;&gt;&lt;div class=&quot;c1&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#39;);</code></pre>
 <p>Result:</p>
 <pre><code class="language-html">&lt;div class=&quot;a1&quot;&gt;
     &lt;div class=&quot;b1&quot;&gt;
         &lt;div class=&quot;c1&quot;&gt;
             &lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-              &lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
+              &lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
             &lt;/a&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 <p>Nested selector arguments with multiple child nodes:</p>
-<pre><code class="language-html">&lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;</code></pre>
+<pre><code class="language-html">&lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;</code></pre>
 <pre><code class="language-js">u(&quot;.example&quot;).wrap(&#39;&lt;div class=&quot;a1&quot;&gt;&lt;div class=&quot;b1&quot;&gt;&lt;div class=&quot;c1&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;b2&quot;&gt;&lt;div class=&quot;c2&quot;&gt;&lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#39;);</code></pre>
 <p>Result:</p>
 <pre><code class="language-html">&lt;div class=&quot;a1&quot;&gt;
     &lt;div class=&quot;b1&quot;&gt;
         &lt;div class=&quot;c1&quot;&gt;
             &lt;a href=&quot;http://google.com&quot; class=&quot;wrapper&quot;&gt;
-              &lt;button class=&quot;example&quot;&gt;Link1&lt;/button&gt;
+              &lt;span class=&quot;example&quot;&gt;Link1&lt;/span&gt;
             &lt;/a&gt;
         &lt;/div&gt;
     &lt;/div&gt;

docs/test.js

@@ -2578,6 +2578,10 @@ describe('.size()', function() {
     var size = u('body').size();
     expect(Math.round(size.height)).to.equal(u('body').first().clientHeight);
   });
+
+  it('should return null for an empty Umbrella instance', function() {
+    expect(u().size()).to.equal(null);
+  });
 });
 
 describe(".slice()", function() {

documentation.md

@@ -1917,7 +1917,7 @@ None
 
 ### Return
 
-Returns a simple object with the following properties referring to the first matched element:
+Returns a simple object with the following properties referring to the first matched element, or `null` if there is no one:
 
 - left
 - right
@@ -1934,6 +1934,9 @@ Returns a simple object with the following properties referring to the first mat
 ```js
 u('body').size();
 // {"left":0,"right":400,"top":0,"height":300,"bottom":300,"width":400}
+
+u().size()
+// null
 ```
 
 ## .text()
@@ -2124,7 +2127,7 @@ Wrap an element in an html element:
 
 Original element:
 ```html
-<button class="example">Link1</button>
+<span class="example">Link1</span>
 ```
 
 ```js
@@ -2134,7 +2137,7 @@ u(".example").wrap('<a class="wrapper">');
 Result:
 ```html
 <a class="wrapper">
-  <button class="example">Link1</button>
+  <span class="example">Link1</span>
 </a>
 ```
 
@@ -2147,16 +2150,16 @@ u(".example").wrap('<a>').attr({class: "wrapper", href: "http://google.com"});
 Result:
 ```html
 <a href="http://google.com" class="wrapper">
-  <button class="example">Link1</button>
+  <span class="example">Link1</span>
 </a>
 ```
 
 Wrap several elements in an html element
 
 ```html
-<button class="example">Link1</button>
-<button class="example">Link2</button>
-<button class="example">Link3</button>
+<span class="example">Link1</span>
+<span class="example">Link2</span>
+<span class="example">Link3</span>
 
 ```
 
@@ -2167,20 +2170,20 @@ u(".example").wrap('<a>').attr({class: "wrapper", href: "http://google.com"});
 Result:
 ```html
 <a href="http://google.com" class="wrapper">
-  <button class="example">Link1</button>
+  <span class="example">Link1</span>
 </a>
 <a href="http://google.com" class="wrapper">
-  <button class="example">Link2</button>
+  <span class="example">Link2</span>
 </a>
 <a href="http://google.com" class="wrapper">
-  <button class="example">Link3</button>
+  <span class="example">Link3</span>
 </a>
 ```
 
 Nested selector arguments:
 
 ```html
-<button class="example">Link1</button>
+<span class="example">Link1</span>
 ```
 
 ```js
@@ -2193,7 +2196,7 @@ Result:
 	<div class="b1">
 		<div class="c1">
 			<a href="http://google.com" class="wrapper">
-			  <button class="example">Link1</button>
+			  <span class="example">Link1</span>
 			</a>
 		</div>
 	</div>
@@ -2203,7 +2206,7 @@ Result:
 Nested selector arguments with multiple child nodes:
 
 ```html
-<button class="example">Link1</button>
+<span class="example">Link1</span>
 ```
 
 ```js
@@ -2216,7 +2219,7 @@ Result:
 	<div class="b1">
 		<div class="c1">
 			<a href="http://google.com" class="wrapper">
-			  <button class="example">Link1</button>
+			  <span class="example">Link1</span>
 			</a>
 		</div>
 	</div>

src/plugins/scroll/scroll.js

@@ -1,5 +1,10 @@
 // Scroll to the first matched element
 u.prototype.scroll = function () {
-  this.first().scrollIntoView({ behavior: 'smooth' });
+  var first = this.first();
+
+  if (first) {
+    first.scrollIntoView({ behavior: 'smooth' });
+  }
+
   return this;
 };

src/plugins/size/readme.md

@@ -13,7 +13,7 @@ None
 
 ### Return
 
-Returns a simple object with the following properties referring to the first matched element:
+Returns a simple object with the following properties referring to the first matched element, or `null` if there is no one:
 
 - left
 - right
@@ -30,4 +30,7 @@ Returns a simple object with the following properties referring to the first mat
 ```js
 u('body').size();
 // {"left":0,"right":400,"top":0,"height":300,"bottom":300,"width":400}
+
+u().size()
+// null
 ```

src/plugins/size/size.js

@@ -1,4 +1,6 @@
 // Find the size of the first matched element
 u.prototype.size = function () {
-  return this.first().getBoundingClientRect();
+  var first = this.first();
+
+  return first ? first.getBoundingClientRect() : null;
 };

src/plugins/size/test.js

@@ -17,4 +17,8 @@ describe('.size()', function() {
     var size = u('body').size();
     expect(Math.round(size.height)).to.equal(u('body').first().clientHeight);
   });
+
+  it('should return null for an empty Umbrella instance', function() {
+    expect(u().size()).to.equal(null);
+  });
 });

umbrella.js

@@ -611,7 +611,12 @@ u.prototype.replace = function (html, data) {
 
 // Scroll to the first matched element
 u.prototype.scroll = function () {
-  this.first().scrollIntoView({ behavior: 'smooth' });
+  var first = this.first();
+
+  if (first) {
+    first.scrollIntoView({ behavior: 'smooth' });
+  }
+
   return this;
 };
 
@@ -667,7 +672,9 @@ u.prototype.siblings = function (selector) {
 
 // Find the size of the first matched element
 u.prototype.size = function () {
-  return this.first().getBoundingClientRect();
+  var first = this.first();
+
+  return first ? first.getBoundingClientRect() : null;
 };