fontcustom_canvas 0.1.0 → 0.1.2

data/public/theme_editor/ThemeEditorAccordion.js

@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) 2015 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import I18n from 'i18nObj'
+import {Text} from '@instructure/ui-elements'
+import ThemeEditorColorRow from './ThemeEditorColorRow'
+import ThemeEditorImageRow from './ThemeEditorImageRow'
+import ThemeEditorVariableGroup from './ThemeEditorVariableGroup'
+import RangeInput from './RangeInput'
+import customTypes from './PropTypes'
+import ThemeEditorFontFamilyRow from './ThemeEditorFontFamilyRow'
+import ThemeEditorFontWeightRow from './ThemeEditorFontWeightRow'
+import ThemeEditorFontSizeRow from './ThemeEditorFontSizeRow'
+
+const activeIndexKey = 'Theme__editor-accordion-index'
+
+export default class ThemeEditorAccordion extends React.Component {
+  static propTypes = {
+    variableSchema: customTypes.variableSchema,
+    brandConfigVariables: PropTypes.object.isRequired,
+    changedValues: PropTypes.object.isRequired,
+    changeSomething: PropTypes.func.isRequired,
+    getDisplayValue: PropTypes.func.isRequired,
+    themeState: PropTypes.object,
+    handleThemeStateChange: PropTypes.func
+  }
+
+  state = {
+    expandedIndex: Number(window.sessionStorage.getItem(activeIndexKey))
+  }
+
+  setStoredAccordionIndex(index) {
+    window.sessionStorage.setItem(activeIndexKey, index)
+  }
+
+  handleToggle = (event, expanded, index) => {
+    this.setState(
+      {
+        expandedIndex: index
+      },
+      () => {
+        this.setStoredAccordionIndex(index)
+      }
+    )
+  }
+
+  renderRow = varDef => {
+    const props = {
+      key: varDef.variable_name,
+      currentValue: this.props.brandConfigVariables[varDef.variable_name],
+      userInput: this.props.changedValues[varDef.variable_name],
+      onChange: this.props.changeSomething.bind(null, varDef.variable_name),
+      placeholder: this.props.getDisplayValue(varDef.variable_name),
+      themeState: this.props.themeState,
+      handleThemeStateChange: this.props.handleThemeStateChange,
+      varDef
+    }
+
+    switch (varDef.type) {
+      case 'color':
+        return <ThemeEditorColorRow {...props} />
+      case 'image':
+        return <ThemeEditorImageRow {...props} />
+      case 'percentage':
+        const defaultValue = props.currentValue || props.placeholder
+        return (
+          <RangeInput
+            key={varDef.variable_name}
+            labelText={varDef.human_name}
+            min={0}
+            max={1}
+            step={0.1}
+            defaultValue={defaultValue ? parseFloat(defaultValue) : 0.5}
+            name={`brand_config[variables][${varDef.variable_name}]`}
+            variableKey={varDef.variable_name}
+            onChange={value => props.onChange(value)}
+            themeState={props.themeState}
+            handleThemeStateChange={props.handleThemeStateChange}
+            formatValue={value => I18n.toPercentage(value * 100, {precision: 0})}
+          />
+        )
+      case 'fontFamily':
+        return <ThemeEditorFontFamilyRow {...props} />
+      case 'fontSize':
+        return <ThemeEditorFontSizeRow {...props} />
+      case 'fontWeight':
+        return <ThemeEditorFontWeightRow {...props} />
+      default:
+        return null
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.variableSchema.map((variableGroup, index) => (
+          <ThemeEditorVariableGroup
+            key={variableGroup.group_name}
+            summary={
+              <Text as="h2" weight="bold">
+                {variableGroup.group_name}
+              </Text>
+            }
+            index={index}
+            expanded={index === this.state.expandedIndex}
+            onToggle={this.handleToggle}
+          >
+            {variableGroup.variables.map(this.renderRow)}
+          </ThemeEditorVariableGroup>
+        ))}
+      </div>
+    )
+  }
+}

data/public/theme_editor/ThemeEditorFontFamilyRow.js

