Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Edit" button on code examples #35638

Closed
wants to merge 8 commits into from
Closed

"Edit" button on code examples #35638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2896920
feat: add Edit button to open snipets in StackBlitz
PuruVJ Jan 2, 2022
222ea19
Fix indentation on code examples in Stackblitz
PuruVJ Jan 2, 2022
74147f9
Update bootstrap script version in script.html
PuruVJ Jan 2, 2022
c73a6b4
Use JSdelivr for Stackblitz SDK
PuruVJ Jan 3, 2022
d919e4e
Add EOF
PuruVJ Jan 3, 2022
9e60101
Update example.html
XhmikosR Jan 3, 2022
ede9445
Update scripts.html
XhmikosR Jan 3, 2022
2bd92dc
Update application.js
XhmikosR Jan 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions site/assets/js/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@

/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/

/* global ClipboardJS: false, anchors: false, bootstrap: false */
/* global ClipboardJS: false, anchors: false, bootstrap: false, StackBlitzSDK: false */

(function () {
'use strict'
Expand Down Expand Up @@ -169,4 +169,42 @@
icon: '#'
}
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')

// Open in StackBlitz logic
/*
const project = {
files: {
"index.ts": code,
"index.html": html
},
title: "Dynamically Generated Project",
description: "Created with <3 by the StackBlitz SDK!",
template: "typescript",
tags: ["stackblitz", "sdk"],
dependencies: {
moment: "*" // * = latest version
}
};
// Method to open project in new window
window["openNewProject"] = () => {
sdk.openProject(project);
};
*/
document.querySelectorAll('.btn-edit')
.forEach(function (btn) {
var tooltipBtn = new bootstrap.Tooltip(btn)

btn.addEventListener('mouseleave', function () {
// Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away
tooltipBtn.hide()
})

btn.addEventListener('click', function (event) {
var htmlSnippet = event.target.parentNode.nextElementSibling.nextElementSibling.textContent

StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
})
})
})()
34 changes: 34 additions & 0 deletions site/assets/scss/_clipboard-js.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,37 @@
background-color: $primary;
}
}

.bd-edit {
position: relative;
display: none;
float: right;

+ .highlight {
margin-top: 0;
}

@include media-breakpoint-up(md) {
display: block;
}
}

.btn-edit {
position: absolute;
top: .65rem;
right: 3.65rem;
z-index: 10;
display: block;
padding: .25rem .5rem;
@include font-size(.65em);
color: $primary;
background-color: $white;
border: 1px solid;
@include border-radius();

&:hover,
&:focus {
color: $white;
background-color: $primary;
}
}
36 changes: 36 additions & 0 deletions site/layouts/partials/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,39 @@
{{- end }}

<script src="{{ $docsJs.Permalink | relURL }}"></script>


{{ printf .Site.Params.cdn.css | safeHTMLAttr }}

<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1.5.3/bundles/sdk.umd.min.js"></script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to load this in every page. Which probably means, you shouldn't add the logic in application.js.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which file do you suggest I add this logic?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would adding a script tag to the example.html partial and putting "open in stackblitz" logic there be fine?

<script>
StackBlitzSDK.openBootstrapSnippet = function(snippet) {

const project = {
files: {
"index.html": `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Example Code -->
${snippet.replace(/^/gm, ' ')}

<!-- End Example Code -->
<${'script'} src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></${'script'}>
</body>
</html>`
},
title: "Dynamically Generated Project",
description: "Created with <3 by the StackBlitz SDK!",
template: "polymer",
tags: ["stackblitz", "sdk"]
};

StackBlitzSDK.openProject(project);
}
</script>
3 changes: 3 additions & 0 deletions site/layouts/shortcodes/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
{{- end -}}

{{- if eq $show_markup true -}}
<div class="bd-edit">
<button type="button" class="btn-edit" title="Edit on StackBlitz">Edit</button>
</div>
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
Expand Down