docs(Widgets): specify resources needed to use widgets

iTowns · Mar 17, 2022 · b65c081 · b65c081
1 parent 44cc7d0
commit b65c081
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 132 deletions.
diff --git a/examples/css/widgets.css b/examples/css/widgets.css
@@ -194,7 +194,7 @@
     width: 50%;
     height: 50%;
 
-    background-image: url('../images/widget-logo.svg');
+    background-image: url('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/GUI/widget-logo.svg');
     background-size: 100%;
 }
 #widgets-navigation #zoom-out-logo {
@@ -211,7 +211,7 @@
 
     border-radius: 50%;
 
-    background-image: url('../images/compass.svg');
+    background-image: url('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/GUI/compass.svg');
     background-repeat: no-repeat;
     background-size: auto 90%;
     background-position: center;

diff --git a/examples/images/compass.svg b/examples/images/compass.svg
diff --git a/examples/images/widget-logo.svg b/examples/images/widget-logo.svg
diff --git a/examples/widgets_minimap.html b/examples/widgets_minimap.html
@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

diff --git a/examples/widgets_navigation.html b/examples/widgets_navigation.html
@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

diff --git a/examples/widgets_scale.html b/examples/widgets_scale.html
@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

diff --git a/examples/widgets_searchbar.html b/examples/widgets_searchbar.html
@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

diff --git a/src/Utils/gui/Minimap.js b/src/Utils/gui/Minimap.js
@@ -18,6 +18,12 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget for minimap
  *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_minimap) for more details.
+ *
  * @extends Widget
  *
  * @property    {HTMLElement}   domElement      An html div containing the minimap.

diff --git a/src/Utils/gui/Navigation.js b/src/Utils/gui/Navigation.js
@@ -16,6 +16,12 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget menu manager for navigation.
  *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_navigation) for more details.
+ *
  * @extends Widget
  *
  * @property {HTMLElement}  domElement          An html div containing all navigation widgets.

diff --git a/src/Utils/gui/Scale.js b/src/Utils/gui/Scale.js
@@ -15,6 +15,12 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget for scale
  *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_scale) for more details.
+ *
  * @extends Widget
  *
  * @property    {HTMLElement}   domElement      An html div containing the scale.

diff --git a/src/Utils/gui/Searchbar.js b/src/Utils/gui/Searchbar.js
@@ -45,6 +45,12 @@ function eraseSuggestionList(form) {
 /**
  * A widget for searchbar
  *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_searchbar) for more details.
+ *
  * @extends Widget
  *
  * @property    {HTMLElement}   domElement      An html div containing the searchbar.