tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add IE compatibility

This commit is contained in:
Ivan Diaz 2018-02-25 11:37:37 -03:00
parent 2cabfe1887
commit 7134f82b5f
9 changed files with 78 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';
import {EditorState, convertToRaw} from 'draft-js';
import history from 'lib-app/history';
import i18n from 'lib-app/i18n';
@ -13,6 +12,7 @@ import LanguageSelector from 'app-components/language-selector';
import Captcha from 'app/main/captcha';
import Header from 'core-components/header';
import TextEditor from 'core-components/text-editor';
import Form from 'core-components/form';
import FormField from 'core-components/form-field';
import SubmitButton from 'core-components/submit-button';
@ -33,7 +33,7 @@ class CreateTicketForm extends React.Component {
message: null,
form: {
title: '',
content: EditorState.createEmpty(),
content: TextEditor.createEmpty(),
departmentIndex: 0,
email: '',
name: '',
@ -162,4 +162,3 @@ export default connect((store) => {
allowAttachments: store.config['allow-attachments']
};
})(CreateTicketForm);

2
client/src/app/main/dashboard/dashboard-layout.js
View File

@ -14,7 +14,7 @@ class DashboardLayout extends React.Component {
<DashboardMenu location={this.props.location} />
</div>
<div className={this.getDashboardContentClass()}>
<Widget>
<Widget className="col-md-12">
{this.props.children}
</Widget>
</div>

8
client/src/core-components/form-field.js
View File

@ -27,7 +27,7 @@ class FormField extends React.Component {
field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group', 'file']),
fieldProps: React.PropTypes.object
};
static defaultProps = {
field: 'input',
fieldProps: {}
@ -118,7 +118,7 @@ class FormField extends React.Component {
return classNames(classes);
}
getFieldProps() {
let props = _.extend({}, this.props.fieldProps, {
disabled: this.isDisabled(),
@ -172,7 +172,7 @@ class FormField extends React.Component {
this.props.onChange(event)
}
}
isDisabled() {
const fieldProps = this.props.fieldProps;
@ -186,4 +186,4 @@ class FormField extends React.Component {
}
}
export default FormField;
export default FormField;

48
client/src/core-components/text-editor.js
View File

@ -3,19 +3,24 @@ import classNames from 'classnames';
import {Editor} from 'react-draft-wysiwyg';
import {EditorState, ContentState, convertFromHTML} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';
import {isIE} from 'lib-core/navigator';
class TextEditor extends React.Component {
static propTypes = {
errored: React.PropTypes.bool,
onChange: React.PropTypes.func,
value: React.PropTypes.object
value: React.PropTypes.oneOfType([
React.PropTypes.object, React.PropTypes.string
])
};
static createEmpty() {
return EditorState.createEmpty()
if(isIE()) return '';
return EditorState.createEmpty();
}
static getEditorStateFromHTML(htmlString) {
if(isIE()) return htmlString;
const blocksFromHTML = convertFromHTML(htmlString);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
@ -26,31 +31,51 @@ class TextEditor extends React.Component {
}
static getHTMLFromEditorState(editorState) {
if(isIE()) return editorState;
return stateToHTML(editorState.getCurrentContent());
}
static isEditorState(editorState) {
if(isIE()) return typeof editorState === 'String';
return editorState && editorState.getCurrentContent;
}
state = {
value: EditorState.createEmpty(),
value: TextEditor.createEmpty(),
focused: false
};
render() {
return (
<div className={this.getClass()}>
<Editor {...this.getEditorProps()} />
{isIE() ? this.renderTextArea() : this.renderDraftJS()}
</div>
);
}
renderDraftJS() {
return <Editor {...this.getEditorProps()} />;
}
renderTextArea() {
return (
<textarea
className="text-editor__editor"
onChange={this.onEditorChange.bind(this)}
onFocus={this.onEditorFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
ref="editor"
value={this.props.value || this.state.value}
/>
);
}
getClass() {
let classes = {
'text-editor': true,
'text-editor_errored': (this.props.errored),
'text-editor_focused': (this.state.focused),
'text-editor_textarea': isIE(),
[this.props.className]: (this.props.className)
};
@ -94,6 +119,7 @@ class TextEditor extends React.Component {
}
onEditorChange(value) {
if(isIE()) value = value.target.value;
this.setState({value});
if (this.props.onChange) {
@ -119,9 +145,13 @@ class TextEditor extends React.Component {
focus() {
if (this.refs.editor) {
this.refs.editor.focusEditor();
if(isIE()) {
this.refs.editor.focus();
} else {
this.refs.editor.focusEditor();
}
}
}
}
export default TextEditor;
export default TextEditor;

10
client/src/core-components/text-editor.scss
View File

@ -28,4 +28,12 @@
border: 1px solid $primary-red;
}
}
}
&_textarea {
.text-editor__editor {
height: 200px;
padding-left: 10px;
width: 100%;
}
}
}

3
client/src/index.html
View File

@ -15,7 +15,8 @@
<div id="app"></div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=String.prototype.startsWith,Array.from,Array.prototype.fill,Array.prototype.keys,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,String.prototype.repeat,Number.isInteger,Promise&flags=gated"></script>
<script src="/js/config.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
</html>

9
client/src/index.php
View File

@ -9,20 +9,23 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>OpenSupports</title>
<link rel="stylesheet" href="<?=$url ?>/css/main.css">
<link rel="icon" type="image/x-icon" href="<?=$url ?>/images/icon.png">
</head>
<body>
<div id="app"></div>
<script>
root = "<?=$url ?>";
apiRoot = '<?=$url ?>/api';
globalIndexPath = "<?=$path ?>";
</script>
<?php if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)): ?>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=String.prototype.startsWith,Array.from,Array.prototype.fill,Array.prototype.keys,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,String.prototype.repeat,Number.isInteger,Promise&flags=gated"></script>
<?php endif; ?>
<script src="<?=$url ?>/js/main.js"></script>
</body>
</html>

15
client/src/lib-core/navigator.js Normal file
View File

@ -0,0 +1,15 @@
export function getInternetExplorerVersion() {
let rv = -1
if(navigator.appName == 'Microsoft Internet Explorer') {
let ua = navigator.userAgent;
let re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
}
return rv;
}
export function isIE() {
return !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
}

15
server/config.php
View File

@ -1,15 +0,0 @@
<?php
$env['MYSQL_SERVER'] = getenv('MYSQL_SERVER');
$env['MYSQL_USER'] = getenv('MYSQL_USER');
$env['MYSQL_PASSWORD'] = getenv('MYSQL_PASSWORD');
$env['MYSQL_DATABASE'] = getenv('MYSQL_DATABASE');
$mysql_host = ($env['MYSQL_SERVER']) ? $env['MYSQL_SERVER'] : 'localhost';
$mysql_user = ($env['MYSQL_USER']) ? $env['MYSQL_USER'] : 'root';
$mysql_password = ($env['MYSQL_PASSWORD']) ? $env['MYSQL_PASSWORD'] : '';
$mysql_database = ($env['MYSQL_DATABASE']) ? $env['MYSQL_DATABASE'] : 'development';
define('MYSQL_HOST', $mysql_host);
define('MYSQL_USER', $mysql_user);
define('MYSQL_PASSWORD', $mysql_password);
define('MYSQL_DATABASE', $mysql_database);