@@ -0,0 +1,147 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import customTypes from './PropTypes'
+import I18n from 'i18n!theme_editor'
+import classnames from 'classnames'
+import fonts from './Fonts'
+
+export class ThemeEditorFontFamilyRow extends Component {
+    static propTypes = {
+        varDef: customTypes.fontFamily,
+        onChange: PropTypes.func.isRequired,
+        userInput: customTypes.userVariableInput,
+        placeholder: PropTypes.string.isRequired,
+        themeState: PropTypes.object,
+        handleThemeStateChange: PropTypes.func
+      }
+    
+      static defaultProps = {
+        userInput: {},
+        themeState: {},
+        handleThemeStateChange() {}
+      }
+    
+      state = {}
+    
+      showWarning = () => this.props.userInput.invalid && this.inputNotFocused()
+    
+      warningLabel = () => {
+        if (this.showWarning()) {
+          return (
+            <span role="alert">
+              <div className="ic-Form-message ic-Form-message--error" tabIndex="0">
+                <div className="ic-Form-message__Layout">
+                  <i className="icon-warning" role="presentation" />
+                  {I18n.t("'%{chosenFontFamily}' is not a valid fontFamily.", {
+                    chosenFontFamily: this.props.userInput.val
+                  })}
+                </div>
+              </div>
+            </span>
+          )
+        } else {
+          // must return empty alert span so screenreaders
+          // read the error when it is inserted
+          return <span role="alert" />
+        }
+      }
+    
+      changedFontFamily(value) {
+        // fail fast for no value
+        if (!value) return null
+    
+        // set and read fontFamily values from a dom node to get only valid values
+        const tempNode = document.createElement('span')
+        tempNode.style.fontFamily = value
+        const fontFamily = tempNode.style.fontFamily
+    
+        // reject invalid values
+        if (!fontFamily) return null
+    
+        return fontFamily
+      }
+
+      inputChange = value => {
+        const invalidFontFamily = !!value && (!this.changedFontFamily(value))
+        this.props.onChange(value, invalidFontFamily)
+        if (!invalidFontFamily) {
+          this.props.handleThemeStateChange(this.props.varDef.variable_name, value)
+        }
+      }
+    
+      inputNotFocused = () => this.textInput && this.textInput !== document.activeElement
+    
+      updateIfMounted = () => {
+        this.forceUpdate()
+      }
+    
+      textFontFamilyInput = () => (
+        <select         
+            ref={c => (this.textInput = c)}
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+            'Theme__editor-fontFamily-block_input-text': true,
+            'Theme__editor-fontFamily-block_input': true,
+            'Theme__editor-fontFamily-block_input--has-error': this.props.userInput.invalid,
+            'custom-select': true
+            })}
+            style={{fontFamily: this.props.placeholder}}
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted} >
+
+            { fonts.map((font, key) => {
+                if(font == this.props.placeholder){
+                    return (<option 
+                                key={key} 
+                                value={font} 
+                                style={{fontFamily: font}}
+                                selected
+                            >
+                                {font}
+                            </option>)
+                }else{
+                    return (<option 
+                                key={key} 
+                                value={font} 
+                                style={{fontFamily: font}}
+                            >
+                                {font}
+                            </option>)
+                }
+            })}
+
+        </select>
+      )
+    
+      render() {
+        const fontFamilyInputValue = this.props.placeholder !== 'none' ? this.props.placeholder : null
+        return (
+          <section className="Theme__editor-accordion_element Theme__editor-fontFamily ic-Form-control border border-dark mt-1 mb-1 p-1 rounded">
+            <div className="Theme__editor-form--fontFamily">
+              <label
+                htmlFor={`brand_config[variables][${this.props.varDef.variable_name}]`}
+                className="Theme__editor-fontFamily_title h6"
+              >
+                {this.props.varDef.human_name}
+              </label>
+              <hr />
+              <div className="Theme__editor-fontFamily-block border p-2">
+                {this.textFontFamilyInput()}
+                {this.warningLabel()}
+                <p
+                  className="Theme__editor-fontFamily-label Theme__editor-fontFamily-block_label-sample border text-center shadow"
+                  style={{fontFamily: this.props.placeholder}}
+                  /* this <p> and <input type=fontFamily> are here so if you click the 'sample',
+                  it will pop up a fontFamily picker on browsers that support it */
+                >
+                    Text Example
+                </p>
+              </div>
+            </div>
+          </section>
+        )
+      }
+}
+
+export default ThemeEditorFontFamilyRow

data/public/theme_editor/ThemeEditorFontSizeRow.js

