Skip to content

Commit

Permalink
refacto(Widgets): rename widgets to navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgermerie @gchoqueux
mgermerie authored and gchoqueux committed Jan 31, 2022
1 parent 91ccfe3 commit 509a042
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 60 deletions.
7 changes: 5 additions & 2 deletions examples/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,11 @@
"misc_orthographic_camera": "Orthographic camera",
"misc_custom_controls": "Define custom controls",
"misc_custom_label": "Custom label popup",
"misc_camera_traveling": "Camera traveling",
"misc_widgets": "Display widgets"
"misc_camera_traveling": "Camera traveling"
},

"Widgets": {
"widgets_navigation": "Navigation"
},

"Plugins": {
Expand Down
106 changes: 53 additions & 53 deletions examples/css/widgets.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/* ---------- WIDGETS GROUP SETTINGS : ------------------------------------------------------------------------------ */
/* ---------- NAVIGATION WIDGET SETTINGS : -------------------------------------------------------------------------- */

#widgets {
#widgets-navigation {
position: absolute;
z-index: 10;

display: flex;
align-items: center;
}

/* Define widget group flex direction according to widget position and direction settings */
/* Define navigation menu flex direction according to its position and direction settings */
.column-widget.top-widget {
flex-direction: column;
}
Expand All @@ -22,64 +22,64 @@
flex-direction: row-reverse;
}

/* Define widget group position according to widget position settings. */
.top-widget {
/* Define navigation menu position according to its position settings. */
#widgets-navigation.top-widget {
top: 10px;
}
.bottom-widget {
#widgets-navigation.bottom-widget {
bottom: 10px;
}
.left-widget {
#widgets-navigation.left-widget {
left: 10px;
}
.right-widget {
#widgets-navigation.right-widget {
right: 10px;
}

/* Define spacing between each widgets according to position and direction settings. */
.column-widget.top-widget > *:not(:first-child),
.column-widget.bottom-widget > *:not(:last-child) {
/* Define spacing between each navigation widgets according to position and direction settings. */
#widgets-navigation.column-widget.top-widget > *:not(:first-child),
#widgets-navigation.column-widget.bottom-widget > *:not(:last-child) {
margin-top: 5px;
}
.column-widget.top-widget > *:not(:last-child),
.column-widget.bottom-widget > *:not(:first-child) {
#widgets-navigation.column-widget.top-widget > *:not(:last-child),
#widgets-navigation.column-widget.bottom-widget > *:not(:first-child) {
margin-bottom: 5px;
}
.row-widget.left-widget > *:not(:first-child),
.row-widget.right-widget > *:not(:last-child) {
#widgets-navigation.row-widget.left-widget > *:not(:first-child),
#widgets-navigation.row-widget.right-widget > *:not(:last-child) {
margin-left: 5px;
}
.row-widget.left-widget > *:not(:last-child),
.row-widget.right-widget > *:not(:first-child) {
#widgets-navigation.row-widget.left-widget > *:not(:last-child),
#widgets-navigation.row-widget.right-widget > *:not(:first-child) {
margin-right: 5px;
}



/* ---------- WIDGET BUTTON BAR : ----------------------------------------------------------------------------------- */
/* ---------- NAVIGATION BUTTON BAR : ------------------------------------------------------------------------------- */

/* Define button-bar flex direction according to widget position and direction settings. */
#widgets .widget-button-bar {
#widgets-navigation .widget-button-bar {
display: flex;
}
.column-widget.top-widget .widget-button-bar {
#widgets-navigation.column-widget.top-widget .widget-button-bar {
flex-direction: column;
}
.column-widget.bottom-widget .widget-button-bar {
#widgets-navigation.column-widget.bottom-widget .widget-button-bar {
flex-direction: column-reverse;
}
.row-widget.left-widget .widget-button-bar {
#widgets-navigation.row-widget.left-widget .widget-button-bar {
flex-direction: row;
}
.row-widget.right-widget .widget-button-bar {
#widgets-navigation.row-widget.right-widget .widget-button-bar {
flex-direction: row-reverse;
}



