Skip to content

Netlify deploy #1

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

Open
ChristopherJennings wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Netlify deploy #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
391ff27
Add screenshot
ChristopherJennings Feb 12, 2020
2e5efae
Update script reference
ChristopherJennings Feb 12, 2020
495a43e
Update Readme to add deploy info
ChristopherJennings Feb 12, 2020
ec29207
Rename for easily deploy referencing
ChristopherJennings Feb 12, 2020
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
39 changes: 27 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,38 @@
# kc_inputs
# Toggle Switch Custom Element for Kentico Kontent

This KC custom element is jsut a simple switch -> on/off
This is a [custom element](https://docs.kontent.ai/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features) for [Kentico Kontent](https://kontent.ai) that allows you to toggle a switch on or off.

You can test it by configuring https://amend.cz/inputs/switch.html url for your custom element.
![screenshot](ToggleSwitch.png)

![screenshot](https://amend.cz/inputs/switch.png)
## Setup

You can specify the Parameters {JSON} part of the configuration to configure the default state or a lable.
Possible configurations:
1. Deploy the code to a secure public host
* See [deploying section](#Deploying) for a really quick option
1. Follow the instructions in the [Kentico Kontent documentation](https://docs.kontent.ai/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features#a-3--displaying-a-custom-element-in-kentico-kontent) to add the element to a content model.
* The `Hosted code URL` is where you deployed to in step 1
* Pass any desired optional parameters as directing in the [JSON Parameters configuration](#json-parameters) section of this readme.

(empty)
## Deploying

{ "default": true }
Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your GitHub account as well.

{
"label": "Confirmed"
}
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hzik/kc_inputs)

## JSON Parameters

You are not required to specify any parameters to use this custom element. If desired, you can configure the default state or a label for the toggle.

`default` is an optional boolean value indicating the default state of the toggle on first load.

`label' is an optional string value used as the label to the right of the toggle to provide additional context to an editor.

```Json
{
"default": true,
"label": "Accepted"
"label": "Featured"
}
```

## Saved Value

The value is saved as a string of true or false representing the switch's state.
Binary file added ToggleSwitch.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
332 changes: 166 additions & 166 deletions switch.html → index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,166 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Switch</title>
<!-- Include jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<!-- Include the Custom Elements API-->
<script src="https://app.kenticocloud.com/js-api/custom-element.js"></script>
<!-- Custom element CSS styles -->
<style>
/* We recommended you always set margin to zero to avoid problems when displaying the element in UI */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body {
margin: 0;
padding: 10px;
}
.switch-wrapper{
display:flex;
align-items:center;
}
.switch{
position:relative;
display:inline-block;
width:40px;
height:16px;
margin:4px 4px 4px 6px;
vertical-align:middle;
cursor:pointer;
background:#e0e0e0;
border-radius:8px;
}
.switch,.switch:before{
transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
}
.switch:before{
position:absolute;
top:-4px;
left:-4px;
width:24px;
height:24px;
background:#fff;
border-radius:50%;
content:"";
box-shadow:0 1px 3px 1px rgba(0, 0, 0, .2);
}
input:checked+.switch{
background:rgba(33, 150, 243, .5);
}
input:checked+.switch:before{
left:20px;
background:#2196f3;
}
input:disabled+.switch{
cursor:not-allowed;
background:#e0e0e0;
}
input:disabled+.switch:before{
background:#eee;
}
input:checked:disabled+.switch{
cursor:not-allowed;
background:rgba(33, 150, 243, .25);
}
input:checked:disabled+.switch:before{
background:#90caf9;
}
.switch__label{
margin-left:4px;
color:#9e9e9e;
white-space:nowrap;
transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
}
input:checked~.switch__label{
color:#2196f3;
}
.disabled_overlay {
position: fixed;
background-color: #777;
z-index: 10;
cursor: not-allowed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
</style>
</head>
<body>
<div class="disabled_overlay"></div>
<div class="switch-wrapper">
<input id="switchId" type="checkbox" checked="" hidden="" value="on">
<label class="switch" for="switchId"></label>
<span id="switchLabel" class="switch__label"></span>
</div>
<!-- Custom logic of the Custom element -->
<script>
var isDisabled = false;
function updateDisabled(disabled) {
isDisabled = disabled;
if (disabled) {
$('.disabled_overlay').show();
}
else {
$('.disabled_overlay').hide();
}
}
function setup(value,checked,label) {
if (!value && checked) {
$("#switchId").prop("checked", true);
CustomElement.setValue("true");
}
else {
$("#switchId").prop("checked", (value=="true"));
}
$("#switchLabel").text(label);
$("#switchId").change(function() {
CustomElement.setValue($(this).is(":checked").toString());
});
}
function updateSize() {
// Update the Custom element height in the Kentico Cloud UI
const height = $("html").height();
CustomElement.setHeight(height);
}
function initCustomElement() {
try {
CustomElement.init((element, _context) => {
var value = (element.config?element.config.default:false);
var label = (element.config?element.config.label:"");
// Setup with initial value and disabled state
setup(element.value, value, label);
updateDisabled(element.disabled);
updateSize();
});
// React when the disabled state changes (e.g. when publishing the item)
CustomElement.onDisabledChanged(updateDisabled);
} catch (err) {
// Initialization with the Custom elements API failed
// (page displayed outside of the Kentico Cloud UI)
console.error(err);
updateDisabled(true);
}
}
initCustomElement();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Switch</title>
<!-- Include jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<!-- Include the Custom Elements API-->
<script src="https://app.kontent.ai/js-api/custom-element/v1/custom-element.min.js"></script>

<!-- Custom element CSS styles -->
<style>
/* We recommended you always set margin to zero to avoid problems when displaying the element in UI */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body {
margin: 0;
padding: 10px;
}
.switch-wrapper{
display:flex;
align-items:center;
}
.switch{
position:relative;
display:inline-block;
width:40px;
height:16px;
margin:4px 4px 4px 6px;
vertical-align:middle;
cursor:pointer;
background:#e0e0e0;
border-radius:8px;
}
.switch,.switch:before{
transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
}
.switch:before{
position:absolute;
top:-4px;
left:-4px;
width:24px;
height:24px;
background:#fff;
border-radius:50%;
content:"";
box-shadow:0 1px 3px 1px rgba(0, 0, 0, .2);
}
input:checked+.switch{
background:rgba(33, 150, 243, .5);
}
input:checked+.switch:before{
left:20px;
background:#2196f3;
}
input:disabled+.switch{
cursor:not-allowed;
background:#e0e0e0;
}
input:disabled+.switch:before{
background:#eee;
}
input:checked:disabled+.switch{
cursor:not-allowed;
background:rgba(33, 150, 243, .25);
}
input:checked:disabled+.switch:before{
background:#90caf9;
}
.switch__label{
margin-left:4px;
color:#9e9e9e;
white-space:nowrap;
transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
}
input:checked~.switch__label{
color:#2196f3;
}

.disabled_overlay {
position: fixed;
background-color: #777;
z-index: 10;
cursor: not-allowed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
</style>
</head>
<body>
<div class="disabled_overlay"></div>
<div class="switch-wrapper">
<input id="switchId" type="checkbox" checked="" hidden="" value="on">
<label class="switch" for="switchId"></label>
<span id="switchLabel" class="switch__label"></span>
</div>

<!-- Custom logic of the Custom element -->
<script>
var isDisabled = false;

function updateDisabled(disabled) {
isDisabled = disabled;
if (disabled) {
$('.disabled_overlay').show();
}
else {
$('.disabled_overlay').hide();
}
}

function setup(value,checked,label) {
if (!value && checked) {
$("#switchId").prop("checked", true);
CustomElement.setValue("true");
}
else {
$("#switchId").prop("checked", (value=="true"));
}

$("#switchLabel").text(label);

$("#switchId").change(function() {
CustomElement.setValue($(this).is(":checked").toString());
});
}

function updateSize() {
// Update the Custom element height in the Kentico Cloud UI
const height = $("html").height();
CustomElement.setHeight(height);
}

function initCustomElement() {
try {
CustomElement.init((element, _context) => {
var value = (element.config?element.config.default:false);
var label = (element.config?element.config.label:"");
// Setup with initial value and disabled state
setup(element.value, value, label);
updateDisabled(element.disabled);
updateSize();
});
// React when the disabled state changes (e.g. when publishing the item)
CustomElement.onDisabledChanged(updateDisabled);
} catch (err) {
// Initialization with the Custom elements API failed
// (page displayed outside of the Kentico Cloud UI)
console.error(err);
updateDisabled(true);
}
}

initCustomElement();

</script>
</body>
</html>