@@ -0,0 +1,152 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import customTypes from './PropTypes'
+import I18n from 'i18n!theme_editor'
+import classnames from 'classnames'
+
+export class ThemeEditorFontSizeRow extends Component {
+    static propTypes = {
+        varDef: customTypes.fontSize,
+        onChange: PropTypes.func.isRequired,
+        userInput: customTypes.userVariableInput,
+        placeholder: PropTypes.string.isRequired,
+        themeState: PropTypes.object,
+        handleThemeStateChange: PropTypes.func
+      }
+    
+      static defaultProps = {
+        userInput: {},
+        themeState: {},
+        handleThemeStateChange() {}
+      }
+    
+      state = {}
+    
+      showWarning = () => this.props.userInput.invalid && this.inputNotFocused()
+    
+      warningLabel = () => {
+        if (this.showWarning()) {
+          return (
+            <span role="alert">
+              <div className="ic-Form-message ic-Form-message--error" tabIndex="0">
+                <div className="ic-Form-message__Layout">
+                  <i className="icon-warning" role="presentation" />
+                  {I18n.t("'%{chosenFontSize}' is not a valid fontSize.", {
+                    chosenFontSize: this.props.userInput.val
+                  })}
+                </div>
+              </div>
+            </span>
+          )
+        } else {
+          // must return empty alert span so screenreaders
+          // read the error when it is inserted
+          return <span role="alert" />
+        }
+      }
+    
+      changedFontSize(value) {
+        let val = value.slice(0, (value.length - 2))
+
+        // fail fast for no value
+        if (!value) return null
+    
+        // set and read fontSize values from a dom node to get only valid values
+        const tempNode = document.createElement('span')
+        tempNode.style.fontSize = value
+        const fontSize = tempNode.style.fontSize
+    
+        // reject invalid values
+        if (!fontSize) return null
+    
+        return fontSize
+      }
+
+      invalidNumber(sizeValue) {
+        console.log(sizeValue);
+        let val = sizeValue.slice(0, (sizeValue.length - 2))
+        console.log(val);
+        console.log(+val != NaN);
+        console.log((+val).toString().length == val.length);
+        console.log((+val > 4 && +val < 73));
+        console.log((+val).toString().length == val.length && +val > 4 && +val < 73);
+
+        return (+val == NaN)  ? false : ((+val).toString().length != val.length && +val < 5 && +val > 72)
+      }
+
+      inputChange = value => {
+        let val;
+        if (value.includes("px")) {
+            val = value
+        }else{
+            val = `${value}px`;
+        }
+
+        const invalidFontSize = !!val && (!this.changedFontSize(val)) || this.invalidNumber(val)
+        this.props.onChange(val, invalidFontSize)
+        if (!invalidFontSize) {
+          this.props.handleThemeStateChange(this.props.varDef.variable_name, val)
+        }
+      }
+    
+      inputNotFocused = () => this.textInput && this.textInput !== document.activeElement
+    
+      updateIfMounted = () => {
+        this.forceUpdate()
+      }
+    
+      textFontSizeInput = () => (
+        <span>
+          <input
+            ref={c => (this.textInput = c)}
+            type="text"
+            name="fontSize"
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+              'Theme__editor-fontSize-block_input-text': true,
+              'Theme__editor-fontSize-block_input': true,
+              'Theme__editor-fontSize-block_input--has-error': this.props.userInput.invalid,
+              'form-control': true
+            })}
+            placeholder={this.props.placeholder}
+            value={this.props.themeState[this.props.varDef.variable_name]}
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted}
+          />
+        </span>
+      )
+    
+      render() {
+        const fontSizeInputValue = this.props.placeholder !== 'none' ? this.props.placeholder : null
+        return (
+        <section className="Theme__editor-accordion_element Theme__editor-fontFamily ic-Form-control border border-dark mt-1 mb-1 p-1 rounded">
+            <div className="Theme__editor-form--fontSize">
+              <label
+                htmlFor={`brand_config[variables][${this.props.varDef.variable_name}]`}
+                className="Theme__editor-fontSize_title h6"
+              >
+                {this.props.varDef.human_name}
+              </label>
+              <hr />
+              <div className="Theme__editor-fontSize-block border p-2">
+                {this.textFontSizeInput()}
+                {this.warningLabel()}\
+                <br />
+                <small>Hint: Valid from 5 till 72 size!</small>
+                <p
+                  className="Theme__editor-fontSize-label Theme__editor-fontSize-block_label-sample border text-center shadow"
+                  style={{fontSize: this.props.placeholder}}
+                  /* this <p> and <input type=fontSize> are here so if you click the 'sample',
+                  it will pop up a fontSize picker on browsers that support it */
+                >
+                    Text Example
+                </p>
+              </div>
+            </div>
+          </section>
+        )
+      }
+}
+
+export default ThemeEditorFontSizeRow

data/public/theme_editor/ThemeEditorFontWeightRow.js