/* ---------- BUTTONS GENERIC STYLE : ------------------------------------------------------------------------------- */

#widgets .widget-button {
#widgets-navigation .widget-button {
background-color: #313336bb;
border: 1px solid #222222;
padding: 0;
Expand All @@ -91,54 +91,54 @@
font-weight: 900;
font-size: 15px;
}
#widgets .widget-button:hover {
#widgets-navigation .widget-button:hover {
cursor: pointer;
}
#widgets .widget-button:active {
#widgets-navigation .widget-button:active {
background-color: #222222;
}



/* ---------- BUTTONS SHAPE AND POSITION WITHIN BUTTON-BAR : -------------------------------------------------------- */

#widgets .widget-button-bar > .widget-button {
#widgets-navigation .widget-button-bar > .widget-button {
height: 30px;
width: 30px;

color: white;
}

/* Buttons shape and position within a column direction widget group. */
.column-widget.top-widget .widget-button-bar > .widget-button:first-child,
.column-widget.bottom-widget .widget-button-bar > .widget-button:last-child {
#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:first-child:not(:only-child),
#widgets-navigation.column-widget.bottom-widget .widget-button-bar > .widget-button:last-child:not(:only-child) {
border-radius: 7px 7px 0 0;
}
.column-widget.top-widget .widget-button-bar > .widget-button:last-child,
.column-widget.bottom-widget .widget-button-bar > .widget-button:first-child {
#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:last-child:not(:only-child),
#widgets-navigation.column-widget.bottom-widget .widget-button-bar > .widget-button:first-child:not(:only-child) {
border-radius: 0 0 7px 7px;
}
.column-widget.top-widget .widget-button-bar > .widget-button:not(:last-child),
.column-widget.bottom-widget .widget-button-bar > .widget-button:not(:first-child) {
#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:not(:last-child),
#widgets-navigation.column-widget.bottom-widget .widget-button-bar > .widget-button:not(:first-child) {
margin-bottom: -1px;
}

/* Buttons shape and position within a row direction widget group. */
.row-widget.left-widget .widget-button-bar > .widget-button:first-child,
.row-widget.right-widget .widget-button-bar > .widget-button:last-child {
#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:first-child:not(:only-child),
#widgets-navigation.row-widget.right-widget .widget-button-bar > .widget-button:last-child:not(:only-child) {
border-radius: 7px 0 0 7px;
}
.row-widget.left-widget .widget-button-bar > .widget-button:last-child,
.row-widget.right-widget .widget-button-bar > .widget-button:first-child {
#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:last-child:not(:only-child),
#widgets-navigation.row-widget.right-widget .widget-button-bar > .widget-button:first-child:not(:only-child) {
border-radius: 0 7px 7px 0;
}
.row-widget.left-widget .widget-button-bar > .widget-button:not(:last-child),
.row-widget.right-widget .widget-button-bar > .widget-button:not(:first-child) {
#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:not(:last-child),
#widgets-navigation.row-widget.right-widget .widget-button-bar > .widget-button:not(:first-child) {
margin-right: -1px;
}

/* Buttons shape and position within a single button button-bar. */
#widgets .widget-button-bar > .widget-button:only-child {
#widgets-navigation .widget-button-bar > .widget-button:only-child {
border-radius: 7px;
}

Expand All @@ -149,59 +149,59 @@
#zoom-button-bar {
display: flex;
}
.column-widget #zoom-button-bar {
#widgets-navigation.column-widget #zoom-button-bar {
flex-direction: column;
}
.row-widget #zoom-button-bar {
#widgets-navigation.row-widget #zoom-button-bar {
flex-direction: row-reverse;
}

