Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
258 lines (232 sloc) 9.84 KB
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Those meta make the capture of handwriting inputs easier on mobile devices -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="true"/>
<title>Customize style</title>
<link rel="stylesheet" href="../examples.css">
<style>
.nav-style {
display: flex;
justify-content: baseline;
align-items: center;
flex-wrap: wrap;
padding: 12px;
}
.nav-style span {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.flex-item {
margin: 12px 12px 0 0;
}
#prompter-css {
width: 70%;
margin-left: 36px;
padding: 24px;
position: absolute;
bottom: 60px;
z-index: 30;
border-radius: 6px;
background: rgba(240, 240, 240, 0.9);
opacity: 1;
transition: opacity .2s ease-out;
}
#prompter-css.hide {
opacity: 0;
}
.hidden {
display: none;
}
myscript-math-web {
height: calc(100% - 64px);
}
.toggle-opt {
display: none;
}
.show {
color: #90A4AE;
cursor: pointer;
position: absolute;
right: 1vh;
top: 1vw;
}
@media only screen and (min-width: 320px) and (max-width: 820px){
#prompter-css {
position: fixed;
bottom: 12px;
}
.toggle-opt {
display: flex;
justify-content: center;
}
.nav-style {
overflow: hidden;
max-height: 0;
transition: max-height .2s ease-out;
}
}
</style>
<script src="../../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
<script type="module" src="../../../../node_modules/@polymer/paper-toggle-button/paper-toggle-button.js"></script>
<script type="module" src="../../../../node_modules/@polymer/paper-swatch-picker/paper-swatch-picker.js"></script>
<script type="module" src="../../../../node_modules/@polymer/paper-slider/paper-slider.js"></script>
<script type="module" src="../../../../node_modules/@polymer/iron-icon/iron-icon.js"></script>
<script type="module" src="../../../../node_modules/@polymer/iron-icons/iron-icons.js"></script>
<script type="module" src="../../../../myscript-math-web.js"></script>
<custom-style>
<style>
myscript-math-web {
--myscript-math-web-exports-color: #FF9917;
--myscript-math-web-background: url(https://farm6.staticflickr.com/5526/10976824044_aebaebdb12_z_d.jpg) no-repeat center center / cover;
--myscript-math-web-color: #ff7314;
--myscript-math-web-hover-color: #A44200;
--myscript-math-web-disabled-color: #FFD7BC;
--myscript-editor-line-pattern_-_background-image: repeating-linear-gradient(to bottom, #F5F6F7, #F5F6F7 1px, transparent 1px, transparent 72px);;
--myscript-math-web-line-pattern_-_background-size: none;
--myscript-math-web-error-background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNzYgMjc2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICAgIDxjaXJjbGUgY3g9IjEzOCIgY3k9IjEzOCIgcj0iMTI0IiBzdHJva2U9IiNCMzAwMDAiIHN0cm9rZS13aWR0aD0iMjgiIGZpbGw9Im5vbmUiLz4KICAgIDxsaW5lIHgxPSI0NSIgeTE9IjQ1IiB4Mj0iMjMxIiB5Mj0iMjMxIiBzdHJva2U9IiNCMzAwMDAiIHN0cm9rZS13aWR0aD0iMjIiLz4KPC9zdmc+Cg==);
--myscript-math-web-loader: {
background: url(http://myscript.com/wp-content/uploads/2014/01/math-logo.png) no-repeat center center / cover;
border: none;
border-radius: 0;
-webkit-animation: rotate-plan 2.4s infinite ease-in-out;
animation: rotate-plan 2.4s infinite ease-in-out;
};
}
</style>
</custom-style>
</head>
<body>
<div class="toggle-opt">
<iron-icon class="show" icon="icons:settings"></iron-icon>
</div>
<nav class="nav-style">
<paper-toggle-button class="flex-item" id="penstyleclasses" checked>Apply pen style classes (greenThickPen)
</paper-toggle-button>
<span class="flex-item">
<paper-toggle-button id="penenabled">Enable pen color/width</paper-toggle-button>
<span id="pensettings" class="hidden">
<paper-swatch-picker id="pencolor"></paper-swatch-picker>
<paper-slider id="penwidth" snaps min="1" max="5" value="2"></paper-slider>
</span>
</span>
<span>
<label for="theme" class="flex-item">Theme:</label>
<select id="theme" class="flex-item">
<option value="normal-white">Normal white theme</option>
<option value="thin-green">Thin green theme</option>
<option value="bold-red">Bold red theme</option>
</select>
</span>
</nav>
<!-- Please change applicationkey and hmackey below with those send by mail during your registration. You can re-access them by connecting to your dashboard at developer.myscript.com with your myscript account -->
<myscript-math-web scheme="https"
host="webdemoapi.myscript.com"
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
themewidth="2"
themecolor="#FFFFFF"
solvercolor="#A8A8A8"
touch-action="none"
theme='{".green": {"color": "#00FF00", "-myscript-pen-width": "3"}}'
penstyleclasses="green">
</myscript-math-web>
<div id="prompter-css">
<div id="prompter-css-text">
Theme or pen style applied will be written here (where component is myscript-math-web).
</div>
</div>
<script>
const themes = [{
name: 'normal-white',
color: '#FFFFFF',
resultColor: '#A8A8A8',
width: 2
}, {
name: 'thin-green',
color: '#00FF00',
resultColor: '#2E7D32',
width: 1
}, {
name: 'bold-red',
color: '#FF0000',
resultColor: '#B71C1C',
width: 3
}];
const component = document.querySelector('myscript-math-web');
const penSettings = document.querySelector('#pensettings');
const penColor = document.querySelector('#pencolor');
const penWidth = document.querySelector('#penwidth');
const penStyleClasses = document.querySelector('#penstyleclasses');
const prompterCss = document.getElementById('prompter-css');
const prompterText = document.getElementById('prompter-css-text');
function updatePrompter(values) {
if(prompterCss.classList.contains('hide')) {
prompterCss.classList.toggle('hide');
}
prompterText.innerText = '';
values.forEach(function (value) {
prompterText.innerText += `${value[0]} = ${JSON.stringify(value[1])} \n`;
});
}
document.querySelector('#theme').addEventListener('change', (event) => {
const selectedTheme = themes.find(theme => theme.name === event.target.value);
if (selectedTheme) {
component.themecolor = selectedTheme.color;
component.themewidth = selectedTheme.width;
component.solvercolor = selectedTheme.resultColor;
updatePrompter([['component.themecolor', selectedTheme.color], ['component.themewidth', selectedTheme.width], ['component.solvercolor', selectedTheme.resultColor]]);
}
});
document.querySelector('#penenabled').addEventListener('change', (event) => {
if (event.target.checked) {
penSettings.classList.remove('hidden');
component.pencolor = penColor.color;
component.penwidth = penWidth.value;
updatePrompter([['component.pencolor', penColor.color], ['component.penwidth', penWidth.value]]);
} else {
penSettings.classList.add('hidden');
component.pencolor = undefined;
component.penwidth = undefined;
updatePrompter([['component.pencolor', undefined], ['component.penwidth', undefined]]);
}
});
penColor.addEventListener('color-changed', (event) => {
component.pencolor = event.target.color;
updatePrompter([['component.pencolor', event.target.color]])
});
penWidth.addEventListener('change', (event) => {
component.penwidth = event.target.value;
updatePrompter([['component.pencolor', event.target.value]])
});
penStyleClasses.addEventListener('change', (event) => {
if (event.target.checked) {
component.penstyleclasses = 'green';
updatePrompter([['component.penstyleclasses ', 'green']]);
} else {
component.penstyleclasses = '';
updatePrompter([['component.penstyleclasses', '']]);
}
});
document.querySelector('.show').addEventListener('click', () => {
const content = document.querySelector('.nav-style');
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
window.addEventListener('load', () => {
setTimeout(() => {
prompterCss.classList.toggle('hide');
}, 1500);
});
</script>
</body>
</html>
You can’t perform that action at this time.