From 20baf93bf38ab83af875536a4229a5f7b55f2a30 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 12 Nov 2017 17:22:35 +0100 Subject: [PATCH] Now history.timeline is vertical --- build/generic/view/history/details/main.php | 128 +++++----- build/generic/view/history/details/main.twig | 5 +- public_html/css/constants.scss | 1 + public_html/css/container.scss | 232 +++++++++++-------- public_html/css/layout.scss | 2 +- public_html/css/min/container.css | 181 ++++++++------- public_html/css/min/layout.css | 2 +- public_html/css/submenu-side.scss | 2 +- public_html/js/lib/reset.js | 8 - public_html/view/history.php | 2 +- public_html/view/js/history.js | 62 ++++- 11 files changed, 350 insertions(+), 275 deletions(-) diff --git a/build/generic/view/history/details/main.php b/build/generic/view/history/details/main.php index e91bd47..7780c4f 100644 --- a/build/generic/view/history/details/main.php +++ b/build/generic/view/history/details/main.php @@ -9,9 +9,9 @@ class main extends i_view{ - public $id_history; - private $timeline = []; - private $entry = []; + public $id_history; + public $timeline = []; + public $entry = []; /* (1) Constructor @@ -56,8 +56,6 @@ /* (2) Format timeline data to svg render * - * @timeline Timeline data - * * @return svg SVG raw render * ---------------------------------------------------------*/ @@ -75,102 +73,86 @@ $c = 0; $cl = count($this->timeline); - /* (4) Create ranges of size 15 */ - $r_size = 10; // set the number of actions by line - $rl = floor( $cl / $r_size ); // calculate the number of whole lines - $lrl = $cl % $r_size; // calculate the number of actions in the last line - $y_range_diff = 100; - $total_height = ($lrl == 0 ) ? $y_range_diff*$rl : $y_range_diff*($rl+1); // total height (number of entries + last if not empty) - + /* (4) Useful variables */ + $y_pad = 80; // padding between each node + $line_pad = 50; // padding on each LINE end + $line_height = ( $cl + 1 ) * $y_pad; // line height (each node * @y_pad + @y_pad) + $height = $line_height + 2*$line_pad; // svg height + $width = 100; // svg width + $x = $width/2; // center width /* (5) Svg tag */ - $RAW .= ""; + $RAW .= ""; /* (6) Start CIRCLE */ - $RAW .= ""; - $RAW .= ""; + $RAW .= ""; + $RAW .= ""; - for( $r = 0 ; $r <= $rl ; $r++ ){ + /* (2) Build barebone + ---------------------------------------------------------*/ + /* (1) Default TIMELINE */ + $line_end_y = $line_height + $line_pad; + $RAW .= ""; - // if last line is empty -> stop here - if( $r == $rl && $lrl == 0 ) - break; - $y = $y_range_diff*$r + 50; + /* (3) Build each action + ---------------------------------------------------------*/ + for( $c = 0 ; $c < $cl ; $c++ ){ - /* (2) Build barebone - ---------------------------------------------------------*/ - /* (1) Default TIMELINE */ - if( $r < $rl ){ + /* (1) Calculate X */ + $y = $line_pad + $y_pad + $c*$y_pad; - $RAW .= ""; + /* (2) Get entry data */ + $entry = $this->timeline[$c]; - /* (2) Last TIMELINE (can be shorter) */ - }else{ // if last line -> trace timeline until last element +1 + /* (3) Get useful data */ + $action_class = strtolower($entry['action_name']); + $icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg'; + $data_user = "data-user='".$entry['user_name']."'"; + $data_machine = " data-machine='".$entry['machine_name']."'"; + $data_action = " data-action='".$entry['action_name']."'"; + $data_time = " data-time='".date('H:i:s d/m/Y', $entry['timestamp'])."'"; + $data_tags = $data_user.$data_machine.$data_action.$data_time; - $len = 100 + $lrl*800/$r_size; - $RAW .= ""; + $y_img = $y - 5.5; + /* (4) Draw entry circles */ + $RAW .= ""; + $RAW .= ""; + + /* (5) Draw entry icon (action) */ + $x_decal = $x - 5.5; + $RAW .= "\t"; + + /* (6) Draw circle below if current user */ + if( $this->entry['id_user'] == $entry['id_user'] ){ + $x_decal = $x - 21; + $RAW .= ""; } - /* (3) Build each action - ---------------------------------------------------------*/ - $el_len = ( $r == $rl ) ? $lrl : $r_size ;// number of elements on the line - for( $c = 0 ; $c < $el_len ; $c++ ){ - - /* (1) Display nothing if last entry and is empty */ - if( !isset($this->timeline[$r*$r_size+$c]) ) - break; - - /* (2) Get entry data */ - $entry = $this->timeline[$r*$r_size+$c]; - - /* (3) Get useful data */ - $action_class = strtolower($entry['action_name']); - $icon_uri = '/src/static/timeline/'.$action_class.'@'.$this->get_action_color($action_class).'.svg'; - $x_offset = 100 + $c*800/$r_size; - $x_img_offset = $x_offset - 5.5; - $data_user = "data-user='".$entry['id_user']."'"; - $data_machine = " data-machine='".$entry['id_machine']."'"; - $data_action = " data-action='".$entry['id_action']."'"; - $data_time = " data-time='".date('H:i:s d/m/Y', $entry['timestamp'])."'"; - $data_tags = $data_user.$data_machine.$data_action.$data_time; - - /* (4) Draw entry circles */ - $RAW .= ""; - $RAW .= ""; - - /* (5) Draw entry icon (action) */ - $y_decal = $y - 5.5; - $RAW .= "\t"; - - /* (6) Draw circle below if current user */ - if( $this->entry['id_user'] == $entry['id_user'] ){ - $y_decal = $y + 21; - $RAW .= ""; - } - - - - } - } /* (4) Close SVG ---------------------------------------------------------*/ /* (1) Stop CIRCLE */ - $x_offset = 100 + $c*800/$r_size; - $RAW .= ""; - $RAW .= ""; + $y = $line_height + $line_pad; + $RAW .= ""; + $RAW .= ""; /* (2) Close SVG tag */ $RAW .= ""; + /* (5) Create invisible infobox (for now) + ---------------------------------------------------------*/ + $RAW .= "
"; + + + return $RAW; } diff --git a/build/generic/view/history/details/main.twig b/build/generic/view/history/details/main.twig index 9a99c0c..2bc6e6d 100644 --- a/build/generic/view/history/details/main.twig +++ b/build/generic/view/history/details/main.twig @@ -1,3 +1,6 @@ -{{ core.svg() | raw }} \ No newline at end of file +
+ {{ core.svg() | raw }} +
+ diff --git a/public_html/css/constants.scss b/public_html/css/constants.scss index 3ec5603..6309e95 100755 --- a/public_html/css/constants.scss +++ b/public_html/css/constants.scss @@ -17,6 +17,7 @@ $form-grey-color: #8d8d8d; /* GESTION DES LONGUEURS */ $menu-side-width: 4em; +$sub-menu-side-width: 7.5em; // POUR RESOURCE_DISPATCHER diff --git a/public_html/css/container.scss b/public_html/css/container.scss index 0a8f26d..4b90d67 100755 --- a/public_html/css/container.scss +++ b/public_html/css/container.scss @@ -458,149 +458,189 @@ -} - -/* [4] Tableau à cocher -=========================================================*/ -article.check-table{ - - display: flex; - - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - - border-radius: 3px; - border: 1px solid #ddd; - & > div{ + /* [4] Tableau à cocher + =========================================================*/ + article.check-table{ + display: flex; flex-direction: row; - flex-wrap: nowrap; + flex-wrap: wrap; justify-content: space-between; - flex: 100%; - padding: .8em 0; - - color: #333; - - background: #f8f8f8; - border-bottom: 1px solid #eee; - - transition: background .2s ease-in-out; - - &:nth-child(2n){ - background: #fdfdfd; - } - - overflow: hidden; + border-radius: 3px; + border: 1px solid #ddd; - & > span{ - flex: 100%; + & > div{ display: flex; + flex-direction: row; flex-wrap: nowrap; - justify-content: center; + justify-content: space-between; + flex: 100%; + padding: .8em 0; - /* (1) Gestion du checkbox hack */ - input[type='checkbox']{ display: none; } + color: #333; - input[type='checkbox'] + label[for]{ - display: inline-block; - position: absolute; - width: 1.2em; - height: 1.2em; + background: #f8f8f8; + border-bottom: 1px solid #eee; - // border-radius: 50% / 50%; + transition: background .2s ease-in-out; - background: url('/src/static/container/checkbox@999999.svg') center center no-repeat; - background-size: 100% auto;; - - transition: box-shadow .2s ease-in-out; - - cursor: pointer; + &:nth-child(2n){ + background: #fdfdfd; } - input[type='checkbox']:checked + label[for]{ - background-image: url('/src/static/container/checkbox@checked@007dd8.svg'); + overflow: hidden; + + + & > span{ + flex: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + + + /* (1) Gestion du checkbox hack */ + input[type='checkbox']{ display: none; } + + input[type='checkbox'] + label[for]{ + display: inline-block; + position: absolute; + width: 1.2em; + height: 1.2em; + + // border-radius: 50% / 50%; + + background: url('/src/static/container/checkbox@999999.svg') center center no-repeat; + background-size: 100% auto;; + + transition: box-shadow .2s ease-in-out; + + cursor: pointer; + } + + input[type='checkbox']:checked + label[for]{ + background-image: url('/src/static/container/checkbox@checked@007dd8.svg'); + } + } } } -} + /* [5] Timeline SVG + =========================================================*/ + article.timeline.container{ -/* [4] Timeline SVG -=========================================================*/ -svg.timeline{ + display: block; + position: absolute; + width: calc( 100vw - #{$menu-side-width} - #{$sub-menu-side-width} - 11em ); + flex: 1em; - /* (1) svg circles -> set right transform-origin */ - & circle.timeline{ + overflow: hidden; + // overflow-x: auto; - -webkit-transform-origin: 50% 50% 0; - transform-origin: 50% 50% 0; + svg.timeline{ - transition: transform .2s ease-in-out; + /* (1) svg circles -> set right transform-origin */ + & circle.timeline{ - /* (2) Set cursor to pointer */ - &.around{ - cursor: pointer; + -webkit-transform-origin: 50% 50% 0; + transform-origin: 50% 50% 0; - /* (3) Dispatch event to next nodes */ - &:hover + .center{ // center node + transition: transform .2s ease-in-out; - -webkit-transform: scale(1.2); - transform: scale(1.2); + /* (2) Set cursor to pointer */ + &.around{ + cursor: pointer; + + /* (3) Dispatch event to next nodes */ + &:hover + .center{ // center node + + -webkit-transform: scale(1.2); + transform: scale(1.2); + + } + + &:hover + .center + image + .below{ // below node + + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + + } + + } + + /* (4) Remove center circle event */ + &.center{ + + -webkit-pointer-events: none; + pointer-events: none; + + } + + /* (5) Set colors according to action type */ + &.around, &.center, &.below{ + + &.start{ fill: #2cde8b; } + &.stop{ fill: #3a3a3a; } + &.lock{ fill: #e04343; } + &.unlock{ fill: #af1c1c; } + &.signal{ fill: #3258d8; } + &.unsignal{ fill: #2041ab; } + + } + + /* (6) Make around circles a bit transparent */ + &.around{ opacity: .6; } } - &:hover + .center + image + .below{ // below node + /* (7) Avoid icons inside center circles to block :hover */ + image{ - -webkit-transform: translateY(100%); - transform: translateY(100%); + -webkit-pointer-events: none; + pointer-events: none; } + } + + /* (8) Timeline infobox */ + div.timeline.infobox{ + display: none; + position: absolute; + top: 80px; + left: 0; + width: auto; + height: auto; + + padding: .5em 1em; + + border: 1px solid #b1b6c0; + border-radius: 3px; + + background: #d8deea; + color: #444; + + &.active{ + display: block; + } } - /* (4) Remove center circle event */ - &.center{ - -webkit-pointer-events: none; - pointer-events: none; - } - - /* (5) Set colors according to action type */ - &.around, &.center, &.below{ - - &.start{ fill: #2cde8b; } - &.stop{ fill: #3a3a3a; } - &.lock{ fill: #e04343; } - &.unlock{ fill: #af1c1c; } - &.signal{ fill: #3258d8; } - &.unsignal{ fill: #2041ab; } - - } - - /* (6) Make around circles a bit transparent */ - &.around{ opacity: .6; } } - /* (7) Avoid icons inside center circles to block :hover */ - image{ - - -webkit-pointer-events: none; - pointer-events: none; - - } } \ No newline at end of file diff --git a/public_html/css/layout.scss b/public_html/css/layout.scss index 964683f..5dbb911 100755 --- a/public_html/css/layout.scss +++ b/public_html/css/layout.scss @@ -68,7 +68,7 @@ flex-direction: row; justify-content: space-between; - overflow-x: none; + overflow: hidden; overflow-y: auto; } diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index 1433090..049abbf 100644 --- a/public_html/css/min/container.css +++ b/public_html/css/min/container.css @@ -10,6 +10,10 @@ /* [2] INLINE-BOX pour afficher les listes de donnees =========================================================*/ /* [2-2] INLINE-ROW pour afficher des lignes + =========================================================*/ + /* [4] Tableau à cocher + =========================================================*/ + /* [5] Timeline SVG =========================================================*/ } #WRAPPER > #CONTAINER > section { display: none; @@ -539,93 +543,108 @@ #WRAPPER > #CONTAINER > section > .inline-row button { flex: auto; width: 5em; } - -/* [4] Tableau à cocher -=========================================================*/ -article.check-table { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - border-radius: 3px; - border: 1px solid #ddd; } - article.check-table > div { + #WRAPPER > #CONTAINER article.check-table { display: flex; flex-direction: row; - flex-wrap: nowrap; + flex-wrap: wrap; justify-content: space-between; - flex: 100%; - padding: .8em 0; - color: #333; - background: #f8f8f8; - border-bottom: 1px solid #eee; - transition: background .2s ease-in-out; - overflow: hidden; } - article.check-table > div:nth-child(2n) { - background: #fdfdfd; } - article.check-table > div > span { - flex: 100%; + border-radius: 3px; + border: 1px solid #ddd; } + #WRAPPER > #CONTAINER article.check-table > div { display: flex; flex-direction: row; flex-wrap: nowrap; - justify-content: center; - /* (1) Gestion du checkbox hack */ } - article.check-table > div > span input[type='checkbox'] { - display: none; } - article.check-table > div > span input[type='checkbox'] + label[for] { - display: inline-block; - position: absolute; - width: 1.2em; - height: 1.2em; - background: url("/src/static/container/checkbox@999999.svg") center center no-repeat; - background-size: 100% auto; - transition: box-shadow .2s ease-in-out; - cursor: pointer; } - article.check-table > div > span input[type='checkbox']:checked + label[for] { - background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); } - -/* [4] Timeline SVG -=========================================================*/ -svg.timeline { - /* (1) svg circles -> set right transform-origin */ - /* (7) Avoid icons inside center circles to block :hover */ } - svg.timeline circle.timeline { - -webkit-transform-origin: 50% 50% 0; - transform-origin: 50% 50% 0; - transition: transform .2s ease-in-out; - /* (2) Set cursor to pointer */ - /* (4) Remove center circle event */ - /* (5) Set colors according to action type */ - /* (6) Make around circles a bit transparent */ } - svg.timeline circle.timeline.around { - cursor: pointer; - /* (3) Dispatch event to next nodes */ } - svg.timeline circle.timeline.around:hover + .center { - -webkit-transform: scale(1.2); - transform: scale(1.2); } - svg.timeline circle.timeline.around:hover + .center + image + .below { - -webkit-transform: translateY(100%); - transform: translateY(100%); } - svg.timeline circle.timeline.center { - -webkit-pointer-events: none; - pointer-events: none; } - svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start, svg.timeline circle.timeline.below.start { - fill: #2cde8b; } - svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop, svg.timeline circle.timeline.below.stop { - fill: #3a3a3a; } - svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock, svg.timeline circle.timeline.below.lock { - fill: #e04343; } - svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock, svg.timeline circle.timeline.below.unlock { - fill: #af1c1c; } - svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal, svg.timeline circle.timeline.below.signal { - fill: #3258d8; } - svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal, svg.timeline circle.timeline.below.unsignal { - fill: #2041ab; } - svg.timeline circle.timeline.around { - opacity: .6; } - svg.timeline image { - -webkit-pointer-events: none; - pointer-events: none; } + justify-content: space-between; + flex: 100%; + padding: .8em 0; + color: #333; + background: #f8f8f8; + border-bottom: 1px solid #eee; + transition: background .2s ease-in-out; + overflow: hidden; } + #WRAPPER > #CONTAINER article.check-table > div:nth-child(2n) { + background: #fdfdfd; } + #WRAPPER > #CONTAINER article.check-table > div > span { + flex: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + /* (1) Gestion du checkbox hack */ } + #WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] { + display: none; } + #WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox'] + label[for] { + display: inline-block; + position: absolute; + width: 1.2em; + height: 1.2em; + background: url("/src/static/container/checkbox@999999.svg") center center no-repeat; + background-size: 100% auto; + transition: box-shadow .2s ease-in-out; + cursor: pointer; } + #WRAPPER > #CONTAINER article.check-table > div > span input[type='checkbox']:checked + label[for] { + background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); } + #WRAPPER > #CONTAINER article.timeline.container { + display: block; + position: absolute; + width: calc( 100vw - 4em - 7.5em - 11em); + flex: 1em; + overflow: hidden; + /* (8) Timeline infobox */ } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline { + /* (1) svg circles -> set right transform-origin */ + /* (7) Avoid icons inside center circles to block :hover */ } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline { + -webkit-transform-origin: 50% 50% 0; + transform-origin: 50% 50% 0; + transition: transform .2s ease-in-out; + /* (2) Set cursor to pointer */ + /* (4) Remove center circle event */ + /* (5) Set colors according to action type */ + /* (6) Make around circles a bit transparent */ } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around { + cursor: pointer; + /* (3) Dispatch event to next nodes */ } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center { + -webkit-transform: scale(1.2); + transform: scale(1.2); } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around:hover + .center + image + .below { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center { + -webkit-pointer-events: none; + pointer-events: none; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.start, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.start, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.start { + fill: #2cde8b; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.stop, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.stop, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.stop { + fill: #3a3a3a; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.lock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.lock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.lock { + fill: #e04343; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.unlock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.unlock, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.unlock { + fill: #af1c1c; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.signal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.signal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.signal { + fill: #3258d8; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around.unsignal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.center.unsignal, #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.below.unsignal { + fill: #2041ab; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline circle.timeline.around { + opacity: .6; } + #WRAPPER > #CONTAINER article.timeline.container svg.timeline image { + -webkit-pointer-events: none; + pointer-events: none; } + #WRAPPER > #CONTAINER article.timeline.container div.timeline.infobox { + display: none; + position: absolute; + top: 80px; + left: 0; + width: auto; + height: auto; + padding: .5em 1em; + border: 1px solid #b1b6c0; + border-radius: 3px; + background: #d8deea; + color: #444; } + #WRAPPER > #CONTAINER article.timeline.container div.timeline.infobox.active { + display: block; } /*# sourceMappingURL= container.css.map */ \ No newline at end of file diff --git a/public_html/css/min/layout.css b/public_html/css/min/layout.css index 29dda22..a47f91d 100644 --- a/public_html/css/min/layout.css +++ b/public_html/css/min/layout.css @@ -51,7 +51,7 @@ padding: 1em; flex-direction: row; justify-content: space-between; - overflow-x: none; + overflow: hidden; overflow-y: auto; } #WRAPPER > #POPUP { display: none; diff --git a/public_html/css/submenu-side.scss b/public_html/css/submenu-side.scss index d06a790..b92d7f2 100755 --- a/public_html/css/submenu-side.scss +++ b/public_html/css/submenu-side.scss @@ -9,7 +9,7 @@ & > span[data-sublink]{ display: block; position: relative; - width: 7.5em; + width: $sub-menu-side-width; padding: .3em 1em .3em 2em; margin: 1em; diff --git a/public_html/js/lib/reset.js b/public_html/js/lib/reset.js index 5ba3fc3..db685a2 100755 --- a/public_html/js/lib/reset.js +++ b/public_html/js/lib/reset.js @@ -105,14 +105,6 @@ Element.prototype.anim = function(className, timeout){ }; -// RECUPERATION DE LA POSITION ABSOLUE D'UN ENFANT PAR RAPPORT A UN PARENT -Element.prototype.get_parent_abs = function(parent_node){ - -} - - - - /* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER * */ diff --git a/public_html/view/history.php b/public_html/view/history.php index 7618291..3a0331c 100755 --- a/public_html/view/history.php +++ b/public_html/view/history.php @@ -72,7 +72,7 @@ /* [3] Archive -> Archivage des logs =========================================================*/ - echo "
"; + echo "
"; $view = View::load('history.archive'); echo $view->render(); diff --git a/public_html/view/js/history.js b/public_html/view/js/history.js index dacc3d4..57101f8 100644 --- a/public_html/view/js/history.js +++ b/public_html/view/js/history.js @@ -165,26 +165,64 @@ if( section.details.element != null ){ /* (1) Get useful DOM Elements ---------------------------------------------------------*/ + /* (1) Get parent */ + section.details.parent = { + text: section.details.text+'article.timeline.container ', + element: document.querySelector( section.details.text+'article.timeline.container ' ) + }; + + /* (2) Get SVG tag */ + section.details.svg = { + text: section.details.parent.text+'svg.timeline ', + element: document.querySelector( section.details.parent.text+'svg.timeline ' ) + }; + + /* (3) Get each event node */ section.details.event = { - // svg parent - parent: { - text: section.details.text+' svg ', - element: document.querySelector( section.details.text+' svg ' ) - }, - - // each node - text: section.details.text+' svg circle.around ', - element: document.querySelectorAll( section.details.text+' svg circle.around ' ) + text: section.details.svg.text+'circle.around ', + list: document.querySelectorAll( section.details.svg.text+'circle.around ' ) }; - /* (2) Function: show infobox on click on event + /* (4) Get infobox node */ + section.details.info = { + text: section.details.parent.text+'div.timeline.infobox ', + element: document.querySelector( section.details.parent.text+'div.timeline.infobox ' ) + }; + + /* (5) Bind infobox sub-elements */ + section.details.info.input = { + + }; + + + + /* (2) Function: scroll-x on mouse hover ---------------------------------------------------------*/ + /* (1) Bind slider event */ + section.details.parent.element.addEventListener('mousemove', function(e){ + + var container = e.target.parentNode; + + console.log(e.clientX-container.offsetLeft, e.clientY-container.offsetTop); + + }, false); + + + + + + /* (3) Function: show infobox on click on event + ---------------------------------------------------------*/ + /* (1) Set click handler */ section.details.event.handler = function(target){ + + section.details.info.element.addClass('active'); console.log('show infobox on element', target); + }; - /* (n) Trigger event */ - section.details.event.parent.element.addEventListener('click', function(e){ + /* (2) Trigger event */ + section.details.svg.element.addEventListener('click', function(e){ // {1} Trigger function only if element is an 'around circle' // if( e.target.nodeName && e.target.getData('user') && e.target.getData('machine') && e.target.getData('action') && e.target.getData('time') )