/* Zoom buttons shape and position within a COLUMN direction widget group. */
.column-widget #zoom-button-bar > .widget-button:first-child {
#widgets-navigation.column-widget #zoom-button-bar > .widget-button:first-child {
border-radius: 7px 7px 0 0;
}
.column-widget #zoom-button-bar > .widget-button:last-child {
#widgets-navigation.column-widget #zoom-button-bar > .widget-button:last-child {
border-radius: 0 0 7px 7px;
}
.column-widget.bottom-widget #zoom-button-bar > .widget-button:not(:last-child) {
#widgets-navigation.column-widget.bottom-widget #zoom-button-bar > .widget-button:not(:last-child) {
margin-top: 0;
margin-bottom: -1px;
}

/* Zoom buttons shape and position within a ROW direction widget group. */
.row-widget #zoom-button-bar > .widget-button:first-child {
/* Zoom buttons shape and position within a ROW direction navigation menu. */
#widgets-navigation.row-widget #zoom-button-bar > .widget-button:first-child {
border-radius: 0 7px 7px 0;
}
.row-widget #zoom-button-bar > .widget-button:last-child {
#widgets-navigation.row-widget #zoom-button-bar > .widget-button:last-child {
border-radius: 7px 0 0 7px;
}
.row-widget.left-widget #zoom-button-bar > .widget-button:not(:last-child) {
#widgets-navigation.row-widget.left-widget #zoom-button-bar > .widget-button:not(:last-child) {
margin-right: 0;
margin-left: -1px;
}

/* Zoom button shape and position if user decides to show only one of the two zoom buttons. */
#widgets #zoom-button-bar > .widget-button:only-child {
#widgets-navigation #zoom-button-bar > .widget-button:only-child {
border-radius: 7px;
}

/* Style of zoom buttons content. */
#widgets .widget-zoom-button-logo {
#widgets-navigation .widget-zoom-button-logo {
width: 50%;
height: 50%;

background-image: url('../images/widget-logo.svg');
background-size: 100%;
}
#widgets #zoom-out-logo {
#widgets-navigation #zoom-out-logo {
background-position: center -100%;
}



/* ---------- SPECIFIC COMPASS SETTINGS : --------------------------------------------------------------------------- */

#widgets #compass {
#widgets-navigation #compass {
width: 60px;
height: 60px;

Expand Down
4 changes: 2 additions & 2 deletions examples/misc_widgets.html → examples/widgets_navigation.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html>
<head>
<title>Itowns - Widgets</title>
<title>Itowns - Navigation widget</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand Down Expand Up @@ -75,7 +75,7 @@



// ---------- ADD WIDGETS MENU : ----------
// ---------- ADD NAVIGATION WIDGET : ----------

const widgets = new itowns_widgets.Navigation(view);

Expand Down
6 changes: 3 additions & 3 deletions utils/gui/Navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class Navigation {
this.direction = options.direction || DEFAULT_OPTIONS.direction;
if (!['column', 'row'].includes(this.direction)) {
console.warn(
'\'direction\' optional parameter for \'Widgets\' constructor is not a valid option. '
'\'direction\' optional parameter for \'Navigation\' constructor is not a valid option. '
+ `It will be set to '${DEFAULT_OPTIONS.direction}'.`,
);
this.direction = DEFAULT_OPTIONS.direction;
Expand All @@ -67,7 +67,7 @@ class Navigation {
this.position = options.position || DEFAULT_OPTIONS.position;
if (!['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(this.position)) {
console.warn(
'\'position\' optional parameter for \'Widgets\' constructor is not a valid option. '
'\'position\' optional parameter for \'Navigation\' constructor is not a valid option. '
+ `It will be set to '${DEFAULT_OPTIONS.position}'.`,
);
this.position = DEFAULT_OPTIONS.position;
Expand All @@ -82,7 +82,7 @@ class Navigation {

// Create a div containing all widgets and add it to its specified parent.
this.domElement = document.createElement('div');
this.domElement.id = 'widgets';
this.domElement.id = 'widgets-navigation';
this.parentElement.appendChild(this.domElement);

// Position widget div according to options.
Expand Down

0 comments on commit 509a042

Please sign in to comment.