0.4.0

README.md

@@ -2,15 +2,15 @@
 Observe.js
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Observe.js%2C%20a%20free%20JavaScript%observe%builder&url=https://github.com/williamtroup/Observe.js&hashtags=javascript,html,observe)
-[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jobserve.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jObserve.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jobserve.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jObserve.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Observe.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Observe.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
 </h1>
 
 > <p align="center">A lightweight, and easy-to-use, JavaScript library for observing any kind of JS object, or HTML DOM element, to detect changes!</p>
-> <p align="center">v0.3.0</p>
+> <p align="center">v0.4.0</p>
 <br />
 <br>
 
@@ -63,22 +63,22 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows
 ### 3. DOM Element Binding / Object Watching:
 
 ```markdown
-<div data-observe-options="{ 'onChange': yourCustomJsFunction }">
+<div data-observe-watch-options="{ 'onChange': yourCustomJsFunction }">
     Your HTML.
 </div>
 ```
 
 ```markdown
 <script> 
-    var id = $observe.watchObject( yourObject, {
+    var id = $observe.watch( yourObject, {
         onChange: yourCustomJsFunction
     } );
 </script>
 ```
 
-To see a list of all the available binding options you can use for "data-observe-options", and "watchObject()", click [here](docs/binding/options/OPTIONS.md).
+To see a list of all the available binding options you can use for "data-observe-watch-options", and "watch()", click [here](docs/binding/options/OPTIONS.md).
 
-To see a list of all the available custom triggers you can use for "data-observe-options", and "watchObject()", click [here](docs/binding/options/CUSTOM_TRIGGERS.md).
+To see a list of all the available custom triggers you can use for "data-observe-watch-options", and "watch()", click [here](docs/binding/options/CUSTOM_TRIGGERS.md).
 
 <br>
 

README_NUGET.md

@@ -1,8 +1,8 @@
-# Observe.js v0.3.0
+# Observe.js v0.4.0
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Observe.js%2C%20a%20free%20JavaScript%observe%builder&url=https://github.com/williamtroup/Observe.js&hashtags=javascript,html,observe)
-[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jobserve.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jObserve.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jobserve.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jObserve.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Observe.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Observe.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
@@ -52,22 +52,22 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows
 ### 3. DOM Element Binding / Object Watching:
 
 ```markdown
-<div data-observe-options="{ 'onChange': yourCustomJsFunction }">
+<div data-observe-watch-options="{ 'onChange': yourCustomJsFunction }">
     Your HTML.
 </div>
 ```
 
 ```markdown
 <script> 
-    var id = $observe.watchObject( yourObject, {
+    var id = $observe.watch( yourObject, {
         onChange: yourCustomJsFunction
     } );
 </script>
 ```
 
-To see a list of all the available binding options you can use for "data-observe-options", and "watchObject()", click [here](https://github.com/williamtroup/Observe.js/blob/main/docs/binding/options/OPTIONS.md).
+To see a list of all the available binding options you can use for "data-observe-watch-options", and "watch()", click [here](https://github.com/williamtroup/Observe.js/blob/main/docs/binding/options/OPTIONS.md).
 
-To see a list of all the available custom triggers you can use for "data-observe-options", and "watchObject()", click [here](https://github.com/williamtroup/Observe.js/blob/main/docs/binding/options/CUSTOM_TRIGGERS.md).
+To see a list of all the available custom triggers you can use for "data-observe-watch-options", and "watch()", click [here](https://github.com/williamtroup/Observe.js/blob/main/docs/binding/options/CUSTOM_TRIGGERS.md).
 
 
 ### 4. Finishing Up:

dist/observe.js

@@ -1,4 +1,4 @@
-/*! Observe.js v0.3.0 | (c) Bunoon | MIT License */
+/*! Observe.js v0.4.0 | (c) Bunoon | MIT License */
 (function() {
   function collectDOMObjects() {
     var tagTypes = _configuration.domElementTypes;
@@ -18,25 +18,26 @@
   }
   function collectDOMObject(element) {
     var result = true;
-    if (isDefined(element) && element.hasAttribute(_attribute_Name_Options)) {
-      var bindingOptionsData = element.getAttribute(_attribute_Name_Options);
+    if (isDefined(element) && element.hasAttribute(_attribute_Name_Watch_Options)) {
+      var bindingOptionsData = element.getAttribute(_attribute_Name_Watch_Options);
       if (isDefinedString(bindingOptionsData)) {
         var bindingOptions = getObjectFromString(bindingOptionsData);
         if (bindingOptions.parsed && isDefinedObject(bindingOptions.result)) {
           bindingOptions = getWatchOptions(bindingOptions.result);
           if (!isDefinedString(element.id)) {
             element.id = newGuid();
           }
+          element.removeAttribute(_attribute_Name_Watch_Options);
           createWatch(element, bindingOptions, element.id);
         } else {
           if (!_configuration.safeMode) {
-            console.error("The attribute '" + _attribute_Name_Options + "' is not a valid object.");
+            console.error("The attribute '" + _attribute_Name_Watch_Options + "' is not a valid object.");
             result = false;
           }
         }
       } else {
         if (!_configuration.safeMode) {
-          console.error("The attribute '" + _attribute_Name_Options + "' has not been set correctly.");
+          console.error("The attribute '" + _attribute_Name_Watch_Options + "' has not been set correctly.");
           result = false;
         }
       }
@@ -50,11 +51,11 @@
       var watchOptions = getWatchOptions(options);
       var watch = {};
       watch.options = watchOptions;
-      watch.domElementId = domElementId;
       watch.totalChanges = 0;
       if (isDefinedString(domElementId)) {
         var domElement = _parameter_Document.getElementById(domElementId);
         if (isDefined(domElement)) {
+          watch.domElementId = domElementId;
           watch.cachedObject = domElement.outerHTML;
           watch.originalObject = domElement.outerHTML;
         }
@@ -63,18 +64,21 @@
         watch.originalObject = object;
       }
       watch.timer = setInterval(function() {
-        var currentDateTime = new Date();
-        if (!isDefinedDate(watchOptions.starts) || currentDateTime >= watchOptions.starts) {
-          watchObjectForChanges(storageId);
-          if (isDefinedDate(watchOptions.expires) && currentDateTime >= watchOptions.expires) {
-            cancelWatchObject(storageId);
-          }
-        }
+        watchTimer(watchOptions, storageId);
       }, watchOptions.timeout);
       _watches[storageId] = watch;
     }
     return storageId;
   }
+  function watchTimer(watchOptions, storageId) {
+    var currentDateTime = new Date();
+    if (!isDefinedDate(watchOptions.starts) || currentDateTime >= watchOptions.starts) {
+      watchObjectForChanges(storageId);
+      if (isDefinedDate(watchOptions.expires) && currentDateTime >= watchOptions.expires) {
+        cancelWatchObject(storageId);
+      }
+    }
+  }
   function watchObjectForChanges(storageId) {
     if (_watches.hasOwnProperty(storageId)) {
       var watch = _watches[storageId];
@@ -84,14 +88,15 @@
         domElement = _parameter_Document.getElementById(watch.domElementId);
         if (isDefined(domElement)) {
           watch.originalObject = domElement.outerHTML;
+        } else {
+          watch.originalObject = _string.empty;
         }
       }
       var cachedObject = watch.cachedObject;
       var originalObject = watch.originalObject;
       var originalObjectJson = !isDomElement ? JSON.stringify(originalObject) : originalObject;
       if (cachedObject !== originalObjectJson) {
-        var watchOptions = watch.options;
-        if (watchOptions.reset) {
+        if (watch.options.reset) {
           if (isDomElement) {
             domElement.outerHTML = watch.cachedObject;
           } else {
@@ -101,23 +106,23 @@
           watch.cachedObject = originalObjectJson;
         }
         if (isDomElement) {
-          fireCustomTrigger(watchOptions.onChange, cachedObject, originalObjectJson);
+          fireCustomTrigger(watch.options.onChange, cachedObject, originalObjectJson);
         } else {
           var oldValue = getObjectFromString(cachedObject).result;
           var newValue = getObjectFromString(originalObjectJson).result;
-          fireCustomTrigger(watchOptions.onChange, oldValue, newValue);
-          if (isDefinedFunction(watchOptions.onPropertyChange) && !isDefinedArray(oldValue)) {
-            compareWatchObjectProperties(oldValue, newValue, watchOptions);
+          fireCustomTrigger(watch.options.onChange, oldValue, newValue);
+          if (isDefinedFunction(watch.options.onPropertyChange) && !isDefinedArray(oldValue)) {
+            compareWatchObjectProperties(oldValue, newValue, watch.options);
           }
         }
-        if (watchOptions.pauseTimeoutOnChange > 0) {
-          pauseWatchObject(storageId, watchOptions.pauseTimeoutOnChange);
+        if (watch.options.pauseTimeoutOnChange > 0) {
+          pauseWatchObject(storageId, watch.options.pauseTimeoutOnChange);
         }
-        if (watchOptions.cancelOnChange) {
+        if (watch.options.cancelOnChange) {
           cancelWatchObject(storageId);
         }
         watch.totalChanges++;
-        if (watchOptions.maximumChangesBeforeCanceling > 0 && watch.totalChanges >= watchOptions.maximumChangesBeforeCanceling) {
+        if (watch.options.maximumChangesBeforeCanceling > 0 && watch.totalChanges >= watch.options.maximumChangesBeforeCanceling) {
           cancelWatchObject(storageId);
         }
       }
@@ -152,8 +157,7 @@
   }
   function cancelWatchObject(storageId) {
     if (_watches.hasOwnProperty(storageId)) {
-      var watchOptions = _watches[storageId].options;
-      fireCustomTrigger(watchOptions.onCancel, storageId);
+      fireCustomTrigger(_watches[storageId].options.onCancel, storageId);
       clearTimeout(_watches[storageId].timer);
       delete _watches[storageId];
     }
@@ -290,8 +294,8 @@
   var _string = {empty:""};
   var _watches = {};
   var _configuration = {};
-  var _attribute_Name_Options = "data-observe-options";
-  this.watchObject = function(object, options) {
+  var _attribute_Name_Watch_Options = "data-observe-watch-options";
+  this.watch = function(object, options) {
     return createWatch(object, options);
   };
   this.cancelWatch = function(id) {
@@ -348,13 +352,17 @@
     }
     return result;
   };
+  this.searchDomForNewWatches = function() {
+    collectDOMObjects();
+    return this;
+  };
   this.setConfiguration = function(newOptions) {
     _configuration = !isDefinedObject(newOptions) ? {} : newOptions;
     buildDefaultConfiguration();
     return this;
   };
   this.getVersion = function() {
-    return "0.3.0";
+    return "0.4.0";
   };
   (function(documentObject, windowObject) {
     _parameter_Document = documentObject;