Skip to content

Instantly share code, notes, and snippets.

@bashmakoff

bashmakoff/index.html

Created January 11, 2018 22:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bashmakoff/08f1b50128e70616b73dab36c2645339 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bashmakoff/08f1b50128e70616b73dab36c2645339 to your computer and use it in GitHub Desktop.
Download ZIP
Текст Форматтер v1.0 // source http://jsbin.com/gacoduxufa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Текст Форматтер v1.0</title>
<script defer src="./main.js"></script>
</head>
<body>
<fieldset>
<legend>Текст Форматтер v1.0</legend>
<div>
<label>Колір:
<input type="color" id="colorPicker"/>
</label>
</div>
<div>
<label>Гарнітура:
<select id="fontFamilyPicker">
<optgroup label="Serif Fonts">
<option value="Georgia, serif">
Georgia, serif
</option>
<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">
Palatino Linotype
</option>
<option value="'Times New Roman', Times, serif">
Times New Roman
</option>
</optgroup>
<optgroup label="Sans-Serif Fonts">
<option value="Arial, Helvetica, sans-serif" selected>
Arial
</option>
<option value="'Arial Black', Gadget, sans-serif">
Arial Black
</option>
<option value="'Comic Sans MS', cursive, sans-serif">
Comic Sans MS
</option>
<option value="Impact, Charcoal, sans-serif">
Impact
</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">
Lucida Sans Unicode
</option>
<option value="Tahoma, Geneva, sans-serif">
Tahoma
</option>
<option value="'Trebuchet MS', Helvetica, sans-serif">
Trebuchet MS
</option>
<option value="Verdana, Geneva, sans-serif">
Verdana
</option>
</optgroup>
<optgroup label="Monospace Fonts">
<option value="'Courier New', Courier, monospace">
Courier New
</option>
<option value="'Lucida Console', Monaco, monospace">
Lucida Console
</option>
</optgroup>
</select>
</label>
</div>
<div>
<label>Розмір:
<select id="fontSizePicker">
<option value="10pt" selected>10 pt</option>
<option value="12pt">12 pt</option>
<option value="14pt">14 pt</option>
<option value="16pt">16 pt</option>
<option value="18pt">18 pt</option>
<option value="20pt">20 pt</option>
<option value="22pt">22 pt</option>
<option value="24pt">24 pt</option>
</select>
</label>
</div>
<textarea placeholder="введіть текст" id="userInput" cols="30" rows="10">
</textarea>
</fieldset>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var FORMATTER_CONTROLS = ['color', 'fontFamily', 'fontSize'];
// хелпер-функція
var getById = function getById(id) {
return document.getElementById(id);
};
var UserInputObject = (function () {
// ідентіфікатор елемента та інверсія залежностей у вигляді helpers об'єкту
function UserInputObject(id, helpers) {
_classCallCheck(this, UserInputObject);
this.elementStyle = helpers.getById(id).style;
}
// сеттер кольору
_createClass(UserInputObject, [{
key: 'color',
set: function set(value) {
this.elementStyle.color = value;
}
// сеттер кеглю
}, {
key: 'fontFamily',
set: function set(value) {
this.elementStyle.fontFamily = value;
}
// сеттер розміру шріфту
}, {
key: 'fontSize',
set: function set(value) {
this.elementStyle.fontSize = value;
}
}]);
return UserInputObject;
})();
var userInput = new UserInputObject('userInput', { getById: getById });
// додаємо обробку подій на кожен контрол-елемент форматтеру
FORMATTER_CONTROLS.forEach(function (styleKey) {
// додаткова перевірка на існування кожного контрол-елементу на сторінці
getById(styleKey + 'Picker') && getById(styleKey + 'Picker').addEventListener('change', function (_ref) {
var value = _ref.target.value;
return userInput[styleKey] = value;
});
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">const FORMATTER_CONTROLS = ['color', 'fontFamily', 'fontSize'];
// хелпер-функція
const getById = id => document.getElementById(id);
class UserInputObject {
// ідентіфікатор елемента та інверсія залежностей у вигляді helpers об'єкту
constructor(id, helpers) {
this.elementStyle = helpers.getById(id).style
}
// сеттер кольору
set color(value) {
this.elementStyle.color = value;
}
// сеттер кеглю
set fontFamily(value) {
this.elementStyle.fontFamily = value;
}
// сеттер розміру шріфту
set fontSize(value) {
this.elementStyle.fontSize = value;
}
}
const userInput = new UserInputObject('userInput', { getById });
// додаємо обробку подій на кожен контрол-елемент форматтеру
FORMATTER_CONTROLS.forEach((styleKey) => {
// додаткова перевірка на існування кожного контрол-елементу на сторінці
getById(styleKey + 'Picker') &&
getById(styleKey + 'Picker').addEventListener('change', ({ target: { value } }) => userInput[styleKey] = value)
});</script></body>
</html>
Raw
jsbin.gacoduxufa.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var FORMATTER_CONTROLS = ['color', 'fontFamily', 'fontSize'];
// хелпер-функція
var getById = function getById(id) {
return document.getElementById(id);
};
var UserInputObject = (function () {
// ідентіфікатор елемента та інверсія залежностей у вигляді helpers об'єкту
function UserInputObject(id, helpers) {
_classCallCheck(this, UserInputObject);
this.elementStyle = helpers.getById(id).style;
}
// сеттер кольору
_createClass(UserInputObject, [{
key: 'color',
set: function set(value) {
this.elementStyle.color = value;
}
// сеттер кеглю
}, {
key: 'fontFamily',
set: function set(value) {
this.elementStyle.fontFamily = value;
}
// сеттер розміру шріфту
}, {
key: 'fontSize',
set: function set(value) {
this.elementStyle.fontSize = value;
}
}]);
return UserInputObject;
})();
var userInput = new UserInputObject('userInput', { getById: getById });
// додаємо обробку подій на кожен контрол-елемент форматтеру
FORMATTER_CONTROLS.forEach(function (styleKey) {
// додаткова перевірка на існування кожного контрол-елементу на сторінці
getById(styleKey + 'Picker') && getById(styleKey + 'Picker').addEventListener('change', function (_ref) {
var value = _ref.target.value;
return userInput[styleKey] = value;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment