diff --git a/.gitignore b/.gitignore index 48de620..29829af 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,162 @@ -node_modules -nbproject -.idea +# Web header + public/css/main.min.css -public/fonts/* +public/fonts/fontawesome* +public/fonts/FontAwesome* !public/css/*.gitkeep !public/fonts/*.gitkeep -npm-debug.log + + +# Created by https://www.gitignore.io/api/git,node,linux,webstorm,netbeans + +### Git ### +*.orig + +### Linux ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +### NetBeans ### +nbproject +nbproject/private/ +build/ +nbbuild/ +dist/ +nbdist/ +.nb-gradle/ + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + +### WebStorm ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + +# User-specific stuff: +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/dictionaries + +# Sensitive or high-churn files: +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.xml +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml + +# Gradle: +.idea/**/gradle.xml +.idea/**/libraries + +# CMake +cmake-build-debug/ + +# Mongo Explorer plugin: +.idea/**/mongoSettings.xml + +## File-based project format: +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +### WebStorm Patch ### +# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 + +# *.iml +# modules.xml +# .idea/misc.xml +# *.ipr + +# Sonarlint plugin +.idea/sonarlint + +# End of https://www.gitignore.io/api/git,node,linux,webstorm,netbeans diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..3b36c7f --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml new file mode 100644 index 0000000..3b31283 --- /dev/null +++ b/.idea/inspectionProfiles/profiles_settings.xml @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..9f737c1 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/jsLinters/jshint.xml b/.idea/jsLinters/jshint.xml new file mode 100644 index 0000000..8f536f7 --- /dev/null +++ b/.idea/jsLinters/jshint.xml @@ -0,0 +1,85 @@ + + + + + \ No newline at end of file diff --git a/.idea/markdown-navigator.xml b/.idea/markdown-navigator.xml new file mode 100644 index 0000000..8ba1cb5 --- /dev/null +++ b/.idea/markdown-navigator.xml @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/markdown-navigator/profiles_settings.xml b/.idea/markdown-navigator/profiles_settings.xml new file mode 100644 index 0000000..57927c5 --- /dev/null +++ b/.idea/markdown-navigator/profiles_settings.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..a1e9f77 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..37f8d19 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/web-header.iml b/.idea/web-header.iml new file mode 100644 index 0000000..da6e1b0 --- /dev/null +++ b/.idea/web-header.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 85e75d7..9bf0860 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Istex web header +

Istex web header test page

