Permalink
Browse files

Move inline JS outside of HTML. (#25140)

  • Loading branch information...
XhmikosR committed Dec 31, 2017
1 parent bf0e753 commit e0e9bc8b5894c31557bfe7bc013707c887190c6b
Showing with 44 additions and 50 deletions.
  1. +4 −33 _includes/scripts.html
  2. +31 −1 assets/js/src/application.js
  3. +9 −16 docs/4.0/examples/album/index.html
View
@@ -9,6 +9,10 @@
<script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
{%- endif -%}
{%- if page.layout == "docs" -%}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
{%- endif -%}
{%- if site.github -%}
<script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
{%- else -%}
@@ -19,36 +23,3 @@
<script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>
<script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
{%- endif -%}
{%- if page.layout == "docs" -%}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
indexName: 'bootstrap-v4',
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: url;
// If it's a title we remove the anchor so it does not jump.
window.location.href = url;
},
transformData: function (hits) {
return hits.map(function (hit) {
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
return hit;
});
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
{%- endif -%}
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
});
</script>
@@ -10,7 +10,7 @@
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
/* global Clipboard, anchors */
/* global Clipboard: false, anchors: false, Holder: false */
(function ($) {
'use strict'
@@ -101,5 +101,35 @@
}
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
$('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
// Search
if (window.docsearch) {
window.docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
indexName: 'bootstrap-v4',
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url
url = suggestion.isLvl1 ? url.split('#')[0] : url
// If it's a title we remove the anchor so it does not jump.
window.location.href = url
},
transformData: function (hits) {
return hits.map(function (hit) {
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0')
return hit
})
},
debug: false // Set debug to true if you want to inspect the dropdown
})
}
// Holder
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
})
}(jQuery))
@@ -65,41 +65,41 @@ <h1 class="jumbotron-heading">Album example</h1>
<div class="row">
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
<img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
@@ -127,12 +127,5 @@ <h1 class="jumbotron-heading">Album example</h1>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

0 comments on commit e0e9bc8

Please sign in to comment.