Merge branch '530-js-only-class' into 'development'

Added js-only class, that only shows its element when js is activated

Closes #530

See merge request !957

.gitignore

@@ -16,4 +16,6 @@ langfiles.zip
 /public/js/scriptResultPage.js
 /public/css/beitritt.css
 /public/css/themes/default.css
+/public/css/utility.css
+/public/js/utility.js
 **/*.map

gulpfile.js

@@ -22,13 +22,24 @@ elixir(function (mix) {
    | scriptStartPage.js
    | settings.js
   */
-  mix.scripts(['lib/jquery.js', 'lib/jquery-ui.min.js', 'lib/bootstrap.js', 'lib/lightslider.js', 'lib/masonry.js', 'lib/imagesloaded.js', 'lib/openpgp.min.js', 'lib/iframeResizer.min.js', 'lib/md5.js'], 'public/js/lib.js')
-  mix.scripts(['lib/jquery.js', 'lib/iframeResizer.contentWindow.min.js'], 'public/js/quicktips.js')
+  // lib
+  mix.scripts(['lib/jquery.js', 'lib/jquery-ui.min.js', 'lib/bootstrap.js', 'lib/lightslider.js', 'lib/masonry.js', 'lib/imagesloaded.js', 'lib/openpgp.min.js', 'lib/iframeResizer.min.js', 'lib/md5.js'], 'public/js/lib.js');
+  // quicktips
+  mix.scripts(['lib/jquery.js', 'lib/iframeResizer.contentWindow.min.js'], 'public/js/quicktips.js');
+  // start page
   mix.scripts(['scriptStartPage.js', 'results.js'], 'public/js/scriptStartPage.js');
+  // result page
   mix.scripts(['scriptResultPage.js', 'results.js'], 'public/js/scriptResultPage.js');
   mix.scripts(['scriptSubpages.js'], 'public/js/scriptSubpages.js');
+    // versioning
   mix.version(['css/themes/default.css', 'js/lib.js', 'js/quicktips.js']);
-  mix.less('metager/beitritt.less', 'public/css/beitritt.css')
-  mix.version(['css/beitritt.css'])
-  mix.version(['js/widgets.js', 'js/editLanguage.js', 'js/kontakt.js', 'js/scriptResultPage.js', 'js/scriptStartPage.js', 'js/settings.js'])
+  // utility
+  mix.scripts(['utility.js'], 'public/js/utility.js');
+  mix.less('utility.less', 'public/css/utility.css');
+  mix.version(['js/utility.js', 'css/utility.css']);
+  // beitritt
+  mix.less('metager/beitritt.less', 'public/css/beitritt.css');
+  mix.version(['css/beitritt.css']);
+  // general versioning
+  mix.version(['js/widgets.js', 'js/editLanguage.js', 'js/kontakt.js', 'js/scriptResultPage.js', 'js/scriptStartPage.js', 'js/settings.js']);
 })