- - + diff --git a/less/header.less b/less/header.less index 64c80bf..bdfe664 100644 --- a/less/header.less +++ b/less/header.less @@ -1,41 +1,82 @@ -#istex-web-header { margin: 0 auto; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #333; height: 40px; position: relative; z-index: 1000; padding-left: 150px; padding-right: 150px; background-color: white } +#istex__web-header { + position: relative; + z-index: 1000; + margin: 0 auto; + border-bottom: 1px solid @navbar-border-color; + padding: 0 10%; + background-color: white; + font-family: Arial, Helvetica, sans-serif; +} -#barresrent { border-bottom: 1px solid #eaeade; } - -//.bsbb, .srent li { box-sizing: border-box; } +img { + vertical-align: middle; +} .clear { clear: both } -.logoistex { position: absolute; margin: 3px 0 0 0; } +.logoistex { + position: absolute; + margin: 3px 0 0 0; +} -.logoistex img, .logoanr img { float: left } +nav { + & > .istex__navbar { + position: relative; + float: right; + margin: 9px 50px 0 0; + font-size: .8em; + list-style-type: none; -.srent { margin: 0 50px 0 0; padding: 10px 0 0 0; list-style-type: none; position: relative; background: transparent; float: right } + a { + display: block; + color: #000; + text-align: center; + text-decoration: none; -.srent img { padding: 0 7px 0 20px; } + &.disabled { + color: #777; + text-decoration: none; + cursor: not-allowed; + } -.srent li { float: left; position: relative; display: block; height: 30px; line-height: 30px; padding-right: 10px } + &:hover, + &:active { + text-decoration: underline; + } + & > img, + & > .fa { + margin-right: .33em; + } + & > .fa { + color: #458ca6; + text-decoration: none; + } + } -.srent a:link { text-decoration: none; height: 30px } + li { + height: 30px; + line-height: 30px; + } -.srent a:active, .srent a:visited, .srent a:hover { text-decoration: underline; } + & > li { + float: left; + position: relative; + margin-right: 10px; + } -.srent a:link, .srent a:active, .srent a:visited, .srent a:hover { color: black; display: block; text-align: center; font-size: 0.8em; } - -.srent li li { background-color: transparent; border-right: 1px solid #eaeade; border-bottom: 1px solid #eaeade; border-left: 1px solid #eaeade; padding-left: 10px; color: #fff } - -.srent li li, .srent li li a, .srent li li a:hover, .srent li li a:focus { display: block; width: 140px; } - -.srent li li a:link, .srent li li a:active, .srent li li a:visited, .srent li li a:hover, .srent li li a:focus { text-align: left; } - -.srent li li a:hover, .srent li li a:focus { text-align: left; display: block; width: 140px; height: 30px; } - -.srent ul { position: absolute; display: none; padding: 0; list-style-type: none; } - -.srent li ul a { float: left; } - -.srent li:hover ul, .srent li:focus ul { display: block; } - -.srent li li img { padding: 0 5px 0 3px; } - - + .istex__dropdown-menu { + position: absolute; + display: none; + border: 1px solid @navbar-border-color; + width: 140px; + list-style-type: none; + & > li { + padding: 0 10px; + } + & > li + li { border-top: 1px solid @navbar-border-color; } + } + .istex__dropdown:hover > .istex__dropdown-menu { + display: block; + } + } +} diff --git a/less/main.less b/less/main.less index 485683b..212e93d 100644 --- a/less/main.less +++ b/less/main.less @@ -1,49 +1,26 @@ +// Variables +@font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"; +@navbar-border-color: #eaeade; + .sandbox { + /*! Reset and normalize */ @import "reset.less"; + @import "../node_modules/bootstrap/less/normalize.less"; + + /*! Fonts */ @import "../node_modules/font-awesome/less/font-awesome.less"; + + /*! Scaffolding */ + & * { + box-sizing: border-box; + } + + & *:before, + & *:after { + box-sizing: border-box; + } + + /*! Web header */ @import "header.less"; - - @font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"; @fa-font-path: @font-path; - .srent .fa { - margin-right: .33em; - color: #458ca6; - } -} - -#istex-web-header { - background-color: white; - border-bottom: 1px solid #eaeade; - - .srentss { - background-color: #fff; - } - .srentss { - border: 1px solid #eaeade; - & > li { border: 0; } - & > li + li { border-top: 1px solid #eaeade; } - } - .srent { - margin-top: 9px; - padding: 0; - - &.border { - margin-top: 8px; - border: 1px solid #eaeade; - border-bottom: 0; - } - - img { - vertical-align: middle; - } - } - a.disabled { - color: #777; - text-decoration: none; - cursor: not-allowed; - } -} - -#dokuwiki__site { - position: relative; } diff --git a/lib/scripts/lessRender.js b/lib/scripts/lessRender.js index adc33b4..225b310 100644 --- a/lib/scripts/lessRender.js +++ b/lib/scripts/lessRender.js @@ -8,7 +8,7 @@ LessPluginCleanCSS = require('less-plugin-clean-css'), fs = require('fs-extra'), cleanCSSPlugin = new LessPluginCleanCSS({advanced: true, 'clean-css': '-s0', 'keepSpecialComments': 0}), - keepBreaksCSSPlugin = new LessPluginCleanCSS({advanced: true, 'keepBreaks': true}) + keepBreaksCSSPlugin = new LessPluginCleanCSS({advanced: true, 'keepBreaks': true, 'keepSpecialComments': 0}) ; const @@ -21,7 +21,7 @@ function render (doMinify, callback) { callback = arguments[arguments.length - 1]; const options = { - globalVars: {'font-path': `"${FONTS_CDN_URL}"`}, + modifyVars: {'font-path': `"${FONTS_CDN_URL}"`}, filename : MAIN_LESS_PATH, plugins : [] }; @@ -44,7 +44,7 @@ output.css, function(err) { if (err) return callback(err); - console.info('Fichier less/main.less compilé et minifié dans public/css/main.min.css'); + console.info(`Fichier ${MAIN_LESS_PATH} compilé dans ${PUBLIC_CSS_PATH}`); return callback(); }); }); diff --git a/main.js b/main.js index 5b1c0dd..c5a3970 100644 --- a/main.js +++ b/main.js @@ -13,52 +13,58 @@ loadJqueryAndInvokeInit(); } + function init ($) { // Mode de debug local if ((window.localStorage && window.localStorage.getItem('web_header_local')) - || (window.location.search && window.location.search.match(/web_header_local(=true)?(&|$)/)) - || window.location.hostname.match(/localhost|127\.0\.0\.1/) - ) { + || (window.location.search && window.location.search.match(/web_header_local(=true)?(&|$)/)) + || window.location.hostname.match(/localhost|127\.0\.0\.1/) + ) { ressourcesUrl = window.location.hostname.match(/localhost|127\.0\.0\.1/) - && window.location.origin - || LOCAL_DELIVERY_URL - ; + && window.location.origin + || LOCAL_DELIVERY_URL + ; console.info('Istex web-header: local mode set on ' + ressourcesUrl); } + var prependToTarget = $('script[data-header-target]').data('headerTarget') || 'body'; + $.ajax({ - url: ressourcesUrl + '/public/css/main.min.css', - success: function(data) { + url : ressourcesUrl + '/public/css/main.min.css', + success: function(data) { - $('head').append(''); + $('head').append(''); - $.ajax({ - url: ressourcesUrl + '/public/views/header.view.html', - success: function(_data) { - var prependToTarget = - window.location.hostname === 'article-type.lod.istex.fr' ? '.navbar.navbar-inverse.navbar-fixed-top' : 'body'; + $.ajax({ + url : ressourcesUrl + '/public/views/header.view.html', + success: function(_data) { + prependToTarget = + window.location.hostname === 'article-type.lod.istex.fr' + ? '.navbar.navbar-inverse.navbar-fixed-top' + : prependToTarget + ; - var $webHeader = - $(jQuery.parseHTML(_data)) - .filter('#istex-web-header') - .find('img').each(rebaseImgUrl).end() - .prependTo($(prependToTarget)) - .wrap('
') - .find('[href*="#"]').click(preventDefaultEvent).end() - .find('[href*="' + window.location.hostname + '"]').addClass('disabled').click( - preventDefaultEvent).end() - ; + var $webHeader = + $(jQuery.parseHTML(_data)) + .filter('#istex__web-header') + .find('img').each(rebaseImgUrl).end() + .prependTo($(prependToTarget)) + .wrap('
') + .find('[href*="#"]').click(preventDefaultEvent).end() + .find('[href*="' + window.location.hostname + '"]').addClass('disabled').click( + preventDefaultEvent).end() + ; - window.location.hostname === 'www.istex.fr' && $webHeader.find('.logoistex').remove(); - }, - error: function(jqXHR, textStatus, errorThrown) { - console.error(textStatus, errorThrown); - } + window.location.hostname === 'www.istex.fr' && $webHeader.find('.logoistex').remove(); + }, + error : function(jqXHR, textStatus, errorThrown) { + console.error(textStatus, errorThrown); + } - }); - } - }); + }); + } + }); function rebaseImgUrl () { $(this).attr('src', function(index, attr) { @@ -70,8 +76,8 @@ function loadJqueryAndInvokeInit () { - var script = document.createElement('script'); - script.src = JQUERY_CDN_URL; + var script = document.createElement('script'); + script.src = JQUERY_CDN_URL; script.onload = function() { init(window.jQuery.noConflict()); document.head.removeChild(script); diff --git a/package.json b/package.json index fef9177..76156a9 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,12 @@ "main": "main.js", "scripts": { "postinstall": "node ./lib/npm/postInstall.js", - "static": "./node_modules/node-static/bin/cli.js", - "less-watcher":"node ./lib/scripts/watch.js" + "static": "./node_modules/node-static/bin/cli.js -H '{\"Access-Control-Allow-Origin\":\"*\"}'", + "less-watcher": "node ./lib/scripts/watch.js" }, "dependencies": { "async": "^2.4.0", + "bootstrap": "^3.3.7", "chokidar": "^1.7.0", "font-awesome": "^4.7.0", "fs-extra": "^3.0.0", diff --git a/public/views/header.view.html b/public/views/header.view.html index 7b646d2..083c02c 100644 --- a/public/views/header.view.html +++ b/public/views/header.view.html @@ -1,44 +1,55 @@ -