@@ -0,0 +1,176 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import customTypes from './PropTypes'
+import I18n from 'i18n!theme_editor'
+import classnames from 'classnames'
+
+export class ThemeEditorFontWeightRow extends Component {
+    static propTypes = {
+        varDef: customTypes.fontWeight,
+        onChange: PropTypes.func.isRequired,
+        userInput: customTypes.userVariableInput,
+        placeholder: PropTypes.string.isRequired,
+        themeState: PropTypes.object,
+        handleThemeStateChange: PropTypes.func
+      }
+    
+      static defaultProps = {
+        userInput: {},
+        themeState: {},
+        handleThemeStateChange() {}
+      }
+    
+      state = {}
+    
+      showWarning = () => this.props.userInput.invalid && this.inputNotFocused()
+    
+      warningLabel = () => {
+        if (this.showWarning()) {
+          return (
+            <span role="alert">
+              <div className="ic-Form-message ic-Form-message--error" tabIndex="0">
+                <div className="ic-Form-message__Layout">
+                  <i className="icon-warning" role="presentation" />
+                  {I18n.t("'%{chosenFontWeight}' is not a valid fontWeight.", {
+                    chosenFontWeight: this.props.userInput.val
+                  })}
+                </div>
+              </div>
+            </span>
+          )
+        } else {
+          // must return empty alert span so screenreaders
+          // read the error when it is inserted
+          return <span role="alert" />
+        }
+      }
+    
+      changedFontWeight(value) {
+        // fail fast for no value
+        if (!value) return null
+    
+        // set and read fontWeight values from a dom node to get only valid values
+        const tempNode = document.createElement('span')
+        tempNode.style.fontWeight = value
+        const fontWeight = tempNode.style.fontWeight
+    
+        // reject invalid values
+        if (!fontWeight) return null
+    
+        return fontWeight
+      }
+
+      inputChange = value => {
+        const invalidFontWeight = !!value && (!this.changedFontWeight(value))
+        this.props.onChange(value, invalidFontWeight)
+        if (!invalidFontWeight) {
+          this.props.handleThemeStateChange(this.props.varDef.variable_name, value)
+        }
+      }
+    
+      inputNotFocused = () => this.textInput && this.textInput !== document.activeElement
+    
+      updateIfMounted = () => {
+        this.forceUpdate()
+      }
+    
+      textFontWeightInput = () => (
+        <span>
+                    <input
+            ref={c => (this.textInput = c)}
+            type="radio"
+            name="fontWeight"
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+              'Theme__editor-fontWeight-block_input-text': true,
+              'Theme__editor-fontWeight-block_input': true,
+              'Theme__editor-fontWeight-block_input--has-error': this.props.userInput.invalid
+            })}
+            placeholder={this.props.placeholder}
+            value="lighter"
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted}
+          />Lighter<br />
+          <input
+            ref={c => (this.textInput = c)}
+            type="radio"
+            name="fontWeight"
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+              'Theme__editor-fontWeight-block_input-text': true,
+              'Theme__editor-fontWeight-block_input': true,
+              'Theme__editor-fontWeight-block_input--has-error': this.props.userInput.invalid
+            })}
+            placeholder={this.props.placeholder}
+            value="normal"
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted}
+          />Normal<br />
+        <input
+            ref={c => (this.textInput = c)}
+            type="radio"
+            name="fontWeight"
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+              'Theme__editor-fontWeight-block_input-text': true,
+              'Theme__editor-fontWeight-block_input': true,
+              'Theme__editor-fontWeight-block_input--has-error': this.props.userInput.invalid
+            })}
+            placeholder={this.props.placeholder}
+            value="bold"
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted}
+          />Bold<br />
+                    <input
+            ref={c => (this.textInput = c)}
+            type="radio"
+            name="fontWeight"
+            id={`brand_config[variables][${this.props.varDef.variable_name}]`}
+            className={classnames({
+              'Theme__editor-fontWeight-block_input-text': true,
+              'Theme__editor-fontWeight-block_input': true,
+              'Theme__editor-fontWeight-block_input--has-error': this.props.userInput.invalid
+            })}
+            placeholder={this.props.placeholder}
+            value="bolder"
+            aria-invalid={this.showWarning()}
+            onChange={event => this.inputChange(event.target.value)}
+            onBlur={this.updateIfMounted}
+          />Bolder
+        </span>
+      )
+    
+      render() {
+        const fontWeightInputValue = this.props.placeholder !== 'none' ? this.props.placeholder : null
+        return (
+          <section className="Theme__editor-accordion_element Theme__editor-fontWeight ic-Form-control border border-dark mt-1 mb-1 p-1 rounded">
+            <div className="Theme__editor-form--fontWeight">
+              <label
+                htmlFor={`brand_config[variables][${this.props.varDef.variable_name}]`}
+                className="Theme__editor-fontWeight_title h6"
+              >
+                {this.props.varDef.human_name}
+              </label>
+              <hr />
+              <div className="Theme__editor-fontWeight-block border p-2">
+                {this.textFontWeightInput()}
+                {this.warningLabel()}
+                <p
+                  className="Theme__editor-fontWeight-label Theme__editor-fontWeight-block_label-sample border text-center shadow"
+                  style={{fontWeight: this.props.placeholder}}
+                  /* this <p> and <input type=fontWeight> are here so if you click the 'sample',
+                  it will pop up a fontWeight picker on browsers that support it */
+                >
+                    Text Example
+                </p>
+              </div>
+            </div>
+          </section>
+        )
+      }
+}
+
+export default ThemeEditorFontWeightRow