JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<h1>Style Editor</h1>
<div data-bind="attr: { style: style }">Hello World</div><hr/>
<div data-role="styleeditor" data-bind="value: style"></div>
JavaScript
/**
* Copyright (c) 2013-2015 Memba Sarl. All rights reserved.
* Sources at https://github.com/Memba
*/
/* jshint browser: true, jquery: true */
/* globals define: false */
(function (f, define){
'use strict';
define(['./vendor/kendo/kendo.binder', './vendor/kendo/kendo.grid', './vendor/kendo/kendo.combobox'], f);
})(function () {
'use strict';
(function ($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
STRING = 'string',
CHANGE = 'change',
WIDGET_CLASS = 'kj-style-editor';
/*********************************************************************************
* Helpers
*********************************************************************************/
function log(message) {
if (window.app && window.app.DEBUG && window.console && $.isFunction(window.console.log)) {
window.console.log('kidoju.widgets.styleeditor: ' + message);
}
}
/*********************************************************************************
* Widget
*********************************************************************************/
/**
* @class StyleEditor Widget (kendoStyleEditor)
*/
var StyleEditor = Widget.extend({
/**
* Initializes the widget
* @param element
* @param options
*/
init: function (element, options) {
var that = this;
options = options || {};
Widget.fn.init.call(that, element, options);
log('widget initialized');
that._setDataSource();
that._layout();
that._setDestroyHandler();
that._setKeyPressHandler();
},
/**
* StyleEditor options
* @property options
...