<div class="detail-preview" data-id=undefined>
<div class="detail-preview__preview">
<div class="detail-preview__parameter-list">
<fieldset class="style-select detail-preview__style-select ">
<legend class="style-select__legend-label text-small">style</legend>
<div class="style-select__inner">
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="bold" value="bold" data-font=""><label class="style-select__label" for="bold">Bold</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="italic" value="italic" data-font=""><label class="style-select__label" for="italic">Italic</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="normal" value="normal" checked="checked" data-font=""><label class="style-select__label" for="normal">Normal</label></div>
</div>
</fieldset>
<div class="size-slider detail-preview__size-slider " data-min="0" data-max="140" data-initial="30">
<label class="size-slider__label text-small" for="size-slider">
size
</label>
<div class="size-slider__inner">
<div>
0 pt
</div>
<div class="size-slider__slider"></div>
<div>
140 pt
</div>
<input id="size-slider" type="number" name="detail-parameters" class="size-slider__input-value" value="30">
</div>
</div>
</div>
<div class="detail-demo detail-preview__demo " data-initial="30">
<div class="detail-demo__line-wrapper">
<div class="detail-demo__text" contentEditable="true"></div>
<div class="detail-demo__single-line">
Väike mölder hüppas üle rongi
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky detail-preview__about">
<div class="content-section__title text-button">wesenber</div>
<div class="content-section__content">
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">author</div>
<div class="detail-preview__info-body">Marge Maasikas</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">styles</div>
<div class="detail-preview__info-body">Bold / Italic / Normal</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">year</div>
<div class="detail-preview__info-body">2011</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">times downloaded</div>
<div class="detail-preview__info-body">12</div>
</div>
</div>
</div>
</div>
{% set aboutContent %}
{% if data.downloadLink %}
{% include '@download-button' with {class: "detail-preview__download-button", data: {link: data.downloadLink}} %}
{% endif %}
{% for info in data.aboutInfo %}
<div class="detail-preview__info">
{% if info.heading %}
<div class="detail-preview__info-heading text-small">{{ info.heading }}</div>
<div class="detail-preview__info-body">{{ info.body }}</div>
{% endif %}
</div>
{% endfor %}
{% endset %}
{% set id %}
{% if data.id %}
{{ data.id }}
{% else %}
undefined
{% endif %}
{% endset %}
<div class="detail-preview" data-id={{ id }}>
<div class="detail-preview__preview">
<div class="detail-preview__parameter-list">
{% if data.styleSelect %}
{% include '@style-select' with {class: "detail-preview__style-select", data: data.styleSelect} %}
{% endif %}
{% if data.sizeSlider %}
{% include '@size-slider' with {class: "detail-preview__size-slider", data: data.sizeSlider} %}
{% endif %}
</div>
{% include '@detail-demo' with {class: "detail-preview__demo", data: data.detailDemo} %}
</div>
{% include '@content-section' with {class: "detail-preview__about", modifier: "content-section--sticky", data: {title: data.aboutTitle, content: aboutContent}} %}
</div>
{
"language": "en-US",
"data": {
"aboutTitle": "wesenber",
"styleSelect": {
"label": "style",
"items": [
{
"id": "bold",
"name": "style",
"value": "bold",
"label": "Bold",
"rule": "font-weight",
"style": "bold"
},
{
"id": "italic",
"name": "style",
"value": "italic",
"label": "Italic",
"rule": "font-style",
"style": "italic"
},
{
"id": "normal",
"name": "style",
"value": "normal",
"label": "Normal",
"rule": "font-style",
"style": "normal",
"isSelected": true
}
]
},
"sizeSlider": {
"id": "size-slider",
"name": "detail-parameters",
"label": "size",
"rangeUnit": "pt",
"rangeMin": 0,
"rangeMax": 140,
"rangeInitial": 30
},
"detailDemo": {
"placeholder": "Väike mölder hüppas üle rongi",
"initialSize": 30,
"lineHeight": "normal"
},
"aboutInfo": [
{
"heading": "author",
"body": "Marge Maasikas"
},
{
"heading": "styles",
"body": "Bold / Italic / Normal"
},
{
"heading": "year",
"body": "2011"
},
{
"heading": "times downloaded",
"body": "12"
}
],
"fontPath": "",
"fonts": [
{
"label": "",
"font": ""
}
]
}
}
.detail-preview {
display: flex;
flex-direction: column;
min-height: 278px;
@include bp(md-min) {
min-height: 460px;
flex-direction: row;
}
}
.detail-preview__preview {
display: flex;
flex-direction: column;
flex-grow: 1;
border-top: 1px solid var(--color-brand);
min-height: 267px;
transition: $transition-duration $transition-easing;
transition-property: border-bottom-color, box-shadow;
@include bp(md-min) {
display: inline-flex;
min-height: 0;
box-shadow: -1px 0 0 0 var(--color-brand) inset;
@include gridcol(max-width, 19, $grid-cols-md);
@include gridcol(flex-basis, 19, $grid-cols-md);
}
}
.detail-preview__about {
flex-shrink: 0;
@include bp(md-min) {
display: inline-block;
@include gridcol(max-width, 5, $grid-cols-md);
@include gridcol(flex-basis, 5, $grid-cols-md);
}
}
.detail-preview__demo {
flex-grow: 1;
}
.detail-preview__parameter-list {
display: flex;
padding: 8px 16px;
@include bp(sm-min) {
padding: 32px;
}
}
.detail-preview__info {
& + & {
padding-top: 16px;
@include bp(sm-min) {
padding-top: 36px;
}
}
}
.detail-preview__info-heading {
text-transform: uppercase;
opacity: .6;
}
.content-section__content {
.detail-preview__about > & {
position: relative;
padding: 24px 60px 40px 16px;
@include bp(sm-min) {
padding: 36px 32px 64px;
}
}
}
.detail-preview__style-select {
padding-right: 24px;
}
import './detail-preview.scss';
import Component from '@component';
import ClickEvent = JQuery.ClickEvent;
import Helpers from '@helpers';
import Ajax, {IAjaxPostParams} from '@ajax';
interface IDetailPreviewSettings {
sliderClass: string;
styleSelectClass: string;
demoClass: string;
downloadButtonClass: string;
id: string;
}
export default class DetailPreview extends Component {
static initSelector: string = '.detail-preview';
settings: IDetailPreviewSettings;
slider: JQuery;
select: JQuery;
demo: JQuery;
download: JQuery;
selectedRule: string;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
demoClass: 'detail-preview__demo',
downloadButtonClass: 'detail-preview__download-button',
id: 'undefined',
sliderClass: 'detail-preview__size-slider',
styleSelectClass: 'detail-preview__style-select',
}, this.element.data());
this.slider = this.element.find('.' + this.settings.sliderClass + ' input');
this.select = this.element.find('.' + this.settings.styleSelectClass + ' input');
this.demo = this.element.find('.' + this.settings.demoClass);
this.download = this.element.find('.' + this.settings.downloadButtonClass);
this.init();
}
init(): void {
this.slider.on('input', this.changeHandler.bind(this));
this.select.on('click', this.styleClickHandler.bind(this));
this.download.on('click', this.downloadHandler.bind(this));
this.select.first().trigger('click');
}
downloadHandler(): void {
const formData: IAjaxPostParams = {
action: 'download',
fontID: this.settings.id,
};
Ajax.post(formData);
}
styleClickHandler(event: ClickEvent): void {
const fontPath: string = $(event.target).data('font');
const fontId: string = $(event.target)[0].id;
this.demo.css('font-family', Helpers.addFontFace(fontPath, fontId));
}
changeHandler(): void {
const value: string = this.slider.val() + 'px';
this.demo.css('font-size', value);
}
}