resources/assets/js/scriptResultPage.js

 $(document).ready(function () {
-  activateJSOnlyContent();
   createCustomFocuses();
   var focus = $('#foki > li.active > a').attr('aria-controls');
   var custom = $('#foki > li.active').hasClass('custom-focus-tab-selector');
@@ -11,11 +10,6 @@ $(document).ready(function () {
   }
 });
 
-function activateJSOnlyContent () {
-  $('#searchplugin').removeClass('hide');
-  $('.options').removeClass('hide');
-}
-
 function tabs () {
   $('#foki > li.tab-selector > a').each(function () {
     if ($(this).attr('target') != '_blank') {
@@ -42,7 +36,6 @@ function tabs () {
 }
 
 function getDocumentReadyForUse (fokus, custom = false) {
-  activateJSOnlyContent();
   clickLog();
   popovers();
   if (fokus === 'bilder') imageLoader();

resources/assets/js/scriptStartPage.js

@@ -5,7 +5,6 @@ $(document).ready(function () {
   if (location.href.indexOf('#plugin-modal') > -1) {
     $('#plugin-modal').modal('show');
   }
-  $('#addFocusBtn').removeClass('hide');
   $('button').popover();
 
   loadLocalStorage();

resources/assets/js/utility.js

+$(document).ready(function () {
+  $('.js-only').removeClass('js-only');
+});

resources/assets/less/utility.less

+.js-only {
+  display: none !important;
+}
\ No newline at end of file

resources/views/index.blade.php

@@ -252,7 +252,7 @@
 			</div>
 		@endif
 		<div id="addFocusBtnDiv">
-			<button id="addFocusBtn" class="btn btn-default hide">
+			<button id="addFocusBtn" class="btn btn-default js-only">
 			<i class="fa fa-plus" aria-hidden="true"></i>
 			</button>
 		</div>
@@ -265,7 +265,7 @@
 		<fieldset>
 			<form id="searchForm" @if(Request::has('request') && Request::input('request') === "POST") method="POST" @elseif(Request::has('request') && Request::input('request') === "GET") method="GET" @else method="GET" @endif action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3") }}" accept-charset="UTF-8">
 				<div class="input-group">
-					<div class="input-group-addon">
+					<div class="input-group-addon js-only">
 						<button type="button" data-toggle="popover" data-html="true" data-container="body" title="{{ trans('index.design') }}" data-content='&lt;ul id="color-chooser" class="list-inline list-unstyled"&gt;
 							&lt;li &gt;&lt;a id="standard" data-rgba="255,194,107,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
 							&lt;li &gt;&lt;a id="standardHard" data-rgba="255,128,0,1" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
@@ -305,11 +305,11 @@
 			</form>
 		</fieldset>
 		<ul class="list-inline searchform-bonus">
-			<li id="plug"
 			@unless ($browser === 'Firefox' || $browser === 'Mozilla' || $browser === 'Chrome' || $browser === 'Opera' || $browser === 'IE' || $browser === 'Edge' || $browser === 'Safari' || $browser === 'Vivaldi')
-				class="hidden"
-			@endunless>
-			<a href="#" data-toggle="modal" data-target="#plugin-modal" class="btn btn-default mutelink" title="{{ trans('index.plugintitle') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a></li>
+			<li id="plug"	class="js-only">
+				<a href="#" data-toggle="modal" data-target="#plugin-modal" class="btn btn-default mutelink" title="{{ trans('index.plugintitle') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a>
+			</li>
+			@endunless
 			@if (LaravelLocalization::getCurrentLocale() == "de")
 			<li>
                 <a href="https://suma-ev.de/presse/Werbefreie-Suche-mit-MetaGer.html" target="_blank" class="btn btn-default mutelink">
@@ -319,6 +319,7 @@
             @endif
 		</ul>
 	<script src="{{ elixir('js/scriptStartPage.js') }}"></script>
+	<script type="text/javascript" src="{{ elixir('js/utility.js') }}"></script>
 @endsection
 
 @section('optionalContent')

resources/views/layouts/researchandtabs.blade.php

 @if( strpos(rtrim(Request::header('REFERER'), '/'), LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") )  === 0 && ( $browser === 'Firefox' || $browser === 'Mozilla' || $browser === 'Chrome' || $browser === 'IE' || $browser === 'Edge') )
-	<div id="searchplugin" class="alert alert-warning alert-dismissible hide" role="alert" style="">
+	<div id="searchplugin" class="alert alert-warning alert-dismissible js-only" role="alert" style="">
 		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 		{!! trans('researchandtabs.plugin.1', ['browser' => $browser]) !!}
 		<br />

resources/views/layouts/result.blade.php

@@ -16,7 +16,7 @@
 							{{ $result->anzeigeLink }}
 						</a>
 					</div>
-					<div class="options hide">
+					<div class="options js-only">
 						<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="auto bottom" data-container="body" data-html="true" data-title="<i class='fa fa-cog' aria-hidden='true'></i> Optionen">
 							@if(strlen($metager->getSite()) === 0)
 								<i class="fa fa-caret-down" aria-hidden="true"></i>

resources/views/layouts/resultPage.blade.php

@@ -16,6 +16,7 @@
 		<link type="text/css" rel="stylesheet" href="/css/lightslider.css" />
 		<link type="text/css" rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" />
 		<link id="theme" type="text/css" rel="stylesheet" href="/css/theme.css.php" />
+		<link type="text/css" rel="stylesheet" href="{{ elixir('css/utility.css') }}" />
 	</head>
 	<body id="resultBody">
 		@if( !isset($suspendheader) )
@@ -49,5 +50,6 @@
 		<img src="{{ action('ImageController@generateImage')}}?site={{ urlencode(url()->current()) }}" class="hidden" />
 		<script type="text/javascript" src="{{ elixir('js/lib.js') }}"></script>
 		<script type="text/javascript" src="{{ elixir('js/scriptResultPage.js') }}"></script>
+		<script type="text/javascript" src="{{ elixir('js/utility.js') }}"></script>
 	</body>
 </html>

resources/views/layouts/staticPages.blade.php

@@ -18,6 +18,7 @@
 		<link type="text/css" rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" />
 		<link type="text/css" rel="stylesheet" href="{{ elixir('css/themes/default.css') }}" />
 		<link id="theme" type="text/css" rel="stylesheet" href="/css/theme.css.php" />
+		<link type="text/css" rel="stylesheet" href="{{ elixir('css/utility.css') }}" />
 		@if (isset($css))
 			@if(is_array($css))
 				@foreach($css as $el)