\n
\n );\n } else {\n style.backgroundImage = `url(\"${utils.getBestImageUrl(this.props.backgroundImage)}\")`;\n style.backgroundRepeat = this.props.repeat;\n style.backgroundPosition = `${-this.props.horizontal}% ${-this.props.vertical}%`;\n result = ;\n }\n\n return result;\n }\n\n return ;\n }\n}\n"
},
{
"path": "lib/shared/components/button/index.jsx",
"content": "import cx from 'classnames';\nimport forEach from 'lodash.foreach';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class Button extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired,\n className: PropTypes.string,\n style: PropTypes.object,\n primary: PropTypes.bool,\n full: PropTypes.bool,\n big: PropTypes.bool,\n noBackground: PropTypes.bool\n };\n\n static defaultProps = {\n primary: true,\n full: false,\n big: false,\n noBackground: false\n };\n\n render () {\n const {onClick, className, ...classes} = this.props;\n\n let resultClassName = cx(styles.button, className);\n forEach(classes, (value, key) => {\n if (styles[key] && value) {\n resultClassName = cx(resultClassName, styles[key]);\n }\n });\n\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/components/button/index.less",
"content": "@import '~styles/colors.less';\n\n.button {\n cursor: pointer;\n padding: 8px 15px;\n text-decoration: none;\n font-size: 12px;\n line-height: 15px;\n display: inline-block;\n vertical-align: top;\n border-radius: 3px;\n outline: 0;\n border: 0;\n}\n\n.full {\n display: block;\n text-align: center;\n width: 100%;\n margin-right: 0;\n text-transform: uppercase;\n font-size: 10px;\n}\n\n.primary {\n background-color: @primary;\n color: #ffffff;\n\n &:hover {\n background-color: @primaryDarker;\n }\n}\n\n.alert {\n background-color: @alert;\n color: #ffffff;\n}\n\n.big {\n font-size: 12px;\n padding: 12px 15px;\n}\n\n.noBackground {\n background-color: transparent;\n text-transform: uppercase;\n\n &.primary {\n color: @primary;\n font-size: 16px;\n }\n\n &.alert {\n color: @alert;\n font-size: 16px;\n }\n\n &.grey {\n color: @adminText;\n font-size: 16px;\n }\n\n &:hover {\n background-color: transparent;\n }\n}\n"
},
{
"path": "lib/shared/components/component.jsx",
"content": "import React from 'react';\n\nexport default class BaseComponent extends React.Component {\n constructor (props, context) {\n super(props, context);\n this.state = this.getInitState ? this.getInitState() : {};\n this.init && this.init();\n }\n\n isClient () {\n return typeof document !== 'undefined';\n }\n}\n"
},
{
"path": "lib/shared/components/dnd/draggable/draggable.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {findDOMNode} from 'react-dom';\n\nconst LEFT_BUTTON = 0;\n\nexport default class Draggable extends Component {\n static propTypes = {\n dndActions: PropTypes.object.isRequired,\n type: PropTypes.string.isRequired,\n dragInfo: PropTypes.object.isRequired,\n onStartDrag: PropTypes.func,\n droppableOn: PropTypes.string,\n onClick: PropTypes.func,\n disabled: PropTypes.bool,\n children: PropTypes.node\n };\n\n constructor (props, children) {\n super(props, children);\n this.onMouseUpListener = this.onMouseUp.bind(this);\n this.onMouseMoveListener = this.onMouseMove.bind(this);\n }\n\n onMouseUp () {\n document.removeEventListener('mouseup', this.onMouseUpListener);\n document.removeEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseMove (event) {\n event.preventDefault();\n\n this.onMouseUp();\n\n const element = findDOMNode(this);\n const elementOffset = element.getBoundingClientRect();\n const width = Math.round(elementOffset.right - elementOffset.left);\n const {startDragging} = this.props.dndActions;\n\n // Dragging data\n const draggingData = {\n children: this.props.children,\n elementOffset,\n elementWidth: width,\n mouseX: event.pageX,\n mouseY: event.pageY,\n type: this.props.type\n };\n if (this.props.droppableOn) {\n draggingData.droppableOn = this.props.droppableOn;\n }\n\n startDragging(draggingData, this.props.dragInfo);\n this.props.onStartDrag && this.props.onStartDrag();\n }\n\n onMouseDown (event) {\n if (event.button === LEFT_BUTTON) {\n const draggable = !this.props.disabled;\n event.stopPropagation();\n\n if (draggable) {\n document.addEventListener('mouseup', this.onMouseUpListener);\n document.addEventListener('mousemove', this.onMouseMoveListener);\n }\n }\n }\n\n render () {\n const props = {\n className: cx(this.props.children.props.className, 'draggable'),\n draggable: 'false',\n onMouseDown: this.onMouseDown.bind(this)\n };\n\n if (this.props.onClick) {\n props.onClick = this.props.onClick;\n }\n\n return React.cloneElement(this.props.children, props);\n }\n}\n"
},
{
"path": "lib/shared/components/dnd/draggable/index.js",
"content": "import * as dndActions from 'actions/dnd';\n\nimport Component from 'components/component';\nimport React from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport Draggable from './draggable';\n\n@connect(\n () => ({}),\n (dispatch) => ({\n dndActions: bindActionCreators(dndActions, dispatch)\n })\n)\nexport default class DraggableContainer extends Component {\n render () {\n return \n {draggingData.children}\n
\n \n Drop elements here or \n \n click to add\n \n
\n );\n }\n\n return (\n \n {result}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/components/dnd/droppable/droppable.less",
"content": ""
},
{
"path": "lib/shared/components/dnd/droppable/index.js",
"content": "import * as dndActions from 'actions/dnd';\n\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {openElementsMenu} from 'actions/page-builder';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport Droppable from './droppable';\n\n@connect(\n (state, props) => ({\n elementsMenuSpot: state.pageBuilder.elementsMenuSpot,\n selectedId: state.pageBuilder.selectedId,\n dragging: state.dnd.dragging,\n activeDropInfo: state.dnd.dropInfo,\n activeDragInfo: state.dnd.dragInfo,\n draggingData: state.dnd.draggingData,\n showMarks: props.showMarks !== false && // TODO split this into variables\n state.router.location.query.build &&\n state.pageBuilder.editing &&\n !state.pageBuilder.linkingData &&\n (props.dropInfo.id === 'body' ||\n (state.pageBuilder.selectedParent === props.dropInfo.id &&\n state.pageBuilder.selectedElement &&\n (!state.pageBuilder.selectedElement.children ||\n state.pageBuilder.selectedElement.children.constructor !== Array)) ||\n (state.pageBuilder.selectedId === props.dropInfo.id)),\n isActive: state.dnd.dragging && state.dnd.dropInfo.id === props.dropInfo.id\n }),\n (dispatch) => ({\n dndActions: bindActionCreators(dndActions, dispatch),\n ...bindActionCreators({openElementsMenu}, dispatch)\n })\n)\nexport default class DroppableContainer extends Component {\n static propTypes = {\n dropInfo: PropTypes.object.isRequired\n };\n\n render () {\n return \n {this.renderChildren()}\n
\n \n {this.props.children[0]}\n {this.props.children[1]}\n
\n );\n }\n return result;\n }\n}\n"
},
{
"path": "lib/shared/elements/button/props-schema.js",
"content": "export default [\n {\n label: 'Layout',\n type: 'Select',\n id: 'layout',\n props: {\n labels: ['Text', 'Icon - Text', 'Text - Icon', 'Icon'],\n values: ['text', 'icontext', 'texticon', 'icon']\n },\n unlocks: {\n icontext: [\n {\n label: 'Arrange',\n type: 'Select',\n id: 'arrange',\n props: {\n labels: ['Side by side', 'Blocks'],\n values: ['side', 'blocks']\n }\n }\n ],\n texticon: [\n {\n label: 'Arrange',\n type: 'Select',\n id: 'arrange',\n props: {\n labels: ['Side by side', 'Blocks'],\n values: ['side', 'blocks']\n }\n }\n ]\n }\n }\n];\n"
},
{
"path": "lib/shared/elements/button/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini ui-2_link-66'\n },\n category: 'content',\n drop: false,\n drag: {}\n};\n"
},
{
"path": "lib/shared/elements/button/style.js",
"content": "import Utils from 'helpers/utils';\nimport {getColorString} from 'helpers/colors';\n\nexport default {\n type: 'button',\n options: [\n {\n label: 'Layout',\n type: 'Section',\n id: 'layoutSection',\n unlocks: [\n {\n label: 'Size',\n type: 'Select',\n id: 'size',\n props: {\n labels: ['Full Width', 'Fit Content', 'Max Width (px)', 'Strict (px)'],\n values: ['full', 'fit', 'max', 'strict']\n },\n unlocks: {\n fit: [\n {\n label: 'Horizontal alignment',\n type: 'Select',\n id: 'alignment',\n props: {\n labels: ['Left', 'Center', 'Right'],\n values: ['left', 'center', 'right']\n }\n }\n ],\n max: [\n {\n label: 'Max Width',\n type: 'Number',\n id: 'maxWidth',\n props: {\n allowed: ['%', 'px']\n }\n },\n {\n label: 'Horizontal alignment',\n type: 'Select',\n id: 'alignment',\n props: {\n labels: ['Left', 'Center', 'Right'],\n values: ['left', 'center', 'right']\n }\n }\n ],\n strict: [\n {\n label: 'Width',\n type: 'Pixels',\n id: 'width'\n },\n {\n label: 'Height',\n type: 'Pixels',\n id: 'height'\n },\n {\n label: 'Horizontal alignment',\n type: 'Select',\n id: 'alignment',\n props: {\n labels: ['Left', 'Center', 'Right'],\n values: ['left', 'center', 'right']\n }\n }\n ]\n }\n },\n {\n label: 'Padding',\n type: 'Optional',\n id: 'usePadding',\n unlocks: [\n {\n type: 'Padding',\n id: 'padding'\n }\n ]\n }\n ]\n },\n\n {\n label: 'Default state',\n type: 'Section',\n id: 'defaultSection',\n unlocks: [\n {\n label: 'Text Color',\n type: 'Optional',\n id: 'useColor',\n unlocks: [\n {\n type: 'Color',\n id: 'color'\n }\n ]\n },\n {\n label: 'Background',\n type: 'Optional',\n id: 'useBackground',\n unlocks: [\n {\n type: 'Color',\n id: 'backgroundColor'\n }\n ]\n },\n {\n label: 'Border',\n type: 'Optional',\n id: 'useBorder',\n unlocks: [\n {\n type: 'Border',\n id: 'border'\n }\n ]\n },\n {\n label: 'Rounded Corners',\n type: 'Optional',\n id: 'useCorners',\n unlocks: [\n {\n type: 'Corners',\n id: 'corners'\n }\n ]\n }\n ]\n },\n {\n label: 'Overed state',\n type: 'Section',\n id: 'overedSection',\n unlocks: [\n {\n label: 'Text Color',\n type: 'Optional',\n id: 'useColorOver',\n unlocks: [\n {\n type: 'Color',\n id: 'colorOver'\n }\n ]\n },\n {\n label: 'Background',\n type: 'Optional',\n id: 'useBackgroundOver',\n unlocks: [\n {\n type: 'Color',\n id: 'backgroundColorOver'\n }\n ]\n },\n {\n label: 'Border Color',\n type: 'Optional',\n id: 'useBorderColorOver',\n unlocks: [\n {\n type: 'Color',\n id: 'borderColorOver'\n }\n ]\n },\n {\n label: 'Rounded Corners',\n type: 'Optional',\n id: 'useCornersOver',\n unlocks: [\n {\n type: 'Corners',\n id: 'cornersOver'\n }\n ]\n },\n {\n label: 'Animation on Over',\n type: 'Optional',\n id: 'useAnimation',\n unlocks: [\n {\n type: 'Number',\n id: 'animationDuration',\n props: {\n label: 'ms'\n }\n }\n ]\n }\n ]\n },\n {\n label: 'Pressed state',\n type: 'Section',\n id: 'pressedSection',\n unlocks: [\n {\n label: 'Text Color',\n type: 'Optional',\n id: 'useColorPressed',\n unlocks: [\n {\n type: 'Color',\n id: 'colorPressed'\n }\n ]\n },\n {\n label: 'Background',\n type: 'Optional',\n id: 'useBackgroundPressed',\n unlocks: [\n {\n type: 'Color',\n id: 'backgroundColorPressed'\n }\n ]\n },\n {\n label: 'Border Color',\n type: 'Optional',\n id: 'useBorderColorPressed',\n unlocks: [\n {\n type: 'Color',\n id: 'borderColorPressed'\n }\n ]\n }\n ]\n }\n ],\n defaults: {\n size: 'fit',\n maxWidth: '100%',\n width: '70px',\n height: '70px',\n alignment: 'center',\n usePadding: false,\n padding: '0px',\n\n useColor: false,\n color: {\n value: '#ffffff',\n opacity: 100\n },\n useBackground: false,\n backgroundColor: {\n value: '#ffffff',\n opacity: 100\n },\n useBorder: false,\n border: false,\n useCorners: false,\n corners: '0px',\n\n useColorOver: false,\n colorOver: {\n value: '#ffffff',\n opacity: 100\n },\n useBackgroundOver: false,\n backgroundColorOver: {\n value: '#ffffff',\n opacity: 100\n },\n useBorderColorOver: false,\n borderColorOver: {\n value: '#ffffff',\n opacity: 100\n },\n useCornersOver: false,\n cornersOver: '0px',\n useAnimation: false,\n animationDuration: 500,\n\n useColorPressed: false,\n colorPressed: {\n value: '#ffffff',\n opacity: 100\n },\n useBackgroundPressed: false,\n backgroundColorPressed: {\n value: '#ffffff',\n opacity: 100\n },\n useBorderColorPressed: false,\n borderColorPressed: {\n value: '#ffffff',\n opacity: 100\n }\n },\n rules: (props) => {\n const rules = {\n button: {\n backgroundColor: props.useBackground && getColorString(props.backgroundColor),\n borderRadius: props.useCorners && props.corners,\n padding: props.usePadding && props.padding,\n '*': {\n color: props.useColor && getColorString(props.color)\n },\n ':hover': {\n '*': {\n color: props.useColorOver && getColorString(props.colorOver)\n },\n borderRadius: props.useCornersOver && props.cornersOver,\n backgroundColor: props.useBackgroundOver && getColorString(props.backgroundColorOver)\n },\n ':active': {\n '*': {\n color: props.useColorPressed && getColorString(props.colorPressed)\n },\n backgroundColor: props.useBackgroundPressed && getColorString(props.backgroundColorPressed)\n }\n },\n holder: {}\n };\n\n if (props.size === 'strict') {\n rules.button.width = props.width;\n rules.button.height = props.height;\n } else if (props.size === 'fit') {\n rules.button.display = 'inline-block';\n } else if (props.size === 'max') {\n rules.button.maxWidth = props.maxWidth;\n }\n\n if (props.size !== 'full') {\n rules.holder.textAlign = props.alignment;\n rules.button.display = 'inline-block';\n }\n\n if (props.useAnimation) {\n rules.button.transition = `all ${props.animationDuration}ms cubic-bezier(0.190, 1.000, 0.220, 1.000)`;\n }\n\n if (props.useBorder) {\n Utils.applyBorders(rules.button, props.border);\n\n if (props.useBorderColorOver) {\n rules.button[':hover'].borderColor = getColorString(props.borderColorOver);\n }\n\n if (props.useBorderColorPressed) {\n rules.button[':active'].borderColor = getColorString(props.borderColorPressed);\n }\n }\n\n return rules;\n }\n};\n"
},
{
"path": "lib/shared/elements/column/index.jsx",
"content": "import React, {PropTypes} from 'react';\n\nimport propsSchema from './props-schema';\nimport settings from './settings';\nimport Component from '../component';\nimport Element from '../element';\n\nexport default class Column extends Component {\n static propTypes = {\n padding: PropTypes.string.isRequired,\n vertical: PropTypes.string.isRequired,\n left: PropTypes.number,\n right: PropTypes.number,\n bottom: PropTypes.number,\n layout: PropTypes.object,\n relax: PropTypes.object.isRequired\n };\n\n static defaultProps = {\n padding: '15px',\n vertical: 'top'\n };\n\n static propsSchema = propsSchema;\n static settings = settings;\n\n render () {\n const layout = this.props.layout || {\n width: 'auto'\n };\n\n const style = {\n display: layout.width === 'block' ? 'block' : 'table-cell',\n verticalAlign: this.props.vertical\n };\n\n if (this.props.left || this.props.right) {\n style.padding = `0px ${this.props.right}px 0px ${this.props.left}px`;\n }\n if (this.props.bottom) {\n style.marginBottom = this.props.bottom;\n }\n\n const contentStyle = {\n padding: this.props.padding\n };\n\n if (layout.width !== 'block') {\n style.width = `${layout.widthPerc}`;\n }\n\n return (\n \n \n {this.renderContent()}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/elements/column/props-schema.js",
"content": "\nexport default [\n {\n label: 'Padding',\n type: 'Padding',\n id: 'padding'\n },\n {\n label: 'Content vertical align',\n type: 'Select',\n id: 'vertical',\n props: {\n labels: ['Top', 'Center', 'Bottom'],\n values: ['top', 'middle', 'bottom']\n }\n }\n];\n"
},
{
"path": "lib/shared/elements/column/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini design_distribute-horizontal'\n },\n category: 'structure',\n drop: {\n rejects: 'Section',\n customDropArea: true\n },\n drag: {\n droppableOn: 'Columns'\n }\n};\n"
},
{
"path": "lib/shared/elements/columns/classes.js",
"content": "import jss from 'helpers/stylesheet';\n\nexport default jss.createRules({\n row: {\n display: 'table',\n tableLayout: 'fixed',\n width: '100%'\n }\n});\n"
},
{
"path": "lib/shared/elements/columns/index.jsx",
"content": "import utils from 'helpers/utils';\nimport Droppable from 'components/dnd/droppable';\nimport React, {PropTypes} from 'react';\n\nimport classes from './classes';\nimport propsSchema from './props-schema';\nimport settings from './settings';\nimport Component from '../component';\nimport Element from '../element';\n\nexport default class Columns extends Component {\n static propTypes = {\n spacing: PropTypes.string,\n spacingRows: PropTypes.string,\n columnsDisplay: PropTypes.array.isRequired,\n children: PropTypes.node,\n relax: PropTypes.object.isRequired\n };\n\n static defaultProps = {\n spacing: '10px',\n spacingRows: '10px',\n columnsDisplay: []\n };\n\n static defaultChildren = [\n {tag: 'Column'}, {tag: 'Column'}\n ];\n static propsSchema = propsSchema;\n static settings = settings;\n\n render () {\n return (\n \n {columns}\n
\n );\n }\n }\n }\n } else if (editing) {\n result = (\n \n \n {this.props.children}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/elements/container/props-schema.js",
"content": "export default [];\n"
},
{
"path": "lib/shared/elements/container/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini ui-2_enlarge-58'\n },\n category: 'structure',\n drop: {\n rejects: 'Section'\n },\n drag: {}\n};\n"
},
{
"path": "lib/shared/elements/container/style.js",
"content": "import utils from 'helpers/utils';\nimport {getColorString, applyBackground} from 'helpers/colors';\n\nexport default {\n type: 'container',\n options: [\n {\n label: 'Background Color',\n type: 'Optional',\n id: 'useBackgroundColor',\n unlocks: [\n {\n type: 'Color',\n id: 'backgroundColor',\n props: {\n gradients: true\n }\n }\n ]\n },\n {\n label: 'Max Width',\n type: 'Optional',\n id: 'useMaxWidth',\n unlocks: [\n {\n label: 'Maximum Width',\n type: 'Pixels',\n id: 'widthPx',\n props: {\n min: 0,\n max: false\n }\n },\n {\n label: 'Content horizontal alignment',\n type: 'Select',\n id: 'contentHorizontal',\n props: {\n labels: ['Left', 'Center', 'Right'],\n values: ['left', 'center', 'right']\n }\n }\n ]\n },\n {\n label: 'Padding',\n type: 'Padding',\n id: 'padding'\n },\n {\n label: 'Rounded Corners',\n type: 'Optional',\n id: 'useCorners',\n unlocks: [\n {\n type: 'Corners',\n id: 'corners'\n }\n ]\n },\n {\n label: 'Border',\n type: 'Optional',\n id: 'useBorder',\n unlocks: [\n {\n type: 'Border',\n id: 'border'\n }\n ]\n },\n {\n label: 'Shadow',\n type: 'BoxShadow',\n id: 'shadow'\n }\n ],\n defaults: {\n useBackgroundColor: false,\n backgroundColor: {\n value: '#ffffff',\n opacity: 100\n },\n useMaxWidth: true,\n widthPx: '1000px',\n contentHorizontal: 'center',\n padding: '20px',\n useCorners: false,\n corners: '0px',\n useBorder: false,\n shadow: []\n },\n rules: (props) => {\n const rule = {};\n const holderRule = {};\n\n props.useBackgroundColor && applyBackground(rule, props.backgroundColor);\n\n if (props.useMaxWidth) {\n rule.maxWidth = props.widthPx;\n rule.width = '100%';\n rule.display = 'inline-block';\n\n holderRule.textAlign = props.contentHorizontal;\n }\n\n rule.padding = props.padding;\n rule.borderRadius = props.useCorners && props.corners;\n\n if (props.useBorder) {\n utils.applyBorders(rule, props.border);\n }\n\n if (props.shadow && props.shadow.length > 0) {\n utils.applyBoxShadows(rule, props.shadow);\n }\n\n return {\n container: rule,\n holder: holderRule\n };\n },\n getIdentifierLabel: (props) => {\n let str = '';\n\n if (props.useMaxWidth) {\n str += props.widthPx;\n } else {\n str += 'Full';\n }\n\n str += ' | ';\n\n if (props.useBackgroundColor) {\n str += getColorString(props.backgroundColor);\n } else {\n str += 'transparent';\n }\n\n return str;\n }\n};\n"
},
{
"path": "lib/shared/elements/counter/index.jsx",
"content": "import cx from 'classnames';\nimport ReactCounter from 'react-counter';\nimport React, {PropTypes} from 'react';\n\nimport propsSchema from './props-schema';\nimport settings from './settings';\nimport Component from '../component';\nimport Element from '../element';\n\nexport default class Counter extends Component {\n static propTypes = {\n icon: PropTypes.string.isRequired,\n style: PropTypes.any.isRequired,\n styleClassMap: PropTypes.object,\n align: PropTypes.string.isRequired,\n begin: PropTypes.number.isRequired,\n end: PropTypes.number.isRequired,\n duration: PropTypes.number.isRequired,\n relax: PropTypes.object.isRequired\n };\n\n static defaultProps = {\n begin: 0,\n end: 100,\n duration: 2000,\n align: 'center'\n };\n\n static propsSchema = propsSchema;\n static settings = settings;\n static style = 'text';\n\n getInitState () {\n return {\n animate: false\n };\n }\n\n onEnterScreen () {\n this.setState({\n animate: true\n });\n }\n\n render () {\n const classMap = this.props.styleClassMap || {};\n\n const props = {\n ...this.props.relax,\n htmlTag: 'div',\n settings,\n onEnterScreen: this.onEnterScreen.bind(this),\n className: cx(classMap.text),\n style: {\n textAlign: this.props.align\n }\n };\n\n return (\n - \n {this.props.children}\n
\n {items}\n
\n );\n }\n\n renderRow (items, isLast) {\n const style = {};\n if (!isLast) {\n if (this.isLinkingData()) {\n style.borderBottom = `${this.props.verticalGutter} solid rgba(0, 0, 0, 0.8)`;\n } else {\n style.marginBottom = this.props.verticalGutter;\n }\n }\n\n return (\n \n {items}\n
\n );\n }\n\n renderItem (key, isFirst, isLast, dummy = false) {\n let result;\n const {relax, entries, elementsLinks, children, horizontalGutter, columns} = this.props;\n const editing = relax.editing;\n const schemaEntry = entries && entries[key];\n const content = children && relax.renderChildren(relax.element.children, {\n elementsLinks,\n schemaEntry\n });\n const spaceThird = Math.round(parseInt(horizontalGutter, 10) / 3 * 100) / 100;\n const spaceSides = spaceThird * 2;\n\n if (!dummy) {\n if (editing) {\n result = (\n 1 && classes.column)} style={style}>\n {result}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/elements/dynamic-list/props-schema.js",
"content": "import React from 'react';\n\nexport default [\n {\n label: 'Schema assigned',\n id: 'schemaId',\n type: 'SchemaPicker'\n },\n {\n label: false,\n id: 'linkDataButton',\n type: 'Button',\n props: {\n label: (\n \n radio_button_checked\n Link data\n
\n ),\n action: 'linkData'\n }\n },\n {\n label: 'Limit',\n id: 'limit',\n type: 'Number'\n },\n {\n label: 'Columns',\n id: 'columns',\n type: 'Number'\n },\n {\n label: 'Vertical gutter',\n id: 'verticalGutter',\n type: 'Pixels'\n },\n {\n label: 'Horizontal gutter',\n id: 'horizontalGutter',\n type: 'Pixels'\n },\n {\n label: 'Filter',\n id: 'filters',\n type: 'Filters'\n },\n {\n label: 'Sort',\n id: 'sorts',\n type: 'Sorts'\n }\n];\n"
},
{
"path": "lib/shared/elements/dynamic-list/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini ui-1_database'\n },\n drop: false,\n drag: {}\n};\n"
},
{
"path": "lib/shared/elements/element/context-menu/context-menu.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './context-menu.less';\n\nexport default class ContextMenu extends Component {\n static propTypes = {\n element: PropTypes.object.isRequired,\n opened: PropTypes.bool.isRequired,\n open: PropTypes.func.isRequired,\n close: PropTypes.func.isRequired,\n addingSymbol: PropTypes.bool.isRequired,\n symbolTitle: PropTypes.string.isRequired,\n openAddingSymbol: PropTypes.func.isRequired,\n closeAddingSymbol: PropTypes.func.isRequired,\n onSymbolChange: PropTypes.func.isRequired,\n makeElementSymbol: PropTypes.func.isRequired,\n makeElementDynamic: PropTypes.func.isRequired,\n duplicateElement: PropTypes.func.isRequired,\n removeElement: PropTypes.func.isRequired\n };\n\n saveSymbol (event) {\n event.preventDefault();\n const {symbolTitle, makeElementSymbol, element} = this.props;\n\n if (this.props.symbolTitle) {\n makeElementSymbol(element.id, symbolTitle);\n } else {\n this.refs.titleInput.focus();\n }\n }\n\n makeDynamic (event) {\n event.preventDefault();\n const {makeElementDynamic, element} = this.props;\n makeElementDynamic(element.id);\n }\n\n duplicate (event) {\n event.preventDefault();\n const {duplicateElement, element} = this.props;\n duplicateElement(element.id);\n }\n\n remove (event) {\n event.preventDefault();\n const {removeElement, element} = this.props;\n removeElement(element.id);\n }\n\n render () {\n const {opened} = this.props;\n return opened ? this.renderOpened() : this.renderClosed();\n }\n\n renderOpened () {\n const {addingSymbol} = this.props;\n return addingSymbol ? this.renderAddingSymbol() : this.renderActions();\n }\n\n renderClosed () {\n return (\n \n );\n }\n\n renderAddingSymbol () {\n const {closeAddingSymbol, symbolTitle, onSymbolChange} = this.props;\n return (\n \n \n \n
\n );\n }\n\n renderActions () {\n const {close, element, openAddingSymbol} = this.props;\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/elements/element/context-menu/context-menu.less",
"content": "@import '~styles/colors.less';\n\n.closed {\n width: 23px;\n height: 23px;\n border: 1px solid @primary;\n display: inline-block;\n position: absolute;\n top: 4px;\n right: 4px;\n\n border-radius: 50%;\n\n font-size: 11px;\n line-height: 23px;\n text-align: center;\n color: @primary;\n cursor: pointer;\n pointer-events: all;\n background-color: transparent;\n}\n\n.opened {\n display: inline-block;\n position: absolute;\n top: 4px;\n right: 4px;\n pointer-events: all;\n overflow: hidden;\n padding-bottom: 7px;\n\n width: 192px;\n border-radius: 4px;\n border: 1px solid @primary;\n background-color: #ffffff;\n\n -webkit-box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.17);\n -moz-box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.17);\n box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.17);\n text-align: center;\n}\n\n.label {\n font-size: 10px;\n line-height: 25px;\n color: @primary;\n padding-bottom: 3px;\n text-transform: uppercase;\n position: relative;\n display: block;\n text-align: center;\n width: 100%;\n\n :global i {\n font-size: 14px;\n position: absolute;\n top: 0; left: 0;\n line-height: 25px;\n width: 25px;\n text-align: center;\n }\n}\n\n.form {\n margin: 0;\n}\n\n.input {\n margin: 0; padding: 0; outline: 0;\n border: 1px solid rgba(0, 0, 0, 0.20);\n height: 28px;\n line-height: 28px;\n color: #999999;\n font-size: 12px;\n font-weight: 300;\n padding: 0 7px;\n border-radius: 4px;\n margin-top: 7px;\n width: 175px;\n\n &::-webkit-input-placeholder {\n color: #dbdbdb;\n }\n &:-moz-placeholder {\n color: #dbdbdb;\n }\n &::-moz-placeholder {\n color: #dbdbdb;\n }\n &:-ms-input-placeholder {\n color: #dbdbdb;\n }\n &::-ms-input-placeholder {\n color: #dbdbdb;\n }\n &:placeholder-shown {\n color: #dbdbdb;\n }\n &:focus {\n border-color: @primary;\n }\n}\n\n.saveButton {\n color: @primary;\n font-size: 12px;\n font-weight: 800;\n margin-top: 7px;\n line-height: 25px;\n text-transform: uppercase;\n cursor: pointer;\n}\n\n.action {\n line-height: 26px;\n font-size: 12px;\n color: #999999;\n cursor: pointer;\n text-transform: uppercase;\n\n &:hover {\n background-color: #efefef;\n color: #333333;\n }\n}\n"
},
{
"path": "lib/shared/elements/element/context-menu/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {makeElementSymbol, makeElementDynamic, duplicateElement, removeElement} from 'actions/page-builder';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport ContextMenu from './context-menu';\n\n@connect(\n () => ({}),\n (dispatch) => bindActionCreators({\n makeElementSymbol,\n makeElementDynamic,\n duplicateElement,\n removeElement\n }, dispatch)\n)\nexport default class ContextMenuContainer extends Component {\n static propTypes = {\n element: PropTypes.object.isRequired\n };\n\n getInitState () {\n return {\n opened: false,\n addingSymbol: false,\n symbolTitle: ''\n };\n }\n\n openAddingSymbol () {\n this.setState({\n addingSymbol: true\n });\n }\n\n closeAddingSymbol () {\n this.setState({\n addingSymbol: false\n });\n }\n\n onSymbolChange (event) {\n this.setState({\n symbolTitle: event.target.value\n });\n }\n\n open () {\n this.setState({\n opened: true\n });\n }\n\n close () {\n this.setState({\n opened: false\n });\n }\n\n render () {\n return (\n {element.label || element.tag}
\n Add to symbol library
\n Make dynamic
\n Duplicate
\n Remove
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/elements/element/empty.less",
"content": "@import '~styles/colors.less';\n\n.root {\n text-align: center;\n border: 1px solid #efefef;\n min-height: 150px;\n}\n\n.info {\n margin-top: 35px;\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: 36px;\n }\n i {\n font-size: 14px;\n color: @primary;\n margin-right: 10px;\n }\n span {\n font-size: 14px;\n text-transform: uppercase;\n color: @primary;\n }\n }\n}\n\n.actions {\n font-size: 12px;\n color: @adminText;\n}\n\n.addButton {\n color: @primary;\n text-decoration: underline;\n}\n"
},
{
"path": "lib/shared/elements/element/highlight.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport Portal from 'components/portal';\nimport React, {PropTypes} from 'react';\n\nimport styles from './highlight.less';\nimport ContextMenu from './context-menu';\n\nexport default class Highlight extends Component {\n static propTypes = {\n selected: PropTypes.bool.isRequired,\n element: PropTypes.object.isRequired,\n settings: PropTypes.object.isRequired,\n dom: PropTypes.node.isRequired\n };\n\n componentDidMount () {\n this.mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';\n this.scrollBind = ::this.onScroll;\n this.resizeBind = ::this.onResize;\n document.body.addEventListener(this.mousewheelevt, this.scrollBind, false);\n window.addEventListener('resize', this.resizeBind, false);\n this.updateTimeoutInterval = setInterval(::this.updatePosition, 30);\n }\n\n componentWillUnmount () {\n document.body.removeEventListener(this.mousewheelevt, this.scrollBind);\n window.removeEventListener('resize', this.resizeBind);\n clearInterval(this.updateTimeoutInterval);\n clearTimeout(this.updateTimeout);\n }\n\n onScroll () {\n this.updatePosition();\n this.updateTimeout = setTimeout(::this.updatePosition, 0);\n }\n\n onResize () {\n this.updatePosition();\n this.updateTimeout = setTimeout(::this.updatePosition, 10);\n }\n\n updatePosition () {\n this.forceUpdate();\n }\n\n getPosition () {\n const rect = this.props.dom.getBoundingClientRect();\n return {\n left: rect.left,\n top: rect.top,\n width: rect.width || (rect.right - rect.left),\n height: rect.height || (rect.bottom - rect.top)\n };\n }\n\n render () {\n const {selected, element, settings} = this.props;\n const style = this.getPosition();\n return (\n \n {settings.icon.content}\n {`${element.label || element.tag} is empty`}\n
\n \n Drop elements here or \n \n
\n \n {settings.icon.content}\n {element.label || element.tag}\n
\n {selected && style.height > 30 && this.renderContext()}\n \n \n radio_button_checked\n Link data\n
\n ),\n action: 'linkFormData'\n }\n }\n];\n"
},
{
"path": "lib/shared/elements/form/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini ui-1_email-84'\n },\n category: 'form',\n drop: {\n rejects: 'Section'\n },\n drag: {}\n};\n"
},
{
"path": "lib/shared/elements/gap/index.jsx",
"content": "import React, {PropTypes} from 'react';\n\nimport propsSchema from './props-schema';\nimport settings from './settings';\nimport Component from '../component';\nimport Element from '../element';\n\nexport default class Gap extends Component {\n static propTypes = {\n amount: PropTypes.number.isRequired,\n relax: PropTypes.object.isRequired\n };\n\n static defaultProps = {\n amount: '30px'\n };\n\n static propsSchema = propsSchema;\n static settings = settings;\n\n render () {\n const style = {\n height: this.props.amount\n };\n\n return (\n \n {gmap}\n \n
\n );\n } else {\n result = gmap;\n }\n return result;\n }\n }\n\n renderMarker () {\n if (this.props.useMarker) {\n const position = {\n lat: parseFloat(this.props.lat, 10),\n lng: parseFloat(this.props.lng, 10)\n };\n return (\n \n \n {this.props.icon && this.props.icon.content}\n \n
\n \n
\n );\n } else if (this.props.relax.editing) {\n result = (\n \n \n
\n );\n }\n return result;\n }\n\n renderOverImage (imageStyle) {\n if (this.props.useOver) {\n return (\n - \n {this.props.entry.children.map(this.renderEntry, this)}\n
- \n {this.props.menu.data.map(this.renderEntry, this)}\n
Choose a menu on settings
\n );\n } else {\n result = ;\n }\n return result;\n }\n\n renderEntry (entry) {\n return (\n \n {this.renderBackground()}\n
\n );\n }\n\n renderBackground () {\n if (this.props.useBackgroundImage) {\n return (\n \n {this.renderControls(classMap)}\n {this.renderDivider(classMap)}\n {this.renderPlayback(classMap)}\n {displayVolume && this.renderDivider(classMap)}\n {displayVolume && this.renderVolume(classMap)}\n
\n \n
\n );\n }\n\n renderVolumeBar (classMap) {\n const volume = this.props.editing ? this.props.defaultVolume : this.props.volume;\n const activeStyle = {\n width: `${volume}%`\n };\n return (\n \n \n
\n \n {this.renderVolumeBar(classMap)}\n
\n \n
\n );\n }\n\n renderProgressBar (classMap) {\n const streamStyle = {\n width: `${this.props.loadedPercentage * 100}%`\n };\n const activeStyle = {\n width: `${this.props.playedPercentage * 100}%`\n };\n return (\n Text 1
\n Text 2
\n \n \n {this.props.playedLabel}\n \n
\n \n {this.renderProgressBar(classMap)}\n
\n \n {this.props.loadedLabel}\n \n \n
\n );\n }\n\n renderControls (classMap) {\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/elements/music-player/props-schema.js",
"content": "export default [\n {\n label: 'Music',\n type: 'Select',\n id: 'type',\n props: {\n labels: ['Your Sounds', 'Soundcloud'],\n values: ['local', 'soundcloud']\n },\n unlocks: {\n local: [\n {\n label: 'Sound',\n type: 'Audio',\n id: 'sound'\n }\n ],\n soundcloud: [\n {\n label: 'Soundcloud music url',\n type: 'String',\n id: 'soundcloud'\n }\n ]\n }\n },\n {\n label: 'Default volume',\n type: 'Percentage',\n id: 'defaultVolume'\n },\n {\n label: 'Background Image',\n type: 'Optional',\n id: 'useBackgroundImage',\n unlocks: [\n {\n type: 'Image',\n id: 'backgroundImage',\n unlocks: [\n {\n label: 'Repeat',\n type: 'Select',\n id: 'repeat',\n props: {\n labels: ['No repeat', 'Repeat', 'Repeat horiz.', 'Repeat vert.'],\n values: ['no-repeat', 'repeat', 'repeat-x', 'repeat-y']\n }\n },\n {\n label: 'Opacity',\n type: 'Percentage',\n id: 'opacity'\n },\n {\n label: 'Vertical position',\n type: 'Percentage',\n id: 'vertical'\n },\n {\n label: 'Horizontal position',\n type: 'Percentage',\n id: 'horizontal'\n }\n ]\n }\n ]\n }\n];\n"
},
{
"path": "lib/shared/elements/music-player/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini media-2_note-03'\n },\n category: 'media',\n drop: false,\n drag: {}\n};\n"
},
{
"path": "lib/shared/elements/music-player/style.js",
"content": "import Utils from 'helpers/utils';\nimport {getColorString} from 'helpers/colors';\n\nexport default {\n type: 'musicplayer',\n options: [\n {\n label: 'Background',\n type: 'Section',\n id: 'backgroundSection',\n unlocks: [\n {\n label: 'Background Color',\n type: 'Color',\n id: 'backgroundColor'\n },\n {\n label: 'Padding',\n type: 'Padding',\n id: 'padding'\n },\n {\n label: 'Border',\n type: 'Optional',\n id: 'useBorder',\n unlocks: [\n {\n type: 'Border',\n id: 'border'\n }\n ]\n },\n {\n label: 'Rounded Corners',\n type: 'Optional',\n id: 'useCorners',\n unlocks: [\n {\n type: 'Corners',\n id: 'corners'\n }\n ]\n }\n ]\n },\n {\n label: 'Layout',\n type: 'Section',\n id: 'layoutSection',\n unlocks: [\n {\n label: 'Controls area padding',\n type: 'Padding',\n id: 'controlsPadding'\n },\n {\n label: 'Playback area padding',\n type: 'Padding',\n id: 'playbackPadding'\n },\n {\n label: 'Volume area padding',\n type: 'Padding',\n id: 'volumePadding'\n },\n {\n label: 'Divider Width',\n type: 'Pixels',\n id: 'dividerWidth'\n },\n {\n label: 'Divider Color',\n type: 'Color',\n id: 'dividerColor'\n }\n ]\n },\n {\n label: 'Progress and volume bars',\n type: 'Section',\n id: 'barsSection',\n unlocks: [\n {\n label: 'Background Color',\n type: 'Color',\n id: 'barsBackgroundColor'\n },\n {\n label: 'Stream Color',\n type: 'Color',\n id: 'barsStreamColor'\n },\n {\n label: 'Active Color',\n type: 'Color',\n id: 'barsActiveColor'\n },\n {\n label: 'Height',\n type: 'Pixels',\n id: 'barsHeight'\n },\n {\n label: 'Rounded Corners',\n type: 'Pixels',\n id: 'barsRounded'\n }\n ]\n }\n ],\n defaults: {\n // Background\n backgroundColor: {\n type: 'hex',\n value: '#ffffff',\n opacity: 100\n },\n padding: '10px',\n useBorder: false,\n border: false,\n useCorners: false,\n corners: '0px',\n // Layout\n controlsPadding: '0px',\n playbackPadding: '0px',\n volumePadding: '0px',\n dividerColor: {\n type: 'hex',\n value: '#efefef',\n opacity: 100\n },\n // Progress and volume bars\n barsBackgroundColor: {\n type: 'hex',\n value: '#efefef',\n opacity: 100\n },\n barsStreamColor: {\n type: 'hex',\n value: '#e9e9e9',\n opacity: 100\n },\n barsActiveColor: {\n type: 'hex',\n value: '#333333',\n opacity: 100\n },\n barsHeight: 6,\n barsRounded: 3,\n dividerWidth: 1\n },\n rules: (props) => {\n const rules = {\n player: {\n backgroundColor: getColorString(props.backgroundColor),\n borderRadius: props.useCorners && props.corners,\n padding: props.padding\n },\n controls: {\n padding: props.controlsPadding\n },\n playback: {\n padding: props.playbackPadding\n },\n volume: {\n padding: props.volumePadding\n },\n bars: {\n backgroundColor: getColorString(props.barsBackgroundColor),\n height: props.barsHeight,\n borderRadius: props.barsRounded\n },\n stream: {\n backgroundColor: getColorString(props.barsStreamColor)\n },\n active: {\n backgroundColor: getColorString(props.barsActiveColor)\n },\n divider: {\n width: props.dividerWidth,\n backgroundColor: getColorString(props.dividerColor)\n }\n };\n\n if (props.useBorder) {\n Utils.applyBorders(rules.player, props.border);\n }\n\n return rules;\n }\n};\n"
},
{
"path": "lib/shared/elements/section/index.jsx",
"content": "import cx from 'classnames';\nimport BackgroundImage from 'components/background-image';\nimport React, {PropTypes} from 'react';\n\nimport propsSchema from './props-schema';\nimport settings from './settings';\nimport style from './style';\nimport Component from '../component';\nimport Element from '../element';\n\nexport default class Section extends Component {\n static propTypes = {\n useBackgroundImage: PropTypes.bool,\n backgroundImage: PropTypes.string,\n repeat: PropTypes.string,\n vertical: PropTypes.number,\n horizontal: PropTypes.number,\n navigation: PropTypes.string,\n styleClassMap: PropTypes.object,\n relax: PropTypes.object.isRequired\n };\n\n static defaultProps = {\n backgroundImage: '',\n repeat: 'no-repeat',\n vertical: '50%',\n horizontal: '50%',\n navigation: ''\n };\n\n static propsSchema = propsSchema;\n static settings = settings;\n static style = style;\n\n render () {\n const classMap = this.props.styleClassMap || {};\n\n const props = {\n ...this.props.relax,\n htmlTag: 'div',\n style: {\n position: 'relative'\n },\n className: cx(classMap && classMap.section),\n settings\n };\n\n if (this.props.navigation && this.props.navigation !== '') {\n props.id = this.props.navigation;\n }\n\n return (\n \n {this.renderContent()}\n
\n \n {iframe}\n \n
\n );\n } else {\n result = iframe;\n }\n } else {\n const style = {\n height\n };\n result = (\n \n \n
\n );\n }\n return result;\n }\n}\n"
},
{
"path": "lib/shared/elements/video/props-schema.js",
"content": "export default [\n {\n label: 'Video Host',\n type: 'Select',\n id: 'type',\n props: {\n labels: ['Youtube', 'Vimeo', 'Dailymotion'],\n values: ['youtube', 'vimeo', 'dailymotion']\n }\n },\n {\n label: 'Video Id/Url',\n type: 'String',\n id: 'videoId'\n },\n {\n label: 'Video Height',\n type: 'Percentage',\n id: 'videoHeight',\n props: {\n max: 200\n }\n }\n];\n"
},
{
"path": "lib/shared/elements/video/settings.js",
"content": "export default {\n icon: {\n class: 'nc-icon-mini media-1_video-65'\n },\n category: 'media',\n drop: false,\n drag: {}\n};\n"
},
{
"path": "lib/shared/helpers/colors.js",
"content": "import colr from 'colr';\nimport find from 'lodash.find';\nimport forEach from 'lodash.foreach';\nimport sortBy from 'lodash.sortby';\n\nlet colorsCollection = [];\n\nexport function updateColors (colors) {\n colorsCollection = colors;\n}\n\nexport function hexIsValid (value) {\n return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);\n}\n\nexport function getColor (colorObj, colors = colorsCollection) {\n let color = colr().fromHex('#000000');\n let opacity = 100;\n let label = '#000000';\n let type = 'hex';\n\n if (typeof colorObj === 'object') {\n opacity = typeof colorObj.opacity === 'number' ? colorObj.opacity : 100;\n type = colorObj.type;\n\n switch (colorObj.type) {\n case 'palette': {\n const colorFromPallete = find(colors, (clr) => (String(clr._id) === colorObj.value));\n if (colorFromPallete) {\n color = colr().fromHex(colorFromPallete.value);\n label = colorFromPallete.label;\n }\n break;\n }\n case 'hex':\n if (hexIsValid(colorObj.value)) {\n color = colr().fromHex(colorObj.value);\n label = colorObj.value;\n }\n break;\n case 'hsv':\n color = colr().fromHsvObject(colorObj.value);\n label = color.toHex();\n break;\n case 'rgb':\n color = colr().fromRgbObject(colorObj.value);\n label = color.toHex();\n break;\n default:\n }\n }\n\n return {\n colr: color,\n opacity,\n label,\n type\n };\n}\n\nexport function getColorString (colorObj, colors = colorsCollection) {\n let result = '#000000';\n const color = (colorObj && colorObj.colr) ? colorObj : getColor(colorObj, colors);\n if (color) {\n if (color.opacity === 100) {\n result = color.colr.toHex();\n } else {\n const rgb = color.colr.toRgbObject();\n result = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.opacity / 100})`;\n }\n }\n return result;\n}\n\nexport function applyBackground (style, colorObj, colors = colorsCollection) {\n if (colorObj.type !== 'linear' && colorObj.type !== 'radial') {\n style.backgroundColor = getColorString(colorObj, colors);\n } else if (colorObj.type === 'linear') {\n const orderedPoints = sortBy(colorObj.points, 'perc');\n const gradientColors = [];\n forEach(orderedPoints, (point) => {\n gradientColors.push(`${getColorString(point, colors)} ${point.perc}%`);\n });\n style.background = `linear-gradient(${90 - colorObj.angle}deg, ${gradientColors.toString()})`;\n // TODO missing other browsers\n // `-moz-linear-gradient(${colorObj.angle}deg, ${gradientColors.toString()})`,\n // `-webkit-linear-gradient(${colorObj.angle}deg, ${gradientColors.toString()})`,\n // `-o-linear-gradient(${colorObj.angle}deg, ${gradientColors.toString()})`,\n // `-ms-linear-gradient(${colorObj.angle}deg, ${gradientColors.toString()})`,\n } else if (colorObj.type === 'radial') {\n const orderedPoints = sortBy(colorObj.points, 'perc');\n const gradientColors = [];\n forEach(orderedPoints, (point) => {\n gradientColors.push(`${getColorString(point, colors)} ${point.perc}%`);\n });\n\n let radius;\n switch (colorObj.radius) {\n case 'cc':\n radius = 'closest-corner';\n break;\n case 'fc':\n radius = 'farthest-corner';\n break;\n case 'cs':\n radius = 'closest-side';\n break;\n case 'fs':\n radius = 'farthest-side';\n break;\n default:\n radius = 'farthest-corner';\n }\n\n style.background = `radial-gradient(circle ${radius} at ${colorObj.center.left}% ${colorObj.center.top}%, ${gradientColors.toString()})`;\n // radial-gradient(circle closest-corner at 25% 50% , #848484, #ededed 100%);\n }\n}\n"
},
{
"path": "lib/shared/helpers/configure-store.js",
"content": "import combineActionsMiddleware from 'redux-combine-actions';\nimport createLogger from 'redux-logger';\nimport reducer from 'reducers';\nimport thunkMiddleware from 'redux-thunk';\nimport {createStore, applyMiddleware, compose} from 'redux';\n\nconst middleware = [];\n\nmiddleware.push(combineActionsMiddleware);\nmiddleware.push(thunkMiddleware);\n\nif (typeof window !== 'undefined' && module.hot) {\n middleware.push(createLogger());\n}\n\nexport default function configureStore (routerMiddleware, initialState) {\n const store = compose(\n applyMiddleware(\n ...middleware\n ),\n routerMiddleware\n )(createStore)(reducer, initialState);\n\n if (module.hot) {\n // Enable Webpack hot module replacement for reducers\n module.hot.accept('../reducers', () => {\n const nextReducer = require('../reducers');\n store.replaceReducer(nextReducer);\n });\n }\n\n return store;\n}\n"
},
{
"path": "lib/shared/helpers/data-types/index.js",
"content": "export const TypesProps = {\n String: {\n default: ''\n },\n Boolean: {\n default: false\n },\n Number: {\n default: 0,\n options: [\n {\n id: 'min',\n label: 'Minimum',\n type: 'Number',\n props: {\n label: '#',\n min: false\n }\n },\n {\n id: 'max',\n label: 'Maximum',\n type: 'Number',\n props: {\n label: '#',\n min: false\n }\n },\n {\n id: 'label',\n label: 'Label',\n type: 'String'\n }\n ],\n defaults: {\n min: -9999,\n max: 9999,\n label: '#'\n }\n }\n};\n\nexport const schemaTypesOrdered = [\n 'String',\n 'Html',\n 'Link',\n 'Image',\n 'Video',\n 'Audio',\n 'Date',\n 'Reference',\n 'Multiple Reference',\n 'User',\n 'Select',\n 'Boolean',\n 'Number',\n 'Icon',\n 'Color'\n];\n\nexport const dependsOnWhitelist = [\n 'String',\n 'Select',\n 'Boolean',\n 'Number'\n];\n\nexport const singleFixedProperties = [\n {\n id: 'title',\n title: 'Title',\n type: 'String',\n required: true,\n locked: true\n },\n {\n id: 'slug',\n title: 'Slug',\n type: 'String',\n required: true,\n locked: true\n },\n {\n id: 'state',\n title: 'State',\n type: 'String',\n required: true,\n locked: true\n },\n {\n id: 'date',\n title: 'Created Date',\n type: 'Date',\n required: true,\n locked: true\n },\n {\n id: 'updatedDate',\n title: 'Updated Date',\n type: 'Date',\n required: true,\n locked: true\n },\n {\n id: 'publishedDate',\n title: 'Published date',\n type: 'Date',\n required: true,\n locked: true\n },\n {\n id: 'data',\n title: 'Page builder data',\n type: 'Array',\n required: true,\n locked: true\n }\n];\n\nexport const propertyOptions = [\n {\n type: 'Columns',\n options: [\n {\n id: 'title',\n label: 'Option Title',\n type: 'String'\n },\n {\n id: 'required',\n label: 'Option Required',\n type: 'Boolean'\n }\n ]\n },\n {\n type: 'Select',\n id: 'type',\n label: 'Option Type',\n props: {\n labels: schemaTypesOrdered,\n values: schemaTypesOrdered\n }\n }\n];\n\nexport default {\n TypesProps,\n schemaTypesOrdered,\n dependsOnWhitelist,\n singleFixedProperties,\n propertyOptions\n};\n"
},
{
"path": "lib/shared/helpers/data-types/native.js",
"content": "import {\n GraphQLString,\n GraphQLInt,\n GraphQLBoolean\n} from 'graphql';\nimport {Schema} from 'mongoose';\n\nexport const TypesNative = {\n String,\n Number,\n Boolean,\n Color: Schema.Types.Mixed,\n Font: String,\n Html: String,\n Icon: String,\n Image: String,\n Select: String,\n Pixels: Number,\n Percentage: Number,\n Padding: String,\n Margin: String,\n Corners: String\n};\n\nexport const TypesNativeGraphQL = {\n String: {type: GraphQLString},\n Number: {type: GraphQLInt},\n Boolean: {type: GraphQLBoolean},\n Color: {type: GraphQLString}, // TODO change to color option object\n Font: {type: GraphQLString}, // TODO check structure\n Html: {type: GraphQLString},\n Icon: {type: GraphQLString},\n Image: {type: GraphQLString},\n Select: {type: GraphQLString},\n Pixels: {type: GraphQLInt},\n Percentage: {type: GraphQLInt},\n Padding: {type: GraphQLString},\n Margin: {type: GraphQLString},\n Corners: {type: GraphQLString}\n};\n\nexport default {\n TypesNative,\n TypesNativeGraphQL\n};\n"
},
{
"path": "lib/shared/helpers/displays.js",
"content": "export default {\n desktop: 99999,\n tablet: 911,\n mobile: 479\n};\n"
},
{
"path": "lib/shared/helpers/ga-send.js",
"content": "export default function gaSend () {\n if (typeof window !== 'undefined') {\n window.ga && window.ga('send', 'pageview');\n }\n}\n"
},
{
"path": "lib/shared/helpers/get-element-position.js",
"content": "import forEach from 'lodash.foreach';\n\nimport displays from './displays';\n\nexport default function getElementPosition (element, display) {\n let elementPosition = element.position;\n\n if (display !== 'desktop' && element.displayPosition) {\n const changes = {};\n forEach(displays, (value, displayIt) => {\n if (displayIt !== 'desktop' && value >= displays[display] && element.displayProps[displayIt]) {\n Object.assign(changes, element.displayPosition[displayIt]);\n }\n });\n elementPosition = Object.assign({}, elementPosition, changes);\n }\n\n return elementPosition;\n}\n"
},
{
"path": "lib/shared/helpers/get-element-props.js",
"content": "import forEach from 'lodash.foreach';\n\nimport displays from './displays';\n\nexport default function getElementProps (element, display) {\n let elementProps = element.props;\n\n if (display !== 'desktop' && element.displayProps) {\n const changes = {};\n forEach(displays, (value, displayIt) => {\n if (displayIt !== 'desktop' && value >= displays[display] && element.displayProps[displayIt]) {\n Object.assign(changes, element.displayProps[displayIt]);\n }\n });\n elementProps = Object.assign({}, elementProps, changes);\n }\n\n return elementProps;\n}\n"
},
{
"path": "lib/shared/helpers/get-element-style-values.js",
"content": "import forEach from 'lodash.foreach';\n\nimport displays from './displays';\n\nexport default function getElementStyleValues (defaults, options, displayOptions, display) {\n const displayValues = {};\n if (display !== 'desktop' && displayOptions) {\n forEach(displays, (value, displayIt) => {\n if (displayIt !== 'desktop' && value >= displays[display] && displayOptions[displayIt]) {\n Object.assign(displayValues, displayOptions[displayIt]);\n }\n });\n }\n\n return Object.assign({}, defaults, options, displayValues);\n}\n"
},
{
"path": "lib/shared/helpers/get-gravatar-image.js",
"content": "import md5 from 'js-md5';\n\nexport default (email, size = 100) => {\n const hash = email ? md5(email.toLowerCase()) : '0';\n return `http://www.gravatar.com/avatar/${hash}?d=mm&s=${size}`;\n};\n"
},
{
"path": "lib/shared/helpers/icons.js",
"content": "export default [\n {\n family: 'FontAwesome',\n baseClass: 'fa',\n reference: 'className',\n link: 'http://fortawesome.github.io/Font-Awesome/',\n icons: [\n // web application icons\n 'fa-adjust',\n 'fa-adn',\n 'fa-align-center',\n 'fa-align-justify',\n 'fa-align-left',\n 'fa-align-right',\n 'fa-ambulance',\n 'fa-anchor',\n 'fa-android',\n 'fa-angellist',\n 'fa-angle-double-down',\n 'fa-angle-double-left',\n 'fa-angle-double-right',\n 'fa-angle-double-up',\n 'fa-apple',\n 'fa-archive',\n 'fa-area-chart',\n 'fa-arrow-circle-down',\n 'fa-arrow-circle-left',\n 'fa-arrow-circle-o-down',\n 'fa-arrow-circle-up',\n 'fa-arrow-down',\n 'fa-arrow-left',\n 'fa-arrow-right',\n 'fa-arrow-up',\n 'fa-arrows',\n 'fa-arrows-alt',\n 'fa-arrows-h',\n 'fa-arrows-v',\n 'fa-asterisk',\n 'fa-at',\n 'fa-automobile',\n 'fa-backward',\n 'fa-ban',\n 'fa-bank',\n 'fa-bar-chart',\n 'fa-barcode',\n 'fa-bars',\n 'fa-bed',\n 'fa-beer',\n 'fa-behance',\n 'fa-behance-square',\n 'fa-bell',\n 'fa-bell-o',\n 'fa-bell-slash',\n 'fa-bell-slash-o',\n 'fa-bicycle',\n 'fa-binoculars',\n 'fa-birthday-cake',\n 'fa-bitbucket',\n 'fa-bitbucket-square',\n 'fa-bitcoin',\n 'fa-bold',\n 'fa-bolt',\n 'fa-bomb',\n 'fa-book',\n 'fa-bookmark',\n 'fa-bookmark-o',\n 'fa-briefcase',\n 'fa-bug',\n 'fa-building',\n 'fa-building-o',\n 'fa-bullhorn',\n 'fa-bullseye',\n 'fa-bus',\n 'fa-buysellads',\n 'fa-cab',\n 'fa-calculator',\n 'fa-calendar',\n 'fa-calendar-o',\n 'fa-camera',\n 'fa-camera-retro',\n 'fa-car',\n 'fa-caret-down',\n 'fa-caret-left',\n 'fa-caret-right',\n 'fa-caret-square-o-down',\n 'fa-caret-square-o-left',\n 'fa-caret-square-o-right',\n 'fa-caret-square-o-up',\n 'fa-caret-up',\n 'fa-cart-arrow-down',\n 'fa-cart-plus',\n 'fa-cc',\n 'fa-cc-amex',\n 'fa-cc-discover',\n 'fa-cc-mastercard',\n 'fa-cc-paypal',\n 'fa-cc-stripe',\n 'fa-cc-visa',\n 'fa-certificate',\n 'fa-chain',\n 'fa-chain-broken',\n 'fa-check',\n 'fa-check-circle',\n 'fa-check-circle-o',\n 'fa-check-square',\n 'fa-check-square-o',\n 'fa-chevron-circle-down',\n 'fa-chevron-circle-left',\n 'fa-chevron-circle-right',\n 'fa-chevron-circle-up',\n 'fa-chevron-down',\n 'fa-chevron-left',\n 'fa-chevron-right',\n 'fa-chevron-up',\n 'fa-child',\n 'fa-circle',\n 'fa-circle-o',\n 'fa-circle-o-notch',\n 'fa-circle-thin',\n 'fa-clipboard',\n 'fa-clock-o',\n 'fa-close',\n 'fa-cloud',\n 'fa-cloud-download',\n 'fa-cloud-upload',\n 'fa-cny',\n 'fa-code',\n 'fa-code-fork',\n 'fa-codepen',\n 'fa-coffee',\n 'fa-cog',\n 'fa-cogs',\n 'fa-columns',\n 'fa-comment',\n 'fa-comment-o',\n 'fa-comments',\n 'fa-comments-o',\n 'fa-compass',\n 'fa-compress',\n 'fa-connectdevelop',\n 'fa-copy',\n 'fa-copyright',\n 'fa-credit-card',\n 'fa-crop',\n 'fa-crosshairs',\n 'fa-css3',\n 'fa-cube',\n 'fa-cubes',\n 'fa-cut',\n 'fa-cutlery',\n 'fa-dashboard',\n 'fa-dashcube',\n 'fa-database',\n 'fa-delicious',\n 'fa-desktop',\n 'fa-deviantart',\n 'fa-diamond',\n 'fa-digg',\n 'fa-dollar',\n 'fa-dot-circle-o',\n 'fa-download',\n 'fa-dribbble',\n 'fa-dropbox',\n 'fa-drupal',\n 'fa-edit',\n 'fa-eject',\n 'fa-ellipsis-h',\n 'fa-ellipsis-v',\n 'fa-empire',\n 'fa-envelope',\n 'fa-envelope-o',\n 'fa-envelope-square',\n 'fa-eraser',\n 'fa-euro',\n 'fa-exchange',\n 'fa-exclamation',\n 'fa-exclamation-circle',\n 'fa-exclamation-triangle',\n 'fa-expand',\n 'fa-external-link',\n 'fa-external-link-square',\n 'fa-eye',\n 'fa-eye-slash',\n 'fa-eyedropper',\n 'fa-facebook',\n 'fa-facebook-official',\n 'fa-facebook-square',\n 'fa-fast-backward',\n 'fa-fast-forward',\n 'fa-fax',\n 'fa-female',\n 'fa-fighter-jet',\n 'fa-file',\n 'fa-file-archive-o',\n 'fa-file-audio-o',\n 'fa-file-code-o',\n 'fa-file-excel-o',\n 'fa-file-image-o',\n 'fa-file-movie-o',\n 'fa-file-pdf-o',\n 'fa-file-photo-o',\n 'fa-file-picture-o',\n 'fa-file-powerpoint-o',\n 'fa-file-sound-o',\n 'fa-file-text',\n 'fa-file-text-o',\n 'fa-file-video-o',\n 'fa-file-word-o',\n 'fa-file-zip-o',\n 'fa-files-o',\n 'fa-film',\n 'fa-filter',\n 'fa-fire',\n 'fa-fire-extinguisher',\n 'fa-flag',\n 'fa-flag-checkered',\n 'fa-flag-o',\n 'fa-flash',\n 'fa-flask',\n 'fa-flickr',\n 'fa-floppy-o',\n 'fa-folder',\n 'fa-folder-o',\n 'fa-folder-open',\n 'fa-folder-open-o',\n 'fa-font',\n 'fa-forumbee',\n 'fa-forward',\n 'fa-foursquare',\n 'fa-frown-o',\n 'fa-futbol-o',\n 'fa-gamepad',\n 'fa-gavel',\n 'fa-gbp',\n 'fa-gear',\n 'fa-gears',\n 'fa-genderless',\n 'fa-gift',\n 'fa-git',\n 'fa-git-square',\n 'fa-github',\n 'fa-github-alt',\n 'fa-github-square',\n 'fa-gittip',\n 'fa-glass',\n 'fa-globe',\n 'fa-google',\n 'fa-google-plus',\n 'fa-google-plus-square',\n 'fa-google-wallet',\n 'fa-graduation-cap',\n 'fa-gratipay',\n 'fa-group',\n 'fa-h-square',\n 'fa-hacker-news',\n 'fa-hand-o-down',\n 'fa-hand-o-left',\n 'fa-hand-o-right',\n 'fa-hand-o-up',\n 'fa-hdd-o',\n 'fa-header',\n 'fa-headphones',\n 'fa-heart',\n 'fa-heart-o',\n 'fa-heartbeat',\n 'fa-history',\n 'fa-home',\n 'fa-hospital-o',\n 'fa-hotel',\n 'fa-html5',\n 'fa-ils',\n 'fa-image',\n 'fa-inbox',\n 'fa-indent',\n 'fa-info',\n 'fa-info-circle',\n 'fa-inr',\n 'fa-instagram',\n 'fa-institution',\n 'fa-ioxhost',\n 'fa-italic',\n 'fa-joomla',\n 'fa-jpy',\n 'fa-jsfiddle',\n 'fa-key',\n 'fa-keyboard-o',\n 'fa-krw',\n 'fa-language',\n 'fa-laptop',\n 'fa-lastfm',\n 'fa-lastfm-square',\n 'fa-leaf',\n 'fa-leanpub',\n 'fa-legal',\n 'fa-lemon-o',\n 'fa-level-down',\n 'fa-level-up',\n 'fa-life-bouy',\n 'fa-lightbulb-o',\n 'fa-line-chart',\n 'fa-link',\n 'fa-linkedin',\n 'fa-linkedin-square',\n 'fa-linux',\n 'fa-list',\n 'fa-list-alt',\n 'fa-list-ol',\n 'fa-list-ul',\n 'fa-location-arrow',\n 'fa-lock',\n 'fa-long-arrow-down',\n 'fa-long-arrow-left',\n 'fa-long-arrow-right',\n 'fa-long-arrow-up',\n 'fa-magic',\n 'fa-magnet',\n 'fa-mail-forward',\n 'fa-mail-reply',\n 'fa-mail-reply-all',\n 'fa-male',\n 'fa-map-marker',\n 'fa-mars',\n 'fa-mars-double',\n 'fa-mars-stroke',\n 'fa-mars-stroke-h',\n 'fa-mars-stroke-v',\n 'fa-maxcdn',\n 'fa-meanpath',\n 'fa-medium',\n 'fa-medkit',\n 'fa-meh-o',\n 'fa-mercury',\n 'fa-microphone',\n 'fa-microphone-slash',\n 'fa-minus',\n 'fa-minus-circle',\n 'fa-minus-square',\n 'fa-minus-square-o',\n 'fa-mobile',\n 'fa-money',\n 'fa-moon-o',\n 'fa-motorcycle',\n 'fa-music',\n 'fa-neuter',\n 'fa-newspaper-o',\n 'fa-openid',\n 'fa-outdent',\n 'fa-pagelines',\n 'fa-paint-brush',\n 'fa-paper-plane',\n 'fa-paper-plane-o',\n 'fa-paperclip',\n 'fa-paragraph',\n 'fa-paste',\n 'fa-pause',\n 'fa-paw',\n 'fa-paypal',\n 'fa-pencil',\n 'fa-pencil-square',\n 'fa-pencil-square-o',\n 'fa-phone',\n 'fa-phone-square',\n 'fa-picture-o',\n 'fa-pie-chart',\n 'fa-pied-piper',\n 'fa-pied-piper-alt',\n 'fa-pinterest',\n 'fa-pinterest-p',\n 'fa-pinterest-square',\n 'fa-plane',\n 'fa-play',\n 'fa-play-circle',\n 'fa-play-circle-o',\n 'fa-plug',\n 'fa-plus',\n 'fa-plus-circle',\n 'fa-plus-square',\n 'fa-plus-square-o',\n 'fa-power-off',\n 'fa-print',\n 'fa-puzzle-piece',\n 'fa-qq',\n 'fa-qrcode',\n 'fa-question',\n 'fa-question-circle',\n 'fa-quote-left',\n 'fa-quote-right',\n 'fa-random',\n 'fa-rebel',\n 'fa-recycle',\n 'fa-reddit',\n 'fa-reddit-square',\n 'fa-refresh',\n 'fa-remove',\n 'fa-renren',\n 'fa-repeat',\n 'fa-reply',\n 'fa-reply-all',\n 'fa-retweet',\n 'fa-road',\n 'fa-rocket',\n 'fa-rouble',\n 'fa-rss',\n 'fa-rss-square',\n 'fa-rub',\n 'fa-ruble',\n 'fa-rupee',\n 'fa-save',\n 'fa-scissors',\n 'fa-search',\n 'fa-search-minus',\n 'fa-search-plus',\n 'fa-sellsy',\n 'fa-server',\n 'fa-share',\n 'fa-share-alt',\n 'fa-share-alt-square',\n 'fa-share-square',\n 'fa-share-square-o',\n 'fa-shekel',\n 'fa-shield',\n 'fa-ship',\n 'fa-shirtsinbulk',\n 'fa-shopping-cart',\n 'fa-sign-in',\n 'fa-sign-out',\n 'fa-signal',\n 'fa-simplybuilt',\n 'fa-sitemap',\n 'fa-skyatlas',\n 'fa-skype',\n 'fa-slack',\n 'fa-sliders',\n 'fa-slideshare',\n 'fa-smile-o',\n 'fa-sort',\n 'fa-sort-alpha-asc',\n 'fa-sort-alpha-desc',\n 'fa-sort-amount-asc',\n 'fa-sort-amount-desc',\n 'fa-sort-asc',\n 'fa-sort-desc',\n 'fa-sort-numeric-asc',\n 'fa-sort-numeric-desc',\n 'fa-soundcloud',\n 'fa-space-shuttle',\n 'fa-spinner',\n 'fa-spoon',\n 'fa-spotify',\n 'fa-square',\n 'fa-square-o',\n 'fa-stack-exchange',\n 'fa-stack-overflow',\n 'fa-star',\n 'fa-star-half',\n 'fa-star-half-o',\n 'fa-star-o',\n 'fa-steam',\n 'fa-steam-square',\n 'fa-step-backward',\n 'fa-step-forward',\n 'fa-stethoscope',\n 'fa-stop',\n 'fa-street-view',\n 'fa-strikethrough',\n 'fa-stumbleupon',\n 'fa-stumbleupon-circle',\n 'fa-subscript',\n 'fa-subway',\n 'fa-suitcase',\n 'fa-sun-o',\n 'fa-superscript',\n 'fa-support',\n 'fa-table',\n 'fa-tablet',\n 'fa-tachometer',\n 'fa-tag',\n 'fa-tags',\n 'fa-tasks',\n 'fa-taxi',\n 'fa-tencent-weibo',\n 'fa-terminal',\n 'fa-text-height',\n 'fa-text-width',\n 'fa-th',\n 'fa-th-large',\n 'fa-th-list',\n 'fa-thumb-tack',\n 'fa-thumbs-down',\n 'fa-thumbs-o-down',\n 'fa-thumbs-o-up',\n 'fa-thumbs-up',\n 'fa-ticket',\n 'fa-times',\n 'fa-times-circle',\n 'fa-times-circle-o',\n 'fa-tint',\n 'fa-toggle-off',\n 'fa-toggle-on',\n 'fa-train',\n 'fa-transgender',\n 'fa-transgender-alt',\n 'fa-trash',\n 'fa-trash-o',\n 'fa-tree',\n 'fa-trello',\n 'fa-trophy',\n 'fa-truck',\n 'fa-try',\n 'fa-tty',\n 'fa-tumblr',\n 'fa-tumblr-square',\n 'fa-turkish-lira',\n 'fa-twitch',\n 'fa-twitter',\n 'fa-twitter-square',\n 'fa-umbrella',\n 'fa-underline',\n 'fa-undo',\n 'fa-university',\n 'fa-unlock',\n 'fa-unlock-alt',\n 'fa-unsorted',\n 'fa-upload',\n 'fa-usd',\n 'fa-user',\n 'fa-user-md',\n 'fa-user-plus',\n 'fa-user-secret',\n 'fa-user-times',\n 'fa-users',\n 'fa-venus',\n 'fa-venus-double',\n 'fa-venus-mars',\n 'fa-viacoin',\n 'fa-video-camera',\n 'fa-vimeo-square',\n 'fa-vine',\n 'fa-vk',\n 'fa-volume-down',\n 'fa-volume-off',\n 'fa-volume-up',\n 'fa-warning',\n 'fa-wechat',\n 'fa-weibo',\n 'fa-weixin',\n 'fa-whatsapp',\n 'fa-wheelchair',\n 'fa-wifi',\n 'fa-windows',\n 'fa-won',\n 'fa-wordpress',\n 'fa-wrench',\n 'fa-xing',\n 'fa-xing-square',\n 'fa-yahoo',\n 'fa-yelp',\n 'fa-youtube',\n 'fa-youtube-play',\n 'fa-youtube-square'\n ]\n },\n {\n family: 'Google icons',\n baseClass: 'material-icons',\n reference: 'content',\n link: 'https://www.google.com/design/icons/',\n icons: [\n '3d_rotation',\n 'access_alarm',\n 'access_alarms',\n 'access_time',\n 'accessibility',\n 'account_balance',\n 'account_balance_wallet',\n 'account_box',\n 'account_circle',\n 'adb',\n 'add',\n 'add_alarm',\n 'add_alert',\n 'add_box',\n 'add_circle',\n 'add_circle_outline',\n 'add_shopping_cart',\n 'add_to_photos',\n 'adjust',\n 'airline_seat_flat',\n 'airline_seat_flat_angled',\n 'airline_seat_individual_suite',\n 'airline_seat_legroom_extra',\n 'airline_seat_legroom_normal',\n 'airline_seat_legroom_reduced',\n 'airline_seat_recline_extra',\n 'airline_seat_recline_normal',\n 'airplanemode_active',\n 'airplanemode_inactive',\n 'airplay',\n 'alarm',\n 'alarm_add',\n 'alarm_off',\n 'alarm_on',\n 'album',\n 'android',\n 'announcement',\n 'apps',\n 'archive',\n 'arrow_back',\n 'arrow_drop_down',\n 'arrow_drop_down_circle',\n 'arrow_drop_up',\n 'arrow_forward',\n 'aspect_ratio',\n 'assessment',\n 'assignment',\n 'assignment_ind',\n 'assignment_late',\n 'assignment_return',\n 'assignment_returned',\n 'assignment_turned_in',\n 'assistant',\n 'assistant_photo',\n 'attach_file',\n 'attach_money',\n 'attachment',\n 'audiotrack',\n 'autorenew',\n 'av_timer',\n 'backspace',\n 'backup',\n 'battery_alert',\n 'battery_charging_full',\n 'battery_full',\n 'battery_std',\n 'battery_unknown',\n 'beenhere',\n 'block',\n 'bluetooth',\n 'bluetooth_audio',\n 'bluetooth_connected',\n 'bluetooth_disabled',\n 'bluetooth_searching',\n 'blur_circular',\n 'blur_linear',\n 'blur_off',\n 'blur_on',\n 'book',\n 'bookmark',\n 'bookmark_border',\n 'border_all',\n 'border_bottom',\n 'border_clear',\n 'border_color',\n 'border_horizontal',\n 'border_inner',\n 'border_left',\n 'border_outer',\n 'border_right',\n 'border_style',\n 'border_top',\n 'border_vertical',\n 'brightness_1',\n 'brightness_2',\n 'brightness_3',\n 'brightness_4',\n 'brightness_5',\n 'brightness_6',\n 'brightness_7',\n 'brightness_auto',\n 'brightness_high',\n 'brightness_low',\n 'brightness_medium',\n 'broken_image',\n 'brush',\n 'bug_report',\n 'build',\n 'business',\n 'cached',\n 'cake',\n 'call',\n 'call_end',\n 'call_made',\n 'call_merge',\n 'call_missed',\n 'call_received',\n 'call_split',\n 'camera',\n 'camera_alt',\n 'camera_enhance',\n 'camera_front',\n 'camera_rear',\n 'camera_roll',\n 'cancel',\n 'card_giftcard',\n 'card_membership',\n 'card_travel',\n 'cast',\n 'cast_connected',\n 'center_focus_strong',\n 'center_focus_weak',\n 'change_history',\n 'chat',\n 'chat_bubble',\n 'chat_bubble_outline',\n 'check',\n 'check_box',\n 'check_box_outline_blank',\n 'check_circle',\n 'chevron_left',\n 'chevron_right',\n 'chrome_reader_mode',\n 'class',\n 'clear',\n 'clear_all',\n 'close',\n 'closed_caption',\n 'cloud',\n 'cloud_circle',\n 'cloud_done',\n 'cloud_download',\n 'cloud_off',\n 'cloud_queue',\n 'cloud_upload',\n 'code',\n 'collections',\n 'collections_bookmark',\n 'color_lens',\n 'colorize',\n 'comment',\n 'compare',\n 'computer',\n 'confirmation_number',\n 'contact_phone',\n 'contacts',\n 'content_copy',\n 'content_cut',\n 'content_paste',\n 'control_point',\n 'control_point_duplicate',\n 'create',\n 'credit_card',\n 'crop',\n 'crop_16_9',\n 'crop_3_2',\n 'crop_5_4',\n 'crop_7_5',\n 'crop_din',\n 'crop_free',\n 'crop_landscape',\n 'crop_original',\n 'crop_portrait',\n 'crop_square',\n 'dashboard',\n 'data_usage',\n 'dehaze',\n 'delete',\n 'description',\n 'desktop_mac',\n 'desktop_windows',\n 'details',\n 'developer_board',\n 'developer_mode',\n 'device_hub',\n 'devices',\n 'dialer_sip',\n 'dialpad',\n 'directions',\n 'directions_bike',\n 'directions_boat',\n 'directions_bus',\n 'directions_car',\n 'directions_railway',\n 'directions_run',\n 'directions_subway',\n 'directions_transit',\n 'directions_walk',\n 'disc_full',\n 'dns',\n 'do_not_disturb',\n 'do_not_disturb_alt',\n 'dock',\n 'domain',\n 'done',\n 'done_all',\n 'drafts',\n 'drive_eta',\n 'dvr',\n 'edit',\n 'eject',\n 'email',\n 'equalizer',\n 'error',\n 'error_outline',\n 'event',\n 'event_available',\n 'event_busy',\n 'event_note',\n 'event_seat',\n 'exit_to_app',\n 'expand_less',\n 'expand_more',\n 'explicit',\n 'explore',\n 'exposure',\n 'exposure_neg_1',\n 'exposure_neg_2',\n 'exposure_plus_1',\n 'exposure_plus_2',\n 'exposure_zero',\n 'extension',\n 'face',\n 'fast_forward',\n 'fast_rewind',\n 'favorite',\n 'favorite_border',\n 'feedback',\n 'file_download',\n 'file_upload',\n 'filter',\n 'filter_1',\n 'filter_2',\n 'filter_3',\n 'filter_4',\n 'filter_5',\n 'filter_6',\n 'filter_7',\n 'filter_8',\n 'filter_9',\n 'filter_9_plus',\n 'filter_b_and_w',\n 'filter_center_focus',\n 'filter_drama',\n 'filter_frames',\n 'filter_hdr',\n 'filter_list',\n 'filter_none',\n 'filter_tilt_shift',\n 'filter_vintage',\n 'find_in_page',\n 'find_replace',\n 'flag',\n 'flare',\n 'flash_auto',\n 'flash_off',\n 'flash_on',\n 'flight',\n 'flight_land',\n 'flight_takeoff',\n 'flip',\n 'flip_to_back',\n 'flip_to_front',\n 'folder',\n 'folder_open',\n 'folder_shared',\n 'folder_special',\n 'font_download',\n 'format_align_center',\n 'format_align_justify',\n 'format_align_left',\n 'format_align_right',\n 'format_bold',\n 'format_clear',\n 'format_color_fill',\n 'format_color_reset',\n 'format_color_text',\n 'format_indent_decrease',\n 'format_indent_increase',\n 'format_italic',\n 'format_line_spacing',\n 'format_list_bulleted',\n 'format_list_numbered',\n 'format_paint',\n 'format_quote',\n 'format_size',\n 'format_strikethrough',\n 'format_textdirection_l_to_r',\n 'format_textdirection_r_to_l',\n 'format_underlined',\n 'forum',\n 'forward',\n 'forward_10',\n 'forward_30',\n 'forward_5',\n 'fullscreen',\n 'fullscreen_exit',\n 'functions',\n 'gamepad',\n 'games',\n 'gesture',\n 'get_app',\n 'gif',\n 'gps_fixed',\n 'gps_not_fixed',\n 'gps_off',\n 'grade',\n 'gradient',\n 'grain',\n 'graphic_eq',\n 'grid_off',\n 'grid_on',\n 'group',\n 'group_add',\n 'group_work',\n 'hd',\n 'hdr_off',\n 'hdr_on',\n 'hdr_strong',\n 'hdr_weak',\n 'headset',\n 'headset_mic',\n 'healing',\n 'hearing',\n 'help',\n 'help_outline',\n 'high_quality',\n 'highlight_off',\n 'history',\n 'home',\n 'hotel',\n 'hourglass_empty',\n 'hourglass_full',\n 'http',\n 'https',\n 'image',\n 'image_aspect_ratio',\n 'import_export',\n 'inbox',\n 'indeterminate_check_box',\n 'info',\n 'info_outline',\n 'input',\n 'insert_chart',\n 'insert_comment',\n 'insert_drive_file',\n 'insert_emoticon',\n 'insert_invitation',\n 'insert_link',\n 'insert_photo',\n 'invert_colors',\n 'invert_colors_off',\n 'iso',\n 'keyboard',\n 'keyboard_arrow_down',\n 'keyboard_arrow_left',\n 'keyboard_arrow_right',\n 'keyboard_arrow_up',\n 'keyboard_backspace',\n 'keyboard_capslock',\n 'keyboard_hide',\n 'keyboard_return',\n 'keyboard_tab',\n 'keyboard_voice',\n 'label',\n 'label_outline',\n 'landscape',\n 'language',\n 'laptop',\n 'laptop_chromebook',\n 'laptop_mac',\n 'laptop_windows',\n 'launch',\n 'layers',\n 'layers_clear',\n 'leak_add',\n 'leak_remove',\n 'lens',\n 'library_add',\n 'library_books',\n 'library_music',\n 'link',\n 'list',\n 'live_help',\n 'live_tv',\n 'local_activity',\n 'local_airport',\n 'local_atm',\n 'local_bar',\n 'local_cafe',\n 'local_car_wash',\n 'local_convenience_store',\n 'local_dining',\n 'local_drink',\n 'local_florist',\n 'local_gas_station',\n 'local_grocery_store',\n 'local_hospital',\n 'local_hotel',\n 'local_laundry_service',\n 'local_library',\n 'local_mall',\n 'local_movies',\n 'local_offer',\n 'local_parking',\n 'local_pharmacy',\n 'local_phone',\n 'local_pizza',\n 'local_play',\n 'local_post_office',\n 'local_printshop',\n 'local_see',\n 'local_shipping',\n 'local_taxi',\n 'location_city',\n 'location_disabled',\n 'location_off',\n 'location_on',\n 'location_searching',\n 'lock',\n 'lock_open',\n 'lock_outline',\n 'looks',\n 'looks_3',\n 'looks_4',\n 'looks_5',\n 'looks_6',\n 'looks_one',\n 'looks_two',\n 'loop',\n 'loupe',\n 'loyalty',\n 'mail',\n 'map',\n 'markunread',\n 'markunread_mailbox',\n 'memory',\n 'menu',\n 'merge_type',\n 'message',\n 'mic',\n 'mic_none',\n 'mic_off',\n 'mms',\n 'mode_comment',\n 'mode_edit',\n 'money_off',\n 'monochrome_photos',\n 'mood',\n 'mood_bad',\n 'more',\n 'more_horiz',\n 'more_vert',\n 'mouse',\n 'movie',\n 'movie_creation',\n 'music_note',\n 'my_location',\n 'nature',\n 'nature_people',\n 'navigate_before',\n 'navigate_next',\n 'navigation',\n 'network_cell',\n 'network_locked',\n 'network_wifi',\n 'new_releases',\n 'nfc',\n 'no_sim',\n 'not_interested',\n 'note_add',\n 'notifications',\n 'notifications_active',\n 'notifications_none',\n 'notifications_off',\n 'notifications_paused',\n 'offline_pin',\n 'ondemand_video',\n 'open_in_browser',\n 'open_in_new',\n 'open_with',\n 'pages',\n 'pageview',\n 'palette',\n 'panorama',\n 'panorama_fish_eye',\n 'panorama_horizontal',\n 'panorama_vertical',\n 'panorama_wide_angle',\n 'party_mode',\n 'pause',\n 'pause_circle_filled',\n 'pause_circle_outline',\n 'payment',\n 'people',\n 'people_outline',\n 'perm_camera_mic',\n 'perm_contact_calendar',\n 'perm_data_setting',\n 'perm_device_information',\n 'perm_identity',\n 'perm_media',\n 'perm_phone_msg',\n 'perm_scan_wifi',\n 'person',\n 'person_add',\n 'person_outline',\n 'person_pin',\n 'personal_video',\n 'phone',\n 'phone_android',\n 'phone_bluetooth_speaker',\n 'phone_forwarded',\n 'phone_in_talk',\n 'phone_iphone',\n 'phone_locked',\n 'phone_missed',\n 'phone_paused',\n 'phonelink',\n 'phonelink_erase',\n 'phonelink_lock',\n 'phonelink_off',\n 'phonelink_ring',\n 'phonelink_setup',\n 'photo',\n 'photo_album',\n 'photo_camera',\n 'photo_library',\n 'photo_size_select_actual',\n 'photo_size_select_large',\n 'photo_size_select_small',\n 'picture_as_pdf',\n 'picture_in_picture',\n 'pin_drop',\n 'place',\n 'play_arrow',\n 'play_circle_filled',\n 'play_circle_outline',\n 'play_for_work',\n 'playlist_add',\n 'plus_one',\n 'poll',\n 'polymer',\n 'portable_wifi_off',\n 'portrait',\n 'power',\n 'power_input',\n 'power_settings_new',\n 'present_to_all',\n 'print',\n 'public',\n 'publish',\n 'query_builder',\n 'question_answer',\n 'queue',\n 'queue_music',\n 'radio',\n 'radio_button_checked',\n 'radio_button_unchecked',\n 'rate_review',\n 'receipt',\n 'recent_actors',\n 'redeem',\n 'redo',\n 'refresh',\n 'remove',\n 'remove_circle',\n 'remove_circle_outline',\n 'remove_red_eye',\n 'reorder',\n 'repeat',\n 'repeat_one',\n 'replay',\n 'replay_10',\n 'replay_30',\n 'replay_5',\n 'reply',\n 'reply_all',\n 'report',\n 'report_problem',\n 'restaurant_menu',\n 'restore',\n 'ring_volume',\n 'room',\n 'rotate_90_degrees_ccw',\n 'rotate_left',\n 'rotate_right',\n 'router',\n 'satellite',\n 'save',\n 'scanner',\n 'schedule',\n 'school',\n 'screen_lock_landscape',\n 'screen_lock_portrait',\n 'screen_lock_rotation',\n 'screen_rotation',\n 'sd_card',\n 'sd_storage',\n 'search',\n 'security',\n 'select_all',\n 'send',\n 'settings',\n 'settings_applications',\n 'settings_backup_restore',\n 'settings_bluetooth',\n 'settings_brightness',\n 'settings_cell',\n 'settings_ethernet',\n 'settings_input_antenna',\n 'settings_input_component',\n 'settings_input_composite',\n 'settings_input_hdmi',\n 'settings_input_svideo',\n 'settings_overscan',\n 'settings_phone',\n 'settings_power',\n 'settings_remote',\n 'settings_system_daydream',\n 'settings_voice',\n 'share',\n 'shop',\n 'shop_two',\n 'shopping_basket',\n 'shopping_cart',\n 'shuffle',\n 'signal_cellular_4_bar',\n 'signal_cellular_connected_no_internet_4_bar',\n 'signal_cellular_no_sim',\n 'signal_cellular_null',\n 'signal_cellular_off',\n 'signal_wifi_4_bar',\n 'signal_wifi_4_bar_lock',\n 'signal_wifi_off',\n 'sim_card',\n 'sim_card_alert',\n 'skip_next',\n 'skip_previous',\n 'slideshow',\n 'smartphone',\n 'sms',\n 'sms_failed',\n 'snooze',\n 'sort',\n 'sort_by_alpha',\n 'space_bar',\n 'speaker',\n 'speaker_group',\n 'speaker_notes',\n 'speaker_phone',\n 'spellcheck',\n 'star',\n 'star_border',\n 'star_half',\n 'stars',\n 'stay_current_landscape',\n 'stay_current_portrait',\n 'stay_primary_landscape',\n 'stay_primary_portrait',\n 'stop',\n 'storage',\n 'store',\n 'store_mall_directory',\n 'straighten',\n 'strikethrough_s',\n 'style',\n 'subject',\n 'subtitles',\n 'supervisor_account',\n 'surround_sound',\n 'swap_calls',\n 'swap_horiz',\n 'swap_vert',\n 'swap_vertical_circle',\n 'switch_camera',\n 'switch_video',\n 'sync',\n 'sync_disabled',\n 'sync_problem',\n 'system_update',\n 'system_update_alt',\n 'tab',\n 'tab_unselected',\n 'tablet',\n 'tablet_android',\n 'tablet_mac',\n 'tag_faces',\n 'tap_and_play',\n 'terrain',\n 'text_format',\n 'textsms',\n 'texture',\n 'theaters',\n 'thumb_down',\n 'thumb_up',\n 'thumbs_up_down',\n 'time_to_leave',\n 'timelapse',\n 'timer',\n 'timer_10',\n 'timer_3',\n 'timer_off',\n 'toc',\n 'today',\n 'toll',\n 'tonality',\n 'toys',\n 'track_changes',\n 'traffic',\n 'transform',\n 'translate',\n 'trending_down',\n 'trending_flat',\n 'trending_up',\n 'tune',\n 'turned_in',\n 'turned_in_not',\n 'tv',\n 'undo',\n 'unfold_less',\n 'unfold_more',\n 'usb',\n 'verified_user',\n 'vertical_align_bottom',\n 'vertical_align_center',\n 'vertical_align_top',\n 'vibration',\n 'video_library',\n 'videocam',\n 'videocam_off',\n 'view_agenda',\n 'view_array',\n 'view_carousel',\n 'view_column',\n 'view_comfy',\n 'view_compact',\n 'view_day',\n 'view_headline',\n 'view_list',\n 'view_module',\n 'view_quilt',\n 'view_stream',\n 'view_week',\n 'vignette',\n 'visibility',\n 'visibility_off',\n 'voice_chat',\n 'voicemail',\n 'volume_down',\n 'volume_mute',\n 'volume_off',\n 'volume_up',\n 'vpn_key',\n 'vpn_lock',\n 'wallpaper',\n 'warning',\n 'watch',\n 'wb_auto',\n 'wb_cloudy',\n 'wb_incandescent',\n 'wb_iridescent',\n 'wb_sunny',\n 'wc',\n 'web',\n 'whatshot',\n 'widgets',\n 'wifi',\n 'wifi_lock',\n 'wifi_tethering',\n 'work',\n 'wrap_text',\n 'youtube_searched_for',\n 'zoom_in',\n 'zoom_out'\n ]\n }\n];\n"
},
{
"path": "lib/shared/helpers/load-fonts.js",
"content": "import Q from 'q';\n\nexport default function loadFonts (body) {\n const {dispatch: callback, webfontloader, type} = body;\n\n return new Q()\n .then(() => {\n const deferred = Q.defer();\n let promise = deferred.promise;\n const newFonts = {};\n\n function loadingFontsFinished () {\n deferred.resolve(newFonts);\n }\n\n function fontActive (familyName, fvd) {\n if (!newFonts[familyName]) {\n newFonts[familyName] = [];\n }\n newFonts[familyName].push(fvd);\n }\n\n if (Object.keys(webfontloader).length === 0) {\n deferred.resolve(newFonts);\n } else {\n const params = {\n active: loadingFontsFinished,\n fontactive: fontActive,\n ...webfontloader\n };\n\n WebFont.load(params); // eslint-disable-line no-undef\n }\n\n if (callback) {\n promise = promise.then((fonts) => {\n callback({type, fonts});\n });\n }\n\n return promise;\n });\n}\n"
},
{
"path": "lib/shared/helpers/mime-types.js",
"content": "const IMAGE_MIME_TYPES = [\n 'image/jpeg',\n 'image/png',\n 'image/webp',\n 'image/tiff',\n 'image/gif',\n 'image/vnd.microsoft.icon',\n 'image/x-icon'\n];\nconst ICON_MIME_TYPES = ['image/vnd.microsoft.icon', 'image/x-icon'];\nconst VIDEO_MIME_TYPES = ['video/mp4', 'video/webm', 'video/ogg'];\nconst AUDIO_MIME_TYPES = ['audio/mp3', 'audio/mpeg', 'audio/ogg', 'audio/wav'];\n\nexport function getMediaType (mimeType) {\n let result = '';\n if (ICON_MIME_TYPES.indexOf(mimeType) !== -1) {\n result = 'favicon';\n } else if (IMAGE_MIME_TYPES.indexOf(mimeType) !== -1) {\n result = 'image';\n } else if (VIDEO_MIME_TYPES.indexOf(mimeType) !== -1) {\n result = 'video';\n } else if (AUDIO_MIME_TYPES.indexOf(mimeType) !== -1) {\n result = 'audio';\n }\n return result;\n}\n\nexport function getMimeTypes (type) {\n switch (type) {\n case 'favicon':\n return ICON_MIME_TYPES;\n case 'image':\n return IMAGE_MIME_TYPES;\n case 'video':\n return VIDEO_MIME_TYPES;\n case 'audio':\n return AUDIO_MIME_TYPES;\n default:\n return false;\n }\n}\n"
},
{
"path": "lib/shared/helpers/parse-fields.js",
"content": "import forEach from 'lodash.foreach';\n\nexport default function parseFields (data, keys) {\n let result = data;\n if (data) {\n result = Object.assign({}, data);\n forEach(keys, (key) => {\n if (result[key] && typeof result[key] === 'string') {\n result[key] = JSON.parse(result[key]);\n }\n });\n }\n return result;\n}\n"
},
{
"path": "lib/shared/helpers/parse-settings.js",
"content": "import forEach from 'lodash.foreach';\n\nexport default function parseSettings (_settings) {\n const settings = {};\n\n forEach(_settings, (setting) => {\n settings[setting._id] = setting.value;\n });\n\n return settings;\n}\n"
},
{
"path": "lib/shared/helpers/request.js",
"content": "import request from 'superagent';\nimport Q from 'q';\n\nexport default function doRequest (body) {\n const {dispatch: callback, query, variables, type, params} = body;\n\n return new Q()\n .then(() => {\n const deferred = Q.defer();\n let promise = deferred.promise;\n\n const req = request\n .post('/graphql')\n .set('Content-Type', 'application/json')\n .set('Accept', 'application/json')\n .send({query, variables});\n\n req\n .end((error, res) => {\n if (error) {\n deferred.reject(error);\n } else {\n deferred.resolve(res.body);\n }\n });\n\n if (callback) {\n promise = promise.then(({data, errors}) => {\n callback({type, data, errors, params});\n return data;\n });\n }\n\n return promise;\n });\n}\n"
},
{
"path": "lib/shared/helpers/schema-filter-default-options.js",
"content": "export default function getFilterDefaultOptions (type) {\n switch (type) {\n case 'Date':\n return {\n fromGran: 'day',\n fromValue: 1,\n toGran: 'present',\n toValue: 1\n };\n case 'String':\n return {\n op: 'equal',\n value: ''\n };\n case 'Boolean':\n return {\n value: 'true'\n };\n default:\n return {\n op: 'set'\n };\n }\n}\n"
},
{
"path": "lib/shared/helpers/schema-link-actions.js",
"content": "import forEach from 'lodash.foreach';\nimport Utils from 'helpers/utils';\n\nexport default function (pageBuilder, linkedElement, property) {\n const actionsValues = [];\n const actionsLabels = [];\n const ElementClass = pageBuilder.elements[linkedElement.tag];\n\n // Content\n if (linkedElement.tag === 'TextBox') {\n actionsLabels.push('Content');\n actionsValues.push('children');\n }\n\n // Settings\n if (ElementClass.propsSchema && ElementClass.propsSchema.length > 0) {\n // Check settings that match property type\n const propsList = Utils.getPropSchemaList(ElementClass.propsSchema);\n forEach(propsList, propSchema => {\n if (propSchema.id && propSchema.type === property.type) {\n actionsLabels.push(propSchema.label);\n actionsValues.push(propSchema.id);\n }\n });\n }\n\n // Display\n const extraLabel = (property.type === 'Boolean' ? 'true' : 'not empty');\n actionsLabels.push(`Visible (when ${extraLabel})`);\n actionsValues.push('show');\n actionsLabels.push(`Hidden (when ${extraLabel})`);\n actionsValues.push('hide');\n\n return {\n labels: actionsLabels,\n values: actionsValues\n };\n}\n"
},
{
"path": "lib/shared/helpers/schema-static-properties.js",
"content": "export default [\n {\n id: 'title',\n title: 'Title',\n type: 'String'\n },\n {\n id: 'slug',\n title: 'Slug',\n type: 'String'\n },\n {\n id: 'date',\n title: 'Created Date',\n type: 'Date'\n },\n {\n id: 'publishedDate',\n title: 'Published Date',\n type: 'Date'\n },\n {\n id: 'updatedDate',\n title: 'Updated Date',\n type: 'Date'\n }\n];\n"
},
{
"path": "lib/shared/helpers/stringify-fields.js",
"content": "import forEach from 'lodash.foreach';\n\nexport default function stringifyFields (data, keys) {\n let result = data;\n if (data) {\n result = Object.assign({}, data);\n forEach(keys, (key) => {\n if (result[key]) {\n result[key] = JSON.stringify(result[key]);\n }\n });\n }\n return result;\n}\n"
},
{
"path": "lib/shared/helpers/styles-manager.js",
"content": "import find from 'lodash.find';\nimport forEach from 'lodash.foreach';\nimport {Stylesheet} from 'relax-jss';\n\nimport getElementStyleValues from './get-element-style-values';\n\nclass StylesManager {\n constructor () {\n this.stylesMap = {};\n this.singleStylesheet = new Stylesheet();\n }\n\n changeStyle (id, styleOptions, options, displayOptions, display, single) {\n const stylesheet = single && this.singleStylesheet || new Stylesheet();\n const rules = styleOptions.rules(getElementStyleValues(\n styleOptions.defaults,\n options,\n displayOptions,\n display\n ));\n const classMap = stylesheet.createRules(rules);\n\n this.stylesMap = Object.assign({}, this.stylesMap, {\n [id]: {\n options,\n displayOptions,\n display,\n stylesheet,\n classMap\n }\n });\n\n return classMap;\n }\n\n getClassMap (id, styleOptions, options, displayOptions, display, single) {\n let classMap;\n const styleMap = this.stylesMap[id];\n if (!styleMap ||\n styleMap &&\n (styleMap.options !== options ||\n display !== 'desktop' &&\n styleMap.displayOptions !== displayOptions ||\n styleMap.displayOptions &&\n styleMap.display !== display)\n ) {\n classMap = this.changeStyle(id, styleOptions, options, displayOptions, display, single);\n } else {\n classMap = styleMap.classMap;\n }\n return classMap;\n }\n\n getStyleOptions (style, elements) {\n let result = style;\n if (typeof style === 'string') {\n forEach(elements, (element) => {\n if (element.style && typeof element.style === 'object' && element.style.type === style) {\n result = element.style;\n }\n });\n }\n return result;\n }\n\n processElement (element, elementProps, ElementClass, styles, elements, display, single = false) {\n let classMap = {};\n if (ElementClass && ElementClass.style) {\n const styleId = elementProps && elementProps.style || 'no_style';\n const styleOptions = this.getStyleOptions(ElementClass.style, elements);\n\n if (styleId === 'no_style' && !element.style) {\n // Default style\n classMap = this.getClassMap(\n styleOptions.type,\n styleOptions,\n styleOptions.defaults,\n element.displayStyle,\n display,\n single\n );\n } else {\n // Apply style\n if (styleId === 'no_style') {\n classMap = this.getClassMap(\n element.id,\n styleOptions,\n element.style,\n element.displayStyle,\n display,\n single\n );\n } else {\n const style = find(styles, {_id: styleId});\n if (style) {\n classMap = this.getClassMap(\n styleId,\n styleOptions,\n style.options,\n style.displayOptions,\n display,\n single\n );\n }\n }\n }\n }\n return classMap;\n }\n}\n\nexport default new StylesManager();\n"
},
{
"path": "lib/shared/helpers/stylesheet.js",
"content": "import {Stylesheet} from 'relax-jss';\nexport default new Stylesheet();\n"
},
{
"path": "lib/shared/helpers/utils.js",
"content": "import cloneDeep from 'lodash.clonedeep';\nimport forEach from 'lodash.foreach';\nimport Colr from 'colr';\n\nimport {getColorString} from './colors';\n\nconst utils = {\n isPercentage (str) {\n return str && str[str.length - 1] === '%';\n },\n\n roundSnap (value, snaps) {\n let result = Math.round(value);\n forEach(snaps, (snap) => {\n if (value > snap - 1 && value < snap + 1) {\n result = snap;\n }\n });\n return result;\n },\n\n pointsDistance (p1, p2) {\n const distX = p1.x - p2.x;\n const distY = p1.y - p2.y;\n return Math.sqrt(distX * distX + distY * distY);\n },\n\n getPointInLineByPerc (pointA, pointB, perc) {\n // PA + t / 100 * (PA - PB)\n return {\n x: pointA.x + perc / 100 * (pointB.x - pointA.x),\n y: pointA.y + perc / 100 * (pointB.y - pointA.y)\n };\n },\n\n validateGATrackingId (str) {\n return /(UA|YT|MO)-\\d+-\\d+/i.test(str);\n },\n\n makeBorder (style, property, border) {\n if (border.style !== 'none' && border.width !== 0) {\n style[property] = `${border.width}px ${border.style} ${getColorString(border.color)}`;\n }\n },\n\n applyBorders (style, borderObj) {\n if (borderObj && borderObj.top && borderObj.left && borderObj.right && borderObj.bottom) {\n if (borderObj.equal) {\n this.makeBorder(style, 'border', borderObj.top);\n } else {\n this.makeBorder(style, 'borderTop', borderObj.top);\n this.makeBorder(style, 'borderRight', borderObj.right);\n this.makeBorder(style, 'borderBottom', borderObj.bottom);\n this.makeBorder(style, 'borderLeft', borderObj.left);\n }\n }\n },\n\n applyTextShadows (style, shadows) {\n const map = shadows.map(\n (shadow) => `${shadow.x} ${shadow.y} ${shadow.blur} ${getColorString(shadow.color)}`\n );\n style.textShadow = map.toString();\n },\n\n applyBoxShadows (style, shadows) {\n const map = shadows.map(\n (shadow) => {\n const type = shadow.type === 'inset' ? 'inset ' : '';\n return `${type}${shadow.x} ${shadow.y} ${shadow.blur} ${shadow.spread} ${getColorString(shadow.color)}`;\n }\n );\n const str = map.toString();\n style.boxShadow = str;\n },\n\n parseYoutubeURL (url) {\n const regExp = /^.*((youtu.be\\/)|(v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#&\\?]*).*/;\n const match = url.match(regExp);\n let result;\n if (match && match[7].length === 11) {\n result = match[7];\n } else {\n result = false;\n }\n return result;\n },\n\n parseVimeoURL (url) {\n const regExp = /^.*(vimeo\\.com\\/)((channels\\/[A-z]+\\/)|(groups\\/[A-z]+\\/videos\\/))?([0-9]+)/;\n const match = regExp.exec(url);\n let result;\n if (match && match[5].length === 9) {\n result = match[5];\n } else {\n result = false;\n }\n return result;\n },\n\n parseDailymotionURL (url) {\n const regExp = /^.+dailymotion.com\\/((video|hub)\\/([^_]+))?[^#]*(#video=([^_&]+))?/;\n const match = url.match(regExp);\n let result;\n if (match && match.length > 2) {\n result = match[5] || match[3];\n } else {\n result = false;\n }\n return result;\n },\n\n parseColumnsDisplay (value, numChildren, multiRows, idChanged = -1) {\n let parsedValue;\n\n if (value && value.constructor === Array) {\n parsedValue = value;\n } else {\n parsedValue = [];\n }\n\n // Check missing\n if (parsedValue.length < numChildren) {\n let difference = numChildren - parsedValue.length;\n\n for (difference; difference > 0; difference--) {\n parsedValue.push({\n width: multiRows ? 'block' : 'auto',\n break: false,\n widthPerc: '50%'\n });\n }\n }\n\n // Check if too much\n if (parsedValue.length > numChildren) {\n const difference = parsedValue.length - numChildren;\n parsedValue.splice(-difference, difference);\n }\n\n // Go through all to check rules\n if (multiRows && numChildren > 1) {\n let previous = 'block';\n let i;\n for (i = 0; i < parsedValue.length; i++) {\n if (previous === 'block' && parsedValue[i].width !== 'block') {\n if (i === numChildren - 1) {\n if (idChanged === i) {\n parsedValue[i - 1].width = 'auto';\n } else {\n parsedValue[i].width = 'block';\n }\n } else if (parsedValue[i + 1].width === 'block') {\n if (idChanged === i) {\n parsedValue[i + 1].width = 'auto';\n } else {\n parsedValue[i].width = 'block';\n }\n }\n }\n\n if (parsedValue[i].width === 'block' ||\n previous === 'block' ||\n (i >= 2 && parsedValue[i - 2].width === 'block') ||\n i === parsedValue.length - 1) {\n parsedValue[i].break = false;\n }\n\n if (parsedValue[i].break && i < parsedValue.length - 1) {\n if (parsedValue[i + 1].width === 'block') {\n if (idChanged === i + 1) {\n parsedValue[i].break = false;\n } else {\n parsedValue[i + 1].width = 'auto';\n }\n }\n }\n\n if (!parsedValue[i].widthPerc) {\n parsedValue[i].widthPerc = '50%';\n }\n\n previous = parsedValue[i].width;\n }\n }\n\n // Calculate auto widths\n let it;\n let it1;\n for (it = 0; it < parsedValue.length; it++) {\n if (parsedValue[it].width !== 'block') {\n let countAutoColumns = 0;\n let availableAutoSpace = 100;\n\n for (it1 = it; it1 < parsedValue.length; it1++) {\n if ((parsedValue[it1].break && it1 !== it) || parsedValue[it1].width === 'block') {\n break;\n }\n\n if (parsedValue[it1].width === 'custom') {\n availableAutoSpace -= parseInt(parsedValue[it1].widthPerc, 10);\n } else if (parsedValue[it1].width === 'auto') {\n countAutoColumns ++;\n }\n }\n\n // calc and apply width\n if (countAutoColumns > 0) {\n const widthCalc = Math.round(availableAutoSpace / countAutoColumns * 100) / 100;\n\n for (it; it < it1; it++) {\n if (parsedValue[it].width === 'auto') {\n parsedValue[it].widthPerc = `${widthCalc}%`;\n }\n }\n\n it--;\n } else {\n it = it1 - 1;\n }\n }\n }\n\n return parsedValue;\n },\n\n getOffsetRect (elem) {\n const box = elem.getBoundingClientRect();\n\n const body = document.body;\n const docElem = document.documentElement;\n\n const scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;\n const scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;\n\n const clientTop = docElem.clientTop || body.clientTop || 0;\n const clientLeft = docElem.clientLeft || body.clientLeft || 0;\n\n const top = box.top + scrollTop - clientTop;\n const left = box.left + scrollLeft - clientLeft;\n\n return {\n top: Math.round(top),\n left: Math.round(left),\n width: Math.round(box.right - box.left),\n height: Math.round(box.bottom - box.top)\n };\n },\n\n limitNumber (number, min, max) {\n let result = number;\n\n if (number < min) {\n result = min;\n } else if (number > max) {\n result = max;\n }\n\n return result;\n },\n\n hasClass (dom, className) {\n return dom.className.indexOf(className) !== -1;\n },\n\n addClass (dom, className) {\n if (!this.hasClass(dom, className)) {\n dom.className = `${dom.className} ${className}`;\n }\n },\n\n removeClass (dom, className) {\n let str = dom.className;\n str = str.replace(` ${className}`, '');\n str = str.replace(`${className} `, '');\n dom.className = str;\n },\n\n getBestImageVariation (variations, width, height = 0) {\n let variationReturn = false;\n\n forEach(variations, (variation) => {\n if (variation.dimension.width >= width &&\n variation.dimension.height >= height &&\n (variation.dimension.width - width < 100 || variation.dimension.heigh - height < 100)) {\n variationReturn = variation;\n }\n });\n\n return variationReturn;\n },\n\n getBestImageUrl (imageId, width = 0, height = 0) {\n let result = '';\n\n if (imageId && imageId !== '' && typeof imageId !== 'undefined') {\n result = `/api/media/resize/${imageId}/${width}/${height}`;\n }\n\n return result;\n },\n\n parseQueryUrl (url, query) {\n let resultUrl = url;\n let count = 0;\n forEach(query, (value, key) => {\n resultUrl += count === 0 ? '?' : '&';\n resultUrl += `${key}=`;\n resultUrl += typeof value === 'object' ? JSON.stringify(value) : value;\n count ++;\n });\n return resultUrl;\n },\n\n parseQueryString (queryString) {\n const params = {};\n let i;\n let l;\n\n // Split into key/value pairs\n const queries = queryString.split('&');\n\n // Convert the array of strings into an object\n for (i = 0, l = queries.length; i < l; i++) {\n const temp = queries[i].split('=');\n params[temp[0]] = temp[1];\n }\n\n return params;\n },\n\n _getPropSchemaListIt (propsSchema, list, defaultLabel = '') {\n let resultList = list;\n forEach(propsSchema, (propSchema) => {\n if (!propSchema.label && defaultLabel !== '') {\n propSchema.label = defaultLabel;\n }\n resultList.push(propSchema);\n if (propSchema.unlocks) {\n if (propSchema.unlocks.constructor === Array) {\n resultList = this._getPropSchemaListIt(propSchema.unlocks, resultList, propSchema.label);\n } else {\n forEach(propsSchema.unlocks, (propSchemaUnlocks) => {\n resultList = this._getPropSchemaListIt(propSchemaUnlocks, resultList);\n });\n }\n }\n });\n\n return resultList;\n },\n\n getPropSchemaList (propsSchema) {\n return this._getPropSchemaListIt(cloneDeep(propsSchema), []);\n },\n\n\n // Filers font family into more readable state ex: source-sans-pro into source sans pro\n filterFontFamily (str) {\n return str.replace(/-/g, ' ');\n },\n\n // Makes a fvd more readable\n filterFVD (fvd) {\n let str = '';\n\n // font weight\n const weightChar = fvd.charAt(1);\n str += `${weightChar}00 `;\n\n // font style\n // n: normal (default)\n // i: italic\n // o: oblique\n const styleChar = fvd.charAt(0);\n\n if (styleChar === 'n') {\n str += 'normal';\n } else if (styleChar === 'i') {\n str += 'italic';\n } else if (styleChar === 'o') {\n str += 'oblique';\n }\n\n return str;\n },\n\n getRGBA (hex, opacity) {\n const colr = Colr.fromHex(hex);\n const rgb = colr.toRgbObject();\n\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;\n },\n\n border (arr, size, style, color, opacity) {\n arr.border = `${size} ${style} ${utils.getRGBA(color, parseInt(opacity, 10) / 100.0)}`;\n arr.WebkitBackgroundClip = 'padding-box';\n arr.backgroundClip = 'padding-box';\n },\n\n isClient () {\n return typeof document !== 'undefined';\n },\n\n rounded (arr, corners) {\n arr.WebkitBorderRadius = corners;\n arr.MozBorderRadius = corners;\n arr.OBorderRadius = corners;\n arr.borderRadius = corners;\n },\n\n backgroundRGBA (arr, color, opacity) {\n arr.backgroundColor = utils.getRGBA(color, parseInt(opacity, 10) / 100.0);\n },\n\n transition (arr, to, time, ease) {\n const transition = `${to} ${time} ${ease}`;\n arr.transition = transition;\n arr.WebkitTransition = transition;\n arr.MozTransition = transition;\n arr.OTransition = transition;\n },\n\n translate (arr, x, y) {\n const translate = `translate(${x}, ${y})`;\n arr.transform = translate;\n arr.msTransform = translate;\n arr.MozTransform = translate;\n arr.WebkitTransform = translate;\n arr.OTransform = translate;\n },\n\n padding (arr, top, right, bottom, left) {\n arr.padding = `${top} ${right} ${bottom} ${left}`;\n },\n\n // Return json from a font format fvd (ex. input: i4, n4, n8 ...) https://github.com/typekit/fvd\n processFVD (style, fvd) {\n style.fontStyle = 'normal';\n style.fontWeight = 400;\n\n // font style\n // n: normal (default)\n // i: italic\n // o: oblique\n const styleChar = fvd.charAt(0);\n\n if (styleChar === 'i') {\n style.fontStyle = 'italic';\n } else if (styleChar === 'o') {\n style.fontStyle = 'oblique';\n }\n\n // font weight\n const weightChar = fvd.charAt(1);\n style.fontWeight = parseInt(`${weightChar}00`, 10);\n },\n\n getElementsSchemaLinks (schemaLinks) {\n const elementsLinks = {};\n if (schemaLinks) {\n forEach(schemaLinks, (links, propertyId) => {\n forEach(links, (link) => {\n elementsLinks[link.elementId] = elementsLinks[link.elementId] || [];\n elementsLinks[link.elementId].push({\n propertyId,\n action: link.action\n });\n });\n });\n }\n return elementsLinks;\n },\n\n alterSchemaElementProps (links, element, schemaEntry, elementProps = {}) {\n const changes = {};\n forEach(links, (link) => {\n const splitted = link.propertyId.split('#');\n let schemaEntryValue = schemaEntry;\n forEach(splitted, (pathKey) => {\n schemaEntryValue = schemaEntryValue[pathKey];\n });\n\n if (link.action === 'children') {\n if (schemaEntryValue) {\n changes.children = schemaEntryValue;\n } else {\n changes.display = false;\n }\n } else if (link.action === 'show' && (!schemaEntryValue || schemaEntryValue === '')) {\n changes.display = false;\n } else if (link.action === 'hide' && schemaEntryValue && schemaEntryValue !== '') {\n changes.display = false;\n } else if (link.action) { // setting\n elementProps[link.action] = schemaEntryValue;\n }\n });\n return Object.assign({}, element, changes);\n }\n};\n\nexport default utils;\n"
},
{
"path": "lib/shared/reducers/admin-menu.js",
"content": "import actionTypes from 'actions';\n\nconst defaultState = true;\n\nexport default function adminMenuReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.openAdminMenu:\n return true;\n case actionTypes.closeAdminMenu:\n return false;\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/display.js",
"content": "import actionTypes from 'actions';\n\nconst defaultState = 'desktop';\n\nexport default function displayReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.changeDisplay:\n return action.value;\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/dnd.js",
"content": "import actionTypes from 'actions';\n\nconst defaultState = {\n dragging: false,\n draggingData: {},\n dragInfo: false,\n dropInfo: false,\n droppableOrientation: 'vertical'\n};\n\nexport default function dndReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.startDragging:\n return Object.assign({}, state, {\n dragging: true,\n draggingData: action.draggingData,\n dragInfo: action.dragInfo\n });\n case actionTypes.onDroppable:\n return Object.assign({}, state, {\n dropInfo: action.dropInfo\n });\n case actionTypes.outDroppable:\n if (state.dropInfo && state.dropInfo.id === action.id) {\n return Object.assign({}, state, {\n dropInfo: false\n });\n }\n return state;\n case actionTypes.stopDragging:\n return Object.assign({}, defaultState);\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/fonts.js",
"content": "import actionTypes from 'actions';\nimport cloneDeep from 'lodash.clonedeep';\nimport forEach from 'lodash.foreach';\nimport Relate from 'relate-js';\n\nconst defaultState = {\n data: {\n previewText: 'Abc',\n previewLayout: 'grid', // grid || list\n input: {\n google: {\n input: '',\n valid: false\n },\n typekit: {\n input: '',\n valid: false\n },\n fontdeck: {\n input: '',\n valid: false\n },\n monotype: {\n input: '',\n valid: false\n },\n custom: {\n input: '',\n valid: false\n }\n },\n customFonts: [],\n fonts: {},\n webfontloader: {}\n },\n newCustom: null,\n errors: null\n};\n\nfunction parseSettings (_settings) {\n const settings = {};\n\n forEach(_settings, (setting) => {\n settings[setting._id] = setting.value;\n });\n\n return settings;\n}\n\nexport default function fontsReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case Relate.actionTypes.query:\n if (action.data.settings) {\n const parsed = parseSettings(action.data.settings);\n if (parsed.fonts) {\n return Object.assign({}, state, {\n data: JSON.parse(parsed.fonts),\n errors: action.errors\n });\n }\n }\n return state;\n case actionTypes.changeFontsPreviewText:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {\n previewText: action.value\n })\n });\n case actionTypes.changeFontsPreviewLayout:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {\n previewLayout: action.value\n })\n });\n case actionTypes.loadFonts:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {\n fonts: action.fonts\n })\n });\n case actionTypes.submitCustomFont:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {\n customFonts: [...state.data.customFonts, action.data.submitCustomFont]\n }),\n newCustom: action.data.submitCustomFont,\n errors: action.errors\n });\n case actionTypes.customFontIncluded: {\n const fontsDataClone = cloneDeep(state.data);\n fontsDataClone.webfontloader.custom = fontsDataClone.webfontloader.custom || {families: []};\n fontsDataClone.webfontloader.custom.families.push(state.newCustom.family);\n return Object.assign({}, state, {\n data: fontsDataClone,\n newCustom: null\n });\n }\n case actionTypes.removeCustomFont: {\n const fontsDataRemoveClone = cloneDeep(state.data);\n const id = action.data.removeCustomFont.id;\n forEach(fontsDataRemoveClone.customFonts, (obj, index) => {\n if (obj.id === id) {\n fontsDataRemoveClone.customFonts.splice(index, 1);\n\n const ind = fontsDataRemoveClone.webfontloader.custom.families.indexOf(obj.family);\n if (ind !== -1) {\n fontsDataRemoveClone.webfontloader.custom.families.splice(ind, 1);\n if (fontsDataRemoveClone.webfontloader.custom.families.length === 0) {\n delete fontsDataRemoveClone.webfontloader.custom;\n }\n }\n\n return false;\n }\n });\n return Object.assign({}, state, {\n data: fontsDataRemoveClone\n });\n }\n case actionTypes.changeFontInput: {\n const fontsClone = cloneDeep(state.data);\n const tab = action.tab;\n const value = action.value;\n let nowValid = false;\n let previousValid;\n\n if (tab === 0) {\n // Google fonts validation\n previousValid = state.data.input.google.valid;\n fontsClone.input.google.input = value;\n fontsClone.input.google.valid = false;\n\n const paramsStr = value.split('?');\n\n // Valid if has params\n if (paramsStr.length === 2) {\n const params = {};\n const re = /[?&]?([^=]+)=([^&]*)/g;\n let tokens = re.exec(paramsStr[1]);\n\n while (tokens) {\n params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);\n tokens = re.exec(paramsStr[1]);\n }\n\n if (params.family) {\n fontsClone.input.google.valid = true;\n nowValid = true;\n\n if (!fontsClone.webfontloader.google) {\n fontsClone.webfontloader.google = {\n families: []\n };\n } else {\n fontsClone.webfontloader.google.families = [];\n }\n\n // Object {family: \"Lobster|Open+Sans:400,700\", subset: \"latin,cyrillic-ext,cyrillic\"}\n const families = params.family.split('|');\n for (let i = 0; i < families.length; i++) {\n let googleFont = families[i];\n\n // Might not have multiple weights\n if (families[i].indexOf(':') === -1) {\n googleFont += ':';\n }\n\n if (params.subset) {\n googleFont += `:${params.subset}`;\n } else {\n googleFont += ':latin';\n }\n\n fontsClone.webfontloader.google.families.push(googleFont);\n }\n }\n }\n\n if (!nowValid && fontsClone.webfontloader.google) {\n delete fontsClone.webfontloader.google;\n }\n } else if (tab === 1) {\n // Typekit validation\n previousValid = state.data.input.typekit.valid;\n fontsClone.input.typekit.input = value;\n fontsClone.input.typekit.valid = false;\n\n if (value.length === 7) {\n nowValid = true;\n fontsClone.input.typekit.valid = true;\n fontsClone.webfontloader.typekit = fontsClone.webfontloader.typekit || {};\n fontsClone.webfontloader.typekit.id = value;\n }\n\n if (!nowValid && fontsClone.webfontloader.typekit) {\n delete fontsClone.webfontloader.typekit;\n }\n } else if (tab === 2) {\n // Fonts.com (monotype) validation\n previousValid = state.data.input.monotype.valid;\n fontsClone.input.monotype.input = value;\n fontsClone.input.monotype.valid = false;\n\n if (value.length === 36) {\n const regex = new RegExp(/[0-9|a-z]{8}-[0-9|a-z]{4}-[0-9|a-z]{4}-[0-9|a-z]{4}-[0-9|a-z]{12}/g);\n fontsClone.input.monotype.valid = regex.test(value);\n }\n\n // valid\n if (fontsClone.input.monotype.valid) {\n nowValid = true;\n fontsClone.webfontloader.monotype = fontsClone.webfontloader.monotype || {};\n\n fontsClone.webfontloader.monotype.projectId = value;\n } else if (fontsClone.webfontloader.monotype) {\n delete fontsClone.webfontloader.monotype;\n }\n } else if (tab === 3) {\n // Font Deck validation\n previousValid = state.data.input.fontdeck.valid;\n fontsClone.input.fontdeck.input = value;\n fontsClone.input.fontdeck.valid = false;\n\n if (value.length === 5) {\n nowValid = true;\n fontsClone.input.fontdeck.valid = true;\n fontsClone.webfontloader.fontdeck = fontsClone.webfontloader.fontdeck || {};\n\n fontsClone.webfontloader.fontdeck.id = value;\n }\n\n if (!nowValid && fontsClone.webfontloader.fontdeck) {\n delete fontsClone.webfontloader.fontdeck;\n }\n }\n\n if (previousValid && !nowValid || nowValid) {\n // TODO re load fonts\n }\n\n return Object.assign({}, state, {\n data: fontsClone\n });\n }\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/index.js",
"content": "import {combineReducers} from 'redux';\nimport {routerStateReducer as router} from 'redux-router';\nimport {relateReducer} from 'relate-js';\n\nimport adminMenu from './admin-menu';\nimport display from './display';\nimport dnd from './dnd';\nimport fonts from './fonts';\nimport media from './media';\nimport menu from './menu';\nimport pageBuilder from './page-builder';\nimport revisions from './revisions';\nimport schema from './schema';\nimport schemaEntry from './schema-entry';\nimport session from './session';\nimport settings from './settings';\nimport styles from './styles';\nimport symbols from './symbols';\n\nconst rootReducer = combineReducers({\n relateReducer,\n adminMenu,\n display,\n dnd,\n fonts,\n media,\n menu,\n pageBuilder,\n revisions,\n schema,\n schemaEntry,\n settings,\n styles,\n symbols,\n session,\n router\n});\n\nexport default rootReducer;\n"
},
{
"path": "lib/shared/reducers/media.js",
"content": "import actionTypes from 'actions';\nimport findIndex from 'lodash.findindex';\n\nconst defaultState = {\n display: 'grid',\n uploads: []\n};\n\nfunction changeUploadStatus ({state, id, status}) {\n const uploads = state.uploads.slice(0);\n const index = findIndex(uploads, ['id', id]);\n\n if (index !== -1) {\n uploads[index] = Object.assign({}, uploads[index], {\n status\n });\n }\n\n return Object.assign({}, state, {uploads});\n}\n\nexport default function mediaReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.addFilesToUpload: {\n const files = action.files.map((file) => ({\n id: file.id,\n name: file.name,\n status: 'queue' // queue || uploading || success || error\n }));\n return Object.assign({}, state, {\n uploads: state.uploads.concat(files)\n });\n }\n case actionTypes.changeMediaDisplay:\n return Object.assign({}, state, {\n display: action.display\n });\n case actionTypes.uploadingMedia:\n return changeUploadStatus({\n state,\n id: action.fileId,\n status: 'uploading'\n });\n case actionTypes.mediaUploadSuccess:\n return changeUploadStatus({\n state,\n id: action.fileId,\n status: 'success'\n });\n case actionTypes.mediaUploadError:\n return changeUploadStatus({\n state,\n id: action.fileId,\n status: 'error'\n });\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/menu.js",
"content": "import actionTypes from 'actions';\nimport Relate from 'relate-js';\n\nconst defaultState = {};\n\nlet ID = 0;\nexport default function getLastId (data) {\n while (data[ID]) {\n ID++;\n }\n return (ID++).toString();\n}\n\nexport default function menuReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case Relate.actionTypes.query:\n if (action.data.menu && action.data.menu.data) {\n return JSON.parse(action.data.menu.data);\n }\n return state;\n case actionTypes.addMenuItem: { // new menu item\n const destId = action.destination.id;\n const destPos = action.destination.position;\n const id = getLastId(state);\n const changes = {\n [id]: Object.assign({id, parent: destId}, action.item)\n };\n\n if (!state[destId] && destId === 'root') {\n // create root\n changes.root = {\n id: 'root',\n children: [id]\n };\n } else {\n const children = state[destId] && state[destId].children || [];\n children.splice(destPos, 0, id);\n changes[destId] = Object.assign({}, state[destId], {\n children\n });\n }\n\n return Object.assign({}, state, changes);\n }\n case actionTypes.moveMenuItem: {\n const destId = action.destination.id;\n let destPos = action.destination.position;\n const sourceId = action.id;\n const sourceElement = state[sourceId];\n\n // remove element from current position\n const parentElement = state[sourceElement.parent];\n const parentChildren = parentElement.children.slice(0);\n const oldPosition = parentElement.children.indexOf(sourceId);\n parentChildren.splice(oldPosition, 1);\n const changes = {\n [parentElement.id]: Object.assign({}, parentElement, {\n children: parentChildren\n })\n };\n\n // change source parent value\n if (sourceElement.parent !== destId) {\n changes[sourceId] = Object.assign({}, sourceElement, {\n parent: destId\n });\n } else if (oldPosition < destPos) {\n destPos--;\n }\n\n // change destination\n const children =\n changes[destId] && changes[destId].children ||\n state[destId].children && state[destId].children.slice(0) ||\n [];\n children.splice(destPos, 0, sourceId);\n changes[destId] = Object.assign({}, changes[destId] || state[destId], {\n children\n });\n\n return Object.assign({}, state, changes);\n }\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/add.js",
"content": "import forEach from 'lodash.foreach';\n\nimport getId from './helpers/get-id';\n\nexport default (data, action) => {\n const destinationId = action.destination.id;\n const destinationPosition = action.destination.position;\n const sourceId = action.element.id || getId(data);\n const changes = {\n [sourceId]: Object.assign({\n id: sourceId,\n parent: destinationId\n }, action.element)\n };\n\n if (action.childrenElements) {\n forEach(action.childrenElements, (childElement) => {\n changes[childElement.id] = Object.assign({}, childElement);\n });\n }\n\n const children = changes[destinationId] && changes[destinationId].children ||\n data[destinationId].children && data[destinationId].children.slice(0) ||\n [];\n children.splice(destinationPosition, 0, sourceId);\n changes[destinationId] = Object.assign({}, data[destinationId], {\n children\n });\n\n return {\n data: Object.assign({}, data, changes),\n revertAction: {\n type: 'remove',\n elementId: sourceId\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-animation.js",
"content": "export default (data, action) => {\n const defaults = {\n use: false,\n effect: 'transition.fadeIn',\n duration: 400,\n delay: 300\n };\n const element = data[action.elementId];\n const previousValue = element.animation && element.animation[action.property];\n const changedElement = Object.assign({}, element, {\n animation: Object.assign({}, element.animation || defaults, {\n [action.property]: action.value\n })\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-children.js",
"content": "import forEach from 'lodash.foreach';\n\nimport getId from './helpers/get-id';\n\nexport default (data, action) => {\n const element = data[action.elementId];\n const previousChildren = [];\n const newData = Object.assign({}, data);\n if (element.children && element.children.constructor === Array) {\n forEach(element.children, (child) => {\n previousChildren.push(Object.assign({}, data[child.id]));\n delete newData[child.id];\n });\n }\n const changes = {};\n const newChildren = [];\n forEach(action.children, (child) => {\n const childId = getId(data);\n newChildren.push(childId);\n const newChild = Object.assign({}, child, {\n id: childId,\n parent: element.id\n });\n changes[childId] = newChild;\n });\n changes[element.id] = Object.assign({}, element, {\n children: newChildren\n });\n\n return {\n data: Object.assign(newData, changes),\n revertAction: Object.assign({}, action, {\n children: previousChildren\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-content.js",
"content": "export default (data, action) => {\n const element = data[action.elementId];\n const previousValue = element.children || '';\n const changedElement = Object.assign({}, element, {\n children: action.value\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-display.js",
"content": "\n// Changes an element 'visible on' property\n// action:\n// - elementId\n// - display\n\nexport default (data, action) => {\n const element = data[action.elementId];\n const previousValue = element.hide && element.hide[action.display] && true;\n const changedElement = Object.assign({}, element, {\n hide: Object.assign({}, element.hide || {}, {\n [action.display]: !previousValue\n })\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action)\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-label.js",
"content": "export default (data, action) => {\n const element = data[action.elementId];\n const previousValue = element.label || element.tag;\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: Object.assign({}, element, {\n label: action.value\n })\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-position.js",
"content": "export default (data, action) => {\n const defaults = {\n position: 'static',\n top: 'auto',\n right: 'auto',\n bottom: 'auto',\n left: 'auto',\n zIndex: '1'\n };\n const element = data[action.elementId];\n let previousValue;\n let changedElement;\n\n if (action.display === 'desktop') {\n previousValue = element.position && element.position[action.property];\n changedElement = Object.assign({}, element, {\n position: Object.assign({}, element.position || defaults, {\n [action.property]: action.value\n })\n });\n } else {\n previousValue =\n element.displayPosition &&\n element.displayPosition[action.display] &&\n element.displayPosition[action.display][action.property];\n changedElement = Object.assign({}, element, {\n displayPosition: Object.assign({}, element.displayPosition || {}, {\n [action.display]: Object.assign(\n {},\n element.displayPosition && element.displayPosition[action.display] || {},\n {\n [action.property]: action.value\n }\n )\n })\n });\n }\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-prop.js",
"content": "\n// Changes an element prop\n// action:\n// - type\n// - elementId\n// - property\n// - value\n// - display\n\nexport default (data, action) => {\n const element = data[action.elementId];\n let previousValue;\n let changedElement;\n\n if (action.display === 'desktop') {\n if (action.property === 'children') {\n previousValue = element.children || '';\n changedElement = Object.assign({}, element, {\n children: action.value,\n props: Object.assign({}, element.props || {}, {\n [action.property]: action.value\n })\n });\n } else {\n previousValue = element.props && element.props[action.property];\n changedElement = Object.assign({}, element, {\n props: Object.assign({}, element.props || {}, {\n [action.property]: action.value\n })\n });\n }\n } else {\n previousValue =\n element.displayProps &&\n element.displayProps[action.display] &&\n element.displayProps[action.display][action.property];\n changedElement = Object.assign({}, element, {\n displayProps: Object.assign({}, element.displayProps || {}, {\n [action.display]: Object.assign({}, element.displayProps && element.displayProps[action.display] || {}, {\n [action.property]: action.value\n })\n })\n });\n }\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/change-style.js",
"content": "\n// Changes an element custom style property (no-style only)\n// action:\n// - type\n// - elementId\n// - property\n// - value\n// - display\n\nexport default (data, action) => {\n const element = data[action.elementId];\n let previousValue;\n let changedElement;\n\n if (action.display === 'desktop') {\n previousValue = element.style && element.style[action.property];\n\n changedElement = Object.assign({}, element, {\n style: Object.assign({}, element.style || {}, {\n [action.property]: action.value\n })\n });\n\n if (action.value === null || typeof action.value === 'undefined') {\n delete changedElement.style[action.property];\n }\n } else {\n previousValue =\n element.displayStyle &&\n element.displayStyle[action.display] &&\n element.displayStyle[action.display][action.property];\n\n changedElement = Object.assign({}, element, {\n displayStyle: Object.assign({}, element.displayStyle || {}, {\n [action.display]: Object.assign({}, element.displayStyle && element.displayStyle[action.display] || {}, {\n [action.property]: action.value\n })\n })\n });\n\n if (action.value === null || typeof action.value === 'undefined') {\n delete changedElement.displayStyle[action.display][action.property];\n }\n }\n\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: previousValue\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/duplicate.js",
"content": "import cloneDeep from 'lodash.clonedeep';\n\nimport cloneChildren from './helpers/clone-children';\nimport getId from './helpers/get-id';\n\nexport default (data, action) => {\n const sourceId = getId(data);\n const changes = {};\n const toDuplicate = data[action.elementId];\n const destinationId = toDuplicate.parent;\n const destinationPosition = data[toDuplicate.parent].children.indexOf(toDuplicate.id) + 1;\n\n const cloned = cloneDeep(toDuplicate);\n cloned.id = sourceId;\n if (cloned.children && cloned.children.constructor === Array) {\n cloned.children = cloneChildren(cloned.children, data, changes, sourceId);\n }\n changes[sourceId] = cloned;\n\n const children =\n changes[destinationId] && changes[destinationId].children ||\n data[destinationId].children && data[destinationId].children.slice(0) ||\n [];\n children.splice(destinationPosition, 0, sourceId);\n changes[destinationId] = Object.assign({}, data[destinationId], {\n children\n });\n\n return {\n data: Object.assign({}, data, changes),\n revertAction: {\n type: 'remove',\n elementId: sourceId\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/element-add-schema-link.js",
"content": "export default (data, action) => {\n const element = data[action.elementId];\n const newLink = {\n elementId: action.linkElementId,\n action: action.action\n };\n const currentSchemaLinks = element.props && element.props.schemaLinks || {};\n const schemaLinksChanged = Object.assign({}, currentSchemaLinks, {\n [action.propertyId]: [...(currentSchemaLinks[action.propertyId] || []), newLink]\n });\n\n const changedElement = Object.assign({}, element, {\n props: Object.assign({}, element.props || {}, {\n schemaLinks: schemaLinksChanged\n })\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: {\n type: 'elementRemoveSchemaLink',\n elementId: action.elementId,\n propertyId: action.propertyId,\n index: schemaLinksChanged[action.propertyId].length - 1\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/element-change-schema-link-action.js",
"content": "export default (data, action) => {\n const element = data[action.elementId];\n const currentSchemaLinks = element.props.schemaLinks;\n const newProperties = currentSchemaLinks[action.propertyId].slice(0);\n const oldAction = newProperties[action.index].action;\n\n newProperties.splice(action.index, 1, Object.assign({}, newProperties[action.index], {\n action: action.value\n }));\n\n const schemaLinksChanged = Object.assign({}, currentSchemaLinks, {\n [action.propertyId]: newProperties\n });\n const changedElement = Object.assign({}, element, {\n props: Object.assign({}, element.props || {}, {\n schemaLinks: schemaLinksChanged\n })\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: Object.assign({}, action, {\n value: oldAction\n })\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/element-remove-schema-link.js",
"content": "export default (data, action) => {\n const element = data[action.elementId];\n const currentSchemaLinks = element.props.schemaLinks;\n const newProperties = currentSchemaLinks[action.propertyId].slice(0);\n const removedProperty = (newProperties.splice(action.index, 1))[0];\n\n const schemaLinksChanged = Object.assign({}, currentSchemaLinks, {\n [action.propertyId]: newProperties\n });\n const changedElement = Object.assign({}, element, {\n props: Object.assign({}, element.props || {}, {\n schemaLinks: schemaLinksChanged\n })\n });\n\n return {\n data: Object.assign({}, data, {\n [action.elementId]: changedElement\n }),\n revertAction: {\n type: 'elementAddSchemaLink',\n elementId: action.elementId,\n propertyId: action.propertyId,\n linkElementId: removedProperty.elementId,\n action: removedProperty.action\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/helpers/clone-children.js",
"content": "import cloneDeep from 'lodash.clonedeep';\nimport forEach from 'lodash.foreach';\n\nimport getId from './get-id';\n\nexport default function cloneChildren (children, data, changes, parentId) {\n const resultChildren = [];\n\n forEach(children, (childId) => {\n const newId = getId(data);\n const element = data[childId];\n const clonedChild = cloneDeep(element);\n clonedChild.id = newId;\n clonedChild.parent = parentId;\n if (clonedChild.children && clonedChild.children.constructor === Array) {\n clonedChild.children = cloneChildren(clonedChild.children, data, changes, newId);\n }\n changes[newId] = clonedChild;\n resultChildren.push(newId);\n });\n\n return resultChildren;\n}\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/helpers/get-id.js",
"content": "let ID_COUNTER = 0;\nexport default function getLastId (data) {\n while (data[ID_COUNTER]) {\n ID_COUNTER++;\n }\n return (ID_COUNTER++).toString();\n}\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/helpers/remove-children.js",
"content": "import forEach from 'lodash.foreach';\n\nexport default function removeChildren (children, copiedData) {\n const childrenElements = {};\n forEach(children, (childId) => {\n const element = copiedData[childId];\n childrenElements[element.id] = Object.assign({}, element);\n if (element.children && element.children.constructor === Array) {\n Object.assign(childrenElements, removeChildren(element.children, copiedData));\n }\n delete copiedData[childId];\n });\n return childrenElements;\n}\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/index.js",
"content": "import add from './add';\nimport changeAnimation from './change-animation';\nimport changeChildren from './change-children';\nimport changeContent from './change-content';\nimport changeDisplay from './change-display';\nimport changeLabel from './change-label';\nimport changePosition from './change-position';\nimport changeProp from './change-prop';\nimport changeStyle from './change-style';\nimport duplicate from './duplicate';\nimport elementAddSchemaLink from './element-add-schema-link';\nimport elementChangeSchemaLinkAction from './element-change-schema-link-action';\nimport elementRemoveSchemaLink from './element-remove-schema-link';\nimport makeDynamic from './make-dynamic';\nimport move from './move';\nimport newAction from './new';\nimport remove from './remove';\n\nexport default {\n new: newAction,\n move,\n add,\n duplicate,\n remove,\n makeDynamic,\n changeLabel,\n changeDisplay,\n changeProp,\n changeAnimation,\n changePosition,\n changeStyle,\n changeContent,\n changeChildren,\n elementAddSchemaLink,\n elementRemoveSchemaLink,\n elementChangeSchemaLinkAction\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/make-dynamic.js",
"content": "import getId from './helpers/get-id';\n\nexport default (data, action) => {\n const element = data[action.elementId];\n const destinationId = element.parent;\n const destinationPosition = data[destinationId].children.indexOf(element.id);\n\n // Add new dynamic element\n const dynamicElementId = getId(data);\n const newChildren = data[destinationId].children.slice(0);\n newChildren.splice(destinationPosition, 1, dynamicElementId);\n const changes = {\n [dynamicElementId]: {\n parent: destinationId,\n id: dynamicElementId,\n tag: 'DynamicList',\n children: [element.id]\n },\n [destinationId]: Object.assign({}, data[destinationId], {\n children: newChildren\n }),\n [element.id]: Object.assign({}, element, {\n parent: dynamicElementId\n })\n };\n\n return {\n data: Object.assign({}, data, changes),\n revertAction: [\n {\n type: 'move',\n source: {\n id: element.id\n },\n destination: {\n id: destinationId,\n position: destinationPosition\n }\n },\n {\n type: 'remove',\n elementId: dynamicElementId\n }\n ]\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/move.js",
"content": "export default (data, action) => {\n let destinationPosition = action.destination.position;\n const destinationId = action.destination.id;\n const sourceId = action.source.id;\n const sourceElement = data[sourceId];\n\n // remove from old parent children\n const parentElement = data[sourceElement.parent];\n const parentChildren = parentElement.children.slice(0);\n const oldPosition = parentElement.children.indexOf(sourceId);\n parentChildren.splice(oldPosition, 1);\n const changes = {\n [parentElement.id]: Object.assign({}, parentElement, {\n children: parentChildren\n })\n };\n\n if (sourceElement.parent !== destinationId) {\n changes[sourceId] = Object.assign({}, sourceElement, {\n parent: destinationId\n });\n } else if (oldPosition < destinationPosition) {\n destinationPosition--;\n }\n\n const children =\n changes[destinationId] && changes[destinationId].children ||\n data[destinationId].children && data[destinationId].children.slice(0) ||\n [];\n children.splice(destinationPosition, 0, sourceId);\n changes[destinationId] = Object.assign({}, data[destinationId], {\n children\n });\n\n return {\n data: Object.assign({}, data, changes),\n revertAction: {\n type: 'move',\n source: {\n id: action.source.id\n },\n destination: {\n id: sourceElement.parent,\n position: oldPosition\n }\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/new.js",
"content": "import elements from 'elements';\nimport forEach from 'lodash.foreach';\n\nimport getId from './helpers/get-id';\n\nexport default (data, action) => {\n const destinationId = action.destination.id;\n const destinationPosition = action.destination.position;\n const sourceId = getId(data);\n const changes = {\n [sourceId]: {\n parent: destinationId,\n id: sourceId,\n ...action.element\n }\n };\n\n const ElementClass = elements[action.element.tag];\n if (ElementClass && ElementClass.defaultChildren) {\n const defaultChildren = ElementClass.defaultChildren;\n if (defaultChildren.constructor === Array) {\n forEach(defaultChildren, (child) => {\n const childId = getId(data);\n changes[childId] = Object.assign({}, child, {\n parent: sourceId,\n id: childId\n });\n changes[sourceId].children = changes[sourceId].children || [];\n changes[sourceId].children.push(childId);\n });\n }\n }\n\n // Destination\n if (!data[destinationId] && destinationId === 'body') {\n changes.body = {\n id: 'body',\n tag: 'body',\n children: [sourceId]\n };\n } else {\n const children =\n changes[destinationId] && changes[destinationId].children ||\n data[destinationId].children && data[destinationId].children.slice(0) ||\n [];\n children.splice(destinationPosition, 0, sourceId);\n changes[destinationId] = Object.assign({}, data[destinationId], {\n children\n });\n }\n\n return {\n data: Object.assign({}, data, changes),\n revertAction: {\n type: 'remove',\n elementId: sourceId\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder-actions/remove.js",
"content": "import removeChildren from './helpers/remove-children';\n\nexport default (data, action) => {\n const element = data[action.elementId];\n const parentChildren = data[element.parent].children.slice(0);\n const positionInParent = parentChildren.indexOf(element.id);\n parentChildren.splice(positionInParent, 1);\n\n const copiedData = Object.assign({}, data, {\n [element.parent]: Object.assign({}, data[element.parent], {\n children: parentChildren\n })\n });\n\n let childrenElements = null; // For revert action\n if (element.children && element.children.constructor === Array) {\n childrenElements = removeChildren(element.children, copiedData);\n }\n\n const removedElement = copiedData[action.elementId];\n delete copiedData[action.elementId];\n\n return {\n data: copiedData,\n revertAction: {\n type: 'add',\n element: removedElement,\n childrenElements,\n destination: {\n id: element.parent,\n position: positionInParent\n }\n }\n };\n};\n"
},
{
"path": "lib/shared/reducers/page-builder.js",
"content": "import actionTypes from 'actions';\nimport elements from 'elements';\nimport forEach from 'lodash.foreach';\nimport Relate from 'relate-js';\n\nimport pageBuilderActions from './page-builder-actions';\n\nconst categories = [\n 'structure',\n 'content',\n 'media',\n 'form'\n];\nforEach(elements, (element) => {\n if (element.settings && element.settings.category) {\n if (categories.indexOf(element.settings.category) === -1) {\n categories.push(element.settings.category);\n }\n }\n});\ncategories.push('other');\nconst categoriesCollapsed = {};\nforEach(categories, (category) => {categoriesCollapsed[category] = false;});\n\nconst defaultState = {\n data: {},\n actions: [],\n redos: [],\n expanded: {}, // for structure layer\n userExpanded: {}, // for structure layer\n editing: true,\n elements,\n selectedId: null,\n selectedElement: null,\n selectedParent: null,\n selectedPath: [],\n overedId: null,\n focusElementId: null,\n linkingData: false,\n linkingDataElementId: null,\n linkingDataElement: null,\n linkingFormData: false,\n linkingFormDataElementId: null,\n categories,\n categoriesCollapsed,\n elementsMenuOpened: false,\n elementsMenuOptions: {},\n elementsMenuSpot: null,\n menuTab: 'style'\n};\n\nfunction doAction (data, action) {\n let result;\n if (action && action.constructor === Array) {\n const revertActions = [];\n let resultData = data;\n\n forEach(action, (actionPart) => {\n const actionFunction = pageBuilderActions[actionPart.type];\n const partResult = actionFunction && actionFunction(resultData, actionPart);\n if (partResult) {\n resultData = partResult.data;\n revertActions.unshift(partResult.revertAction);\n }\n });\n\n result = {\n data: resultData,\n revertAction: revertActions\n };\n } else {\n const actionFunction = pageBuilderActions[action.type];\n result = actionFunction && actionFunction(data, action);\n }\n return result;\n}\n\nfunction getElementPath (selectedElement, data) {\n const result = [];\n let current = selectedElement;\n\n while (current.parent) {\n current = data[current.parent];\n result.unshift(current);\n }\n\n return result;\n}\n\nfunction inPath (elementId, targetId, data) {\n let found = false;\n let current = data[elementId];\n\n while (!found && current.parent) {\n if (current.parent === targetId) {\n found = true;\n }\n current = data[current.parent];\n }\n\n return found;\n}\n\nfunction checkOverAndSelected (state) {\n const changes = {\n selectedId: state.selectedId,\n overedId: state.overedId\n };\n\n // Check if inside the focused element\n if (state.focusElementId) {\n if (state.overedId && !inPath(state.overedId, state.focusElementId, state.data)) {\n changes.overedId = null;\n }\n if (state.selectedId && !inPath(state.selectedId, state.focusElementId, state.data)) {\n changes.selectedId = null;\n }\n }\n\n if (state.selectedId && changes.selectedId) {\n const selectedElement = state.data[state.selectedId];\n changes.selectedElement = selectedElement;\n changes.selectedParent = selectedElement && selectedElement.parent;\n changes.selectedPath = selectedElement && getElementPath(selectedElement, state.data);\n changes.selectedId = selectedElement && state.selectedId;\n }\n\n if (state.linkingDataElementId) {\n const linkingDataElement = state.data[state.linkingDataElementId];\n changes.linkingDataElement = linkingDataElement;\n changes.linkingDataElementId = linkingDataElement && state.linkingDataElementId;\n }\n\n return Object.assign({}, state, changes);\n}\n\nexport default function pageBuilderReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case Relate.actionTypes.query:\n if (action.data.draft) {\n const dataChange = {};\n\n if (action.data.draft.data) {\n dataChange.data = JSON.parse(action.data.draft.data);\n }\n if (action.data.draft.actions) {\n dataChange.actions = JSON.parse(action.data.draft.actions);\n }\n\n return Object.assign({}, defaultState, dataChange);\n }\n return state;\n case actionTypes.pbDoAction: {\n const actionResult = doAction(state.data, action.action);\n return checkOverAndSelected(Object.assign({}, state, {\n data: actionResult.data,\n actions: [...state.actions, actionResult.revertAction],\n redos: []\n }));\n }\n case actionTypes.pbUndoAction: {\n if (state.data.actions.length > 0) {\n const actions = state.actions.slice(0);\n const undoActionResult = doAction(state.data, actions.pop());\n return checkOverAndSelected(Object.assign({}, state, {\n redos: [...state.redos, undoActionResult.revertAction],\n data: undoActionResult.data,\n actions\n }));\n }\n return state;\n }\n case actionTypes.pbRedoAction:\n if (state.redos.length > 0) {\n const redos = state.redos.slice(0);\n const redoActionResult = doAction(state.data, redos.pop());\n return checkOverAndSelected(Object.assign({}, state, {\n redos,\n data: redoActionResult.data,\n actions: [...state.actions, redoActionResult.revertAction]\n }));\n }\n return state;\n case actionTypes.makeElementSymbol: {\n const elementToSymbol = state.data[action.params.elementId];\n const elementToSymbolParent = state.data[elementToSymbol.parent];\n const elementToSymbolPosition = elementToSymbolParent.children.indexOf(action.params.elementId);\n\n const makeElementSymbolActionResult = doAction(state.data, [\n {\n type: 'remove',\n elementId: action.params.elementId\n },\n {\n type: 'new',\n destination: {\n id: elementToSymbol.parent,\n position: elementToSymbolPosition\n },\n element: {\n tag: 'Symbol',\n props: {\n symbolId: action.data.addSymbol._id\n }\n }\n }\n ]);\n return checkOverAndSelected(Object.assign({}, state, {\n redos: [],\n data: makeElementSymbolActionResult.data,\n actions: [...state.actions, makeElementSymbolActionResult.revertAction]\n }));\n }\n case actionTypes.saveStyle: {\n const styleActionResult = doAction(state.data, {\n type: 'changeProp',\n property: 'style',\n value: action.data.addStyle._id,\n elementId: action.params.elementId,\n display: action.params.display\n });\n return checkOverAndSelected(Object.assign({}, state, {\n data: styleActionResult.data\n }));\n }\n case actionTypes.pbSelectElement: {\n const expandedChanges = {};\n let element = state.data[action.elementId];\n if (element) {\n while (element && element.parent) {\n element = state.data[element.parent];\n if (element && element.id !== 'body') {\n expandedChanges[element.id] = true;\n }\n }\n }\n return checkOverAndSelected(Object.assign({}, state, {\n expanded: expandedChanges,\n selectedId: action.elementId\n }));\n }\n case actionTypes.pbToggleExpandElement: {\n const isExpanded = state.expanded[action.elementId] || state.userExpanded[action.elementId];\n return Object.assign({}, state, {\n expanded: Object.assign({}, state.expanded, {\n [action.elementId]: !isExpanded\n }),\n userExpanded: Object.assign({}, state.userExpanded, {\n [action.elementId]: !isExpanded\n })\n });\n }\n case actionTypes.pbExpandAll: {\n const allExpanded = {};\n forEach(state.data, (elementIt, elementId) => {\n allExpanded[elementId] = true;\n });\n return Object.assign({}, state, {\n userExpanded: allExpanded\n });\n }\n case actionTypes.pbCollapseAll:\n return Object.assign({}, state, {\n expanded: {},\n userExpanded: {}\n });\n case actionTypes.pbToggleEditing:\n return Object.assign({}, state, {\n editing: !state.editing\n });\n case actionTypes.pbSetMenuTab:\n return Object.assign({}, state, {\n menuTab: action.value\n });\n case actionTypes.pbOpenElementsMenu:\n return Object.assign({}, state, {\n elementsMenuOpened: true,\n elementsMenuOptions: action.options\n });\n case actionTypes.pbCloseElementsMenu:\n return Object.assign({}, state, {\n elementsMenuOpened: false,\n elementsMenuOptions: null,\n elementsMenuSpot: null\n });\n case actionTypes.pbToggleCategory:\n return Object.assign({}, state, {\n categoriesCollapsed: Object.assign({}, state.categoriesCollapsed, {\n [action.category]: !state.categoriesCollapsed[action.category]\n })\n });\n case actionTypes.pbOverElement:\n return checkOverAndSelected(Object.assign({}, state, {\n overedId: action.elementId\n }));\n case actionTypes.pbOutElement:\n if (state.overedId === action.elementId) {\n return checkOverAndSelected(Object.assign({}, state, {\n overedId: null\n }));\n }\n return state;\n case actionTypes.pbLinkFormDataMode:\n return checkOverAndSelected(Object.assign({}, state, {\n linkingFormData: true,\n linkingFormDataElementId: action.elementId,\n focusElementId: action.elementId\n }));\n case actionTypes.pbCloseLinkFormDataMode:\n return checkOverAndSelected(Object.assign({}, state, {\n linkingFormData: false,\n linkingFormDataElementId: null,\n focusElementId: null\n }));\n case actionTypes.pbLinkDataMode:\n return checkOverAndSelected(Object.assign({}, state, {\n linkingData: true,\n linkingDataElementId: action.elementId,\n focusElementId: action.elementId\n }));\n case actionTypes.pbCloseLinkDataMode:\n return checkOverAndSelected(Object.assign({}, state, {\n linkingData: false,\n linkingDataElementId: null,\n focusElementId: null\n }));\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/revisions.js",
"content": "import actionTypes from 'actions';\n\nconst defaultState = {\n data: [],\n errors: null\n};\n\nexport default function colorsReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.getRevisions:\n return Object.assign({}, state, {\n data: action.data.revisions,\n errors: action.errors\n });\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/schema-entry.js",
"content": "import actionTypes from 'actions';\nimport parseFields from 'helpers/parse-fields';\n\nconst defaultState = {\n data: {\n title: '',\n slug: '',\n state: 'draft'\n },\n isSlugValid: false,\n errors: 'Not found'\n};\nconst parsableFields = ['data', 'properties'];\n\nexport default function schemaEntryReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.changeSchemaEntryToDefault:\n return Object.assign({}, state, defaultState);\n case actionTypes.changeSchemaEntryFields:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, action.values)\n });\n case actionTypes.changeSchemaEntryProperty:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {\n properties: Object.assign({}, state.data.properties, {\n [action.key]: action.value\n })\n })\n });\n case actionTypes.graphql:\n if (action.data.schemaEntry) {\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, parseFields(action.data.schemaEntry, parsableFields)),\n errors: action.errors\n });\n }\n return state;\n case actionTypes.updateSchemaEntry:\n return Object.assign({}, state, {\n data: parseFields(action.data.updateSchemaEntry, parsableFields) || state.data,\n errors: action.errors\n });\n case actionTypes.addSchemaEntry:\n return Object.assign({}, state, {\n data: parseFields(action.data.addSchemaEntry, parsableFields) || state.data,\n errors: action.errors\n });\n case actionTypes.restoreSchemaEntry:\n return Object.assign({}, state, {\n data: parseFields(action.data.restoreSchemaEntry, parsableFields) || state.data,\n errors: action.errors\n });\n case actionTypes.validateSchemaEntrySlug:\n return Object.assign({}, state, {\n isSlugValid: action.data.validateSchemaEntrySlug,\n errors: action.errors\n });\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/schema.js",
"content": "import actionTypes from 'actions';\nimport forEach from 'lodash.foreach';\nimport slugify from 'slug';\n\nconst defaultState = {\n step: 0,\n openedProperties: [],\n data: {\n type: '',\n title: '',\n properties: []\n }\n};\n\nfunction getUniqueId (properties, idParam, count = 0) {\n let id = idParam;\n if (id === '') {\n id = 'unnamed';\n }\n id = slugify(id).toLowerCase();\n\n let currentId = count === 0 ? id : `${id}-${count}`;\n\n // ensure unique\n forEach(properties, property => {\n if (property.id === currentId) {\n currentId = getUniqueId(properties, id, count + 1);\n return false;\n }\n });\n\n return currentId;\n}\n\nfunction findPropertyBydId (properties, id) {\n let result = false;\n\n forEach(properties, (property, index) => {\n if (property.id === id) {\n result = {\n property,\n index\n };\n return false;\n }\n });\n\n return result;\n}\n\nexport default function schemaReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.changeSchemaToDefault:\n return Object.assign({}, state, defaultState);\n case actionTypes.changeSchemaType:\n return Object.assign({}, state, {\n step: 1,\n data: Object.assign({}, state.data, {type: action.schemaType})\n });\n case actionTypes.changeSchemaTitle:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {title: action.title})\n });\n case actionTypes.schemaStepBack:\n return Object.assign({}, state, {\n step: state.step - 1\n });\n case actionTypes.schemaStepForward:\n return Object.assign({}, state, {\n step: state.step + 1\n });\n case actionTypes.schemaAddProperty: {\n const newId = getUniqueId(state.data.properties, 'New Property');\n return Object.assign({}, state, {\n openedProperties: [...state.openedProperties, newId],\n data: Object.assign({}, state.data, {\n properties: [...state.data.properties, {\n id: newId,\n title: 'New Property',\n type: 'String',\n required: false\n }]\n })\n });\n }\n case actionTypes.schemaToggleProperty: {\n let resultState = state;\n const propertyFound = findPropertyBydId(state.data.properties, action.id);\n if (propertyFound) {\n const openedIndex = state.openedProperties.indexOf(action.id);\n if (openedIndex !== -1) {\n // remove it\n const newOpenedProperties = state.openedProperties.slice(0);\n newOpenedProperties.splice(openedIndex, 1);\n resultState = Object.assign({}, state, {\n openedProperties: newOpenedProperties\n });\n } else {\n // add it\n resultState = Object.assign({}, state, {\n openedProperties: [...state.openedProperties, action.id]\n });\n }\n }\n return resultState;\n }\n case actionTypes.schemaChangePropertySetting: {\n let resultState = state;\n const propertyFound = findPropertyBydId(state.data.properties, action.id);\n if (propertyFound) {\n const properties = state.data.properties.slice(0);\n let openedProperties = state.openedProperties;\n const changes = {\n [action.settingId]: action.value\n };\n\n if (action.settingId === 'title') {\n const newId = getUniqueId(state.data.properties, action.value);\n\n const openedIndex = openedProperties.indexOf(action.id);\n if (openedIndex !== -1) {\n openedProperties = openedProperties.slice(0);\n openedProperties[openedIndex] = newId;\n }\n\n changes.id = newId;\n }\n\n properties[propertyFound.index] = Object.assign(\n {},\n properties[propertyFound.index],\n changes\n );\n\n resultState = Object.assign({}, state, {\n openedProperties,\n data: Object.assign({}, state.data, {\n properties\n })\n });\n }\n return resultState;\n }\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/session.js",
"content": "import actionTypes from 'actions';\n\nconst defaultState = {\n userId: null\n};\n\nexport default function sessionReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.authenticate:\n return Object.assign({}, state, {userId: action.data.userId});\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/settings.js",
"content": "import actionTypes from 'actions';\nimport forEach from 'lodash.foreach';\n\nconst defaultState = {\n data: {},\n errors: null\n};\n\nfunction parseSettings (_settings) {\n const settings = {};\n\n forEach(_settings, (setting) => {\n settings[setting._id] = setting.value;\n });\n\n return settings;\n}\n\nexport default function settingsReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.graphql:\n if (action.data.settings) {\n return Object.assign({}, state, {\n data: parseSettings(action.data.settings),\n errors: action.errors\n });\n }\n return state;\n case actionTypes.changeSettingValue:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data, {[action.id]: action.value}),\n errors: action.errors\n });\n case actionTypes.saveSettings:\n return Object.assign({}, state, {\n data: Object.assign({}, state.data),\n errors: action.errors\n });\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/styles.js",
"content": "import actionTypes from 'actions';\nimport filter from 'lodash.filter';\nimport find from 'lodash.find';\nimport forEach from 'lodash.foreach';\nimport parseFields from 'helpers/parse-fields';\nimport Relate from 'relate-js';\n\nconst defaultState = {\n data: [],\n errors: null\n};\n\nconst parsableFields = ['options', 'displayOptions'];\n\nexport default function stylesReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case Relate.actionTypes.query:\n if (action.data.styles) {\n const styles = [];\n forEach(action.data.styles, (style) => {\n styles.push(parseFields(style, parsableFields));\n });\n return Object.assign({}, state, {\n data: styles,\n errors: action.errors\n });\n }\n return state;\n case actionTypes.saveStyle: {\n const newStyle = parseFields(action.data.addStyle, parsableFields);\n return Object.assign({}, state, {\n data: [...state.data, newStyle],\n errors: action.errors\n });\n }\n case actionTypes.changeStyleProp: {\n const data = state.data.slice(0);\n const style = find(data, {_id: action.styleId});\n\n if (action.display === 'desktop') {\n Object.assign(style, {\n options: Object.assign({}, style.options, {\n [action.property]: action.value\n })\n });\n } else {\n Object.assign(style, {\n displayOptions: Object.assign({}, style.displayOptions || {}, {\n [action.display]: Object.assign(\n {},\n style.displayOptions && style.displayOptions[action.display] || {},\n {\n [action.property]: action.value\n }\n )\n })\n });\n }\n\n return Object.assign({}, state, {\n data\n });\n }\n case actionTypes.removeStyle:\n return Object.assign({}, state, {\n data: filter(state.data, (styleIt) => (styleIt._id !== action.data.removeStyle._id)),\n errors: action.errors\n });\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/reducers/symbols.js",
"content": "import actionTypes from 'actions';\nimport forEach from 'lodash.foreach';\nimport parseFields from 'helpers/parse-fields';\n\nconst parsableFields = ['data'];\nconst defaultState = {};\n\nexport default function symbolsReducer (state = defaultState, action = {}) {\n switch (action.type) {\n case actionTypes.graphql:\n if (action.data.symbols) {\n const changes = {};\n\n forEach(action.data.symbols, (symbol) => {\n if (state[symbol._id]) {\n changes[symbol._id] = Object.assign({}, state[symbol._id], symbol);\n } else {\n changes[symbol._id] = symbol;\n }\n });\n\n return Object.assign({}, state, changes);\n }\n return state;\n case actionTypes.makeElementSymbol: {\n const _id = action.data.addSymbol._id;\n const data = Object.assign({}, action.data.addSymbol, {\n data: JSON.parse(action.data.addSymbol.data)\n });\n return Object.assign({}, state, {\n [_id]: Object.assign({}, state[_id] || {}, data)\n });\n }\n case actionTypes.getSymbol: {\n return Object.assign({}, state, {\n [action.data.symbol._id]: Object.assign(\n {},\n state[action.data.symbol._id] || {},\n parseFields(action.data.symbol, parsableFields)\n )\n });\n }\n default:\n return state;\n }\n}\n"
},
{
"path": "lib/shared/routers/admin.js",
"content": "import request from 'superagent';\nimport Admin from 'screens/admin';\nimport AnalyticsSettings from 'screens/admin/screens/settings/screens/analytics';\nimport Colors from 'screens/admin/screens/colors';\nimport DataSettings from 'screens/admin/screens/settings/screens/data';\nimport EmailSettings from 'screens/admin/screens/settings/screens/email';\nimport Fonts from 'screens/admin/screens/fonts';\nimport GeneralSettings from 'screens/admin/screens/settings/screens/general';\nimport Media from 'screens/admin/screens/media';\nimport MediaMenu from 'screens/admin/screens/media/menu';\nimport Menu from 'screens/admin/screens/menus/screens/menu';\nimport Menus from 'screens/admin/screens/menus';\nimport MenusMenu from 'screens/admin/screens/menus/menu';\nimport Page from 'screens/admin/screens/pages/screens/page';\nimport Pages from 'screens/admin/screens/pages';\nimport PagesMenu from 'screens/admin/screens/pages/menu';\nimport React from 'react';\nimport Schema from 'screens/admin/screens/schemas/screens/schema';\nimport SchemaMenu from 'screens/admin/screens/schemas/screens/schema/menu';\nimport SchemasNew from 'screens/admin/screens/schemas/screens/new';\nimport SettingsMenu from 'screens/admin/screens/settings/menu';\nimport Users from 'screens/admin/screens/users';\nimport {Route, IndexRoute} from 'react-router';\n\nfunction authenticate (nextState, replaceState, callback) {\n if (typeof window !== 'undefined') {\n request\n .post('/graphql')\n .set('Content-Type', 'application/json')\n .set('Accept', 'application/json')\n .send({\n query: 'query { session }'\n })\n .end((error, result) => {\n if (error || !result.body.data.session) {\n window.location.href = '/admin/login';\n } else {\n callback();\n }\n });\n } else {\n callback();\n }\n}\n\nexport default [\n \n
\n );\n }\n\n renderMenuContent () {\n const {routes} = this.props;\n if (routes.length >= 2) {\n let MenuTag = false;\n forEach(routes, route => {\n if (route.menu) {\n MenuTag = route.menu;\n }\n });\n\n if (MenuTag) {\n return \n \n
\n \n {this.props.children}\n
\n \n
\n );\n }\n\n renderSchema (schema) {\n const {active, onActiveClick} = this.props;\n return (\n \n Content Types\n \n \n \n
\n {schemas.map(this.renderSchema, this)}\n \n
\n );\n }\n\n renderEntry (entry, key) {\n let result;\n if (entry === 'sep') {\n result = ;\n } else {\n const {active, onActiveClick} = this.props;\n result = (\n \n \n {menuData.map(this.renderEntry, this)}\n \n
\n \n {this.props.children}\n
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/menu/user.less",
"content": "@import '~styles/colors.less';\n\n@height: 80px;\n\n.root {\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: @height;\n overflow: hidden;\n border-top: 1px solid @adminBorders;\n background-color: #ffffff;\n z-index: 1;\n transition: height 0.2s ease-out;\n}\n\n.head {\n height: @height;\n cursor: pointer;\n padding: 17px;\n}\n\n.opened {\n height: @height + 100px;\n}\n\n.thumbnail {\n display: inline-block;\n vertical-align: top;\n width: 46px;\n height: 46px;\n position: relative;\n}\n\n.blurred {\n display: inline-block;\n vertical-align: top;\n width: 46px;\n height: 46px;\n border-radius: 50%;\n overflow: hidden;\n\n :global img {\n width: 46px;\n -webkit-filter: blur(6px);\n -moz-filter: blur(6px);\n -o-filter: blur(6px);\n -ms-filter: blur(6px);\n filter: blur(6px);\n }\n}\n\n.image {\n display: inline-block;\n vertical-align: top;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n overflow: hidden;\n position: absolute;\n top: 3px;\n left: 3px;\n\n :global img {\n width: 40px;\n }\n}\n\n.info {\n display: inline-block;\n vertical-align: top;\n padding: 5px 13px;\n}\n\n.name {\n color: @adminTextHighlight;\n font-size: 15px;\n}\n\n.role {\n color: @adminText;\n font-size: 10px;\n}\n\n.toggle {\n display: inline-block;\n height: @height;\n text-align: center;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0 17px;\n\n :global i {\n color: @adminText;\n font-size: 12px;\n line-height: @height;\n }\n}\n\n.actions {\n padding: 0px 20px;\n padding-left: 73px;\n padding-bottom: 20px;\n}\n\n.action {\n display: block;\n text-decoration: none;\n margin-bottom: 7px;\n\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n font-size: 12px;\n color: @primary;\n line-height: 20px;\n }\n i {\n margin-right: 7px;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/actions/actions.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './actions.less';\nimport Back from './back';\nimport Displays from './displays';\nimport RightMenu from './right-menu';\nimport Statuses from './statuses';\n\nexport default class Actions extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired,\n display: PropTypes.string.isRequired,\n changeDisplay: PropTypes.func.isRequired,\n draftHasChanges: PropTypes.bool.isRequired,\n state: PropTypes.string,\n stateMessage: PropTypes.string,\n toggleEditing: PropTypes.func.isRequired,\n building: PropTypes.bool.isRequired\n };\n\n render () {\n const {location, building} = this.props;\n return (\n \n
\n \n \n
\n \n 
\n
\n \n \n
\n \n
\n {name}
\n Administrator
\n \n \n
\n \n {this.renderDisplay()}\n
\n );\n }\n\n renderDisplay () {\n const {display, changeDisplay} = this.props;\n return (\n 
\n 
\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/actions/back.less",
"content": "@import '~styles/sizes.less';\n\n.root {\n position: relative;\n display: inline-block;\n vertical-align: top;\n height: @actionsHeight;\n}\n\n.logo {\n width: 15px;\n top: 4.5px;\n margin-left: 6px;\n position: relative;\n display: inline-block;\n}\n\n.lettering {\n position: relative;\n margin-left: 4px;\n display: inline-block;\n top: 4px;\n height: 13px;\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/actions/display.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './display.less';\n\nexport default class DisplayButton extends Component {\n static propTypes = {\n onChange: PropTypes.func.isRequired,\n display: PropTypes.string.isRequired,\n icon: PropTypes.string.isRequired,\n active: PropTypes.bool.isRequired\n };\n\n @bind\n onClick () {\n const {onChange, display} = this.props;\n onChange(display);\n }\n\n render () {\n const {icon, active} = this.props;\n return (\n \n
\n );\n }\n\n renderButton ({display, icon}) {\n const {onChange} = this.props;\n return (\n \n
\n \n {Displays.displaysArr.map(this.renderButton, this)}\n
\n \n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/actions/right-menu.less",
"content": "@import '~styles/sizes.less';\n@import '~styles/colors.less';\n\n.root {\n float: right;\n position: relative;\n padding: 0 6px;\n}\n\n.disabled {\n opacity: 0.3;\n &:after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background-color: transparent;\n }\n}\n\n.button {\n display: inline-block;\n vertical-align: top;\n margin-left: 10px;\n}\n\n.iconButton {\n line-height: @actionsHeight;\n height: @actionsHeight;\n\n :global i {\n width: @actionsHeight;\n font-size: 12px;\n line-height: @actionsHeight;\n color: @chromeTextColor;\n }\n\n :hover :global i {\n color: @chromeTextColorHighlight;\n }\n}\n\n.textButton {\n margin-top: 4px;\n margin-left: 20px;\n line-height: @actionsHeight - 9;\n height: @actionsHeight - 9;\n color: @chromeTextColor;\n font-size: 9px;\n text-transform: uppercase;\n}\n\n.primaryButton {\n background-color: @primary;\n color: #ffffff;\n border-radius: 3px;\n padding: 0 15px;\n\n &:hover{\n background-color: @primaryDarker;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/actions/statuses.jsx",
"content": "import cx from 'classnames';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport Spinner from 'components/spinner';\nimport React, {PropTypes} from 'react';\n\nimport styles from './statuses.less';\n\nexport default class Statuses extends Component {\n static propTypes = {\n state: PropTypes.string,\n stateMessage: PropTypes.string,\n behindVersion: PropTypes.bool.isRequired,\n draftHasChanges: PropTypes.bool.isRequired\n };\n\n render () {\n const {state, behindVersion, draftHasChanges} = this.props;\n let result;\n\n if (state) {\n result = this.renderState();\n } else if (behindVersion) {\n result = this.renderBehind();\n } else if (draftHasChanges) {\n result = this.renderEditing();\n } else {\n result = this.renderPublished();\n }\n\n return result;\n }\n\n renderState () {\n const {state, stateMessage} = this.props;\n let result;\n\n if (state === 'loading') {\n result = (\n \n
\n \n \n {stateMessage}\n
\n \n \n {stateMessage}\n
\n \n Your draft is behind current revision - \n \n
\n \n Editing your draft - \n \n
\n \n Seeing published version\n
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/index.less",
"content": "@import '~styles/colors.less';\n@import '~styles/sizes.less';\n\n.root {\n position: absolute;\n left: 0px; right: 0; top: 0;\n\n height: @topMenuHeight;\n background-color: @chromeBackgroundColor;\n border-bottom: 1px solid @chromeBordersColor;\n\n z-index: 2;\n}\n\n.closePreview {\n position: absolute;\n display: inline-block;\n background-color: @chromeBackgroundColor;\n border-radius: 3px;\n color: @chromeTextColor;\n left: 100%;\n top: 5px;\n font-size: 11px;\n text-transform: uppercase;\n padding: 5px 10px;\n z-index: 1000;\n white-space: nowrap;\n cursor: pointer;\n}\n"
},
{
"path": "lib/shared/screens/admin/components/top-bar/tabs/index.js",
"content": "import * as tabsActions from 'actions/tabs';\n\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport Tabs from './tabs';\n\n@dataConnect(\n (state) => ({\n pathname: state.router.location.pathname\n }),\n (dispatch) => bindActionCreators(tabsActions, dispatch),\n () => ({\n fragments: Tabs.fragments,\n mutations: {\n addTab: [{\n type: 'APPEND',\n field: 'tabs'\n }]\n }\n })\n)\nexport default class TabsContainer extends Component {\n static propTypes = {\n fetchData: PropTypes.func.isRequired,\n tabs: PropTypes.array.isRequired,\n removeTab: PropTypes.func.isRequired,\n pathname: PropTypes.string.isRequired\n };\n\n static defaultProps = {\n tabs: []\n };\n\n render () {\n const {tabs, removeTab, pathname} = this.props;\n return (\n \n
\n \n Close preview\n
\n \n {this.props.tabs.map(this.renderTab, this)}\n \n
\n );\n }\n\n renderTab (tab, key) {\n const {removeTab, pathname} = this.props;\n return (\n \n \n \n Add new color \n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/colors/components/entry.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './entry.less';\n\nexport default class Entry extends Component {\n static fragments = {\n color: {\n _id: 1,\n label: 1,\n value: 1\n }\n };\n\n static propTypes = {\n color: PropTypes.object.isRequired,\n duplicateColor: PropTypes.func.isRequired,\n removeColor: PropTypes.func.isRequired\n };\n\n duplicate () {\n const {duplicateColor, color} = this.props;\n duplicateColor(color._id);\n }\n\n remove () {\n const {removeColor, color} = this.props;\n removeColor(color._id);\n }\n\n render () {\n const {color} = this.props;\n const colorStyle = {\n backgroundColor: color.value\n };\n\n return (\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/colors/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n width: 21.25%;\n margin-right: 5%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: 60px;\n border: 1px solid transparent;\n}\n\n@media screen and (min-width: 1501px) {\n .root {\n width: 16%;\n &:nth-child(5n+5) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1500px) and (min-width: 1101px) {\n .root {\n &:nth-child(4n+4) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1100px) and (min-width: 851px) {\n .root {\n width: 30%;\n &:nth-child(3n+3) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 850px) and (min-width: 751px) {\n .root {\n width: 45%;\n margin-right: 10%;\n &:nth-child(2n+2) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 750px) {\n .root {\n width: 100%;\n margin-right: 0%;\n }\n}\n\n.color {\n height: 125px;\n margin: -1px;\n margin-bottom: 0;\n position: relative;\n\n &.white:before {\n content: '';\n display: block;\n position: absolute;\n top: 0; bottom: 0;\n left: 0; right: 0;\n border: 1px solid @adminBorders;\n z-index: 1;\n }\n}\n\n.info {\n padding: 15px;\n height: 65px;\n text-align: center;\n}\n\n.title {\n color: @adminTextHighlight;\n font-size: 16px;\n line-height: 19px;\n}\n\n.value {\n color: @adminText;\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\n\n.actions {\n visibility: hidden;\n border-top: 1px solid @adminBorders;\n}\n\n.button {\n height: 39px;\n line-height: 39px;\n font-size: 12px;\n text-transform: uppercase;\n width: 50%;\n border-right: 1px solid @adminBorders;\n color: @adminText;\n}\n\n.remove {\n color: @alert;\n}\n\n.root:hover {\n border: 1px solid @adminBorders;\n .actions {\n visibility: visible;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/colors/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {mergeFragments} from 'relax-fragments';\n\nimport Entry from './entry';\n\nexport default class List extends Component {\n static fragments = mergeFragments({\n colors: Entry.fragments.color\n }, {\n colors: {\n _id: 1,\n label: 1\n }\n });\n\n static propTypes = {\n colors: PropTypes.array.isRequired,\n search: PropTypes.string,\n duplicateColor: PropTypes.func.isRequired,\n removeColor: PropTypes.func.isRequired\n };\n\n render () {\n const {colors} = this.props;\n return (\n \n
\n {color.label}
\n {color.value}
\n \n \n \n
\n \n {colors.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (color) {\n const {search, duplicateColor, removeColor} = this.props;\n let valid = true;\n\n if (search) {\n valid = color.label.toLowerCase().indexOf(search.toLowerCase()) >= 0;\n }\n\n if (valid) {\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n width: 21.25%;\n margin-right: 5%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: 60px;\n border: 1px solid transparent;\n}\n\n@media screen and (min-width: 1501px) {\n .grid.root {\n width: 12.5%;\n &:nth-child(6n+6) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1500px) and (min-width: 1301px) {\n .grid.root {\n width: 16%;\n &:nth-child(5n+5) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1300px) and (min-width: 1051px) {\n .grid.root {\n &:nth-child(4n+4) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1050px) and (min-width: 851px) {\n .grid.root {\n width: 30%;\n &:nth-child(3n+3) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 850px) and (min-width: 751px) {\n .grid.root {\n width: 45%;\n margin-right: 10%;\n &:nth-child(2n+2) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 750px) {\n .grid.root {\n width: 100%;\n margin-right: 0%;\n }\n}\n\n.text {\n margin-top: 10px;\n line-height: 125px;\n font-size: 90px;\n text-align: center;\n color: @adminTextHighlight;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: clip;\n}\n\n.info {\n padding: 15px;\n height: 65px;\n text-align: center;\n}\n\n.title {\n color: @adminText;\n font-size: 16px;\n line-height: 19px;\n}\n\n.value {\n color: @adminText;\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\n\n.list {\n width: 100%;\n margin-right: 0%;\n\n .text {\n text-align: left;\n }\n\n .info {\n padding: 15px 0;\n text-align: left;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/fonts.jsx",
"content": "import Component from 'components/component';\nimport Content from 'components/content';\nimport ContentDisplays from 'components/content-displays';\nimport ContentHeader from 'components/content-header';\nimport ContentHeaderActions from 'components/content-header-actions';\nimport ContentNew from 'components/content-new';\nimport Modal from 'components/modal';\nimport React, {PropTypes} from 'react';\n\nimport List from './list';\nimport Manage from './manage';\nimport PreviewText from './preview-text';\n\nexport default class Fonts extends Component {\n static fragments = List.fragments;\n\n static propTypes = {\n fonts: PropTypes.object.isRequired,\n previewText: PropTypes.string.isRequired,\n changePreviewText: PropTypes.string.isRequired,\n changeDisplay: PropTypes.func.isRequired,\n display: PropTypes.string.isRequired,\n manage: PropTypes.bool.isRequired,\n openManage: PropTypes.func.isRequired,\n closeManage: PropTypes.func.isRequired,\n fontsActions: PropTypes.object.isRequired\n };\n\n render () {\n const {fonts, previewText, changePreviewText, changeDisplay, display, openManage} = this.props;\n\n return (\n {text}
\n \n
\n {utils.filterFontFamily(family)}
\n {utils.filterFVD(fvd)}
\n \n \n \n Manage fonts \n \n \n \n \n {this.renderManage()}\n
\n );\n }\n\n renderManage () {\n const {manage, closeManage, fonts, fontsActions} = this.props;\n\n if (manage) {\n return (\n \n {list}\n
\n );\n } else {\n result = (\n \n No fonts yet\n
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/manage/index.js",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nimport Manage from './manage';\n\nconst tabs = [\n {\n title: 'Google Fonts',\n lib: 'google',\n placeholder: 'Google Fonts Link'\n },\n {\n title: 'Typekit',\n lib: 'typekit',\n placeholder: 'Typekit kit id'\n },\n {\n title: 'Fonts.com',\n lib: 'monotype',\n placeholder: 'Fonts.com project id'\n },\n {\n title: 'Font Deck',\n lib: 'fontdeck',\n placeholder: 'Fontdeck project id'\n },\n {\n title: 'Custom Fonts',\n lib: 'custom'\n }\n];\n\nexport default class ManageContainer extends Component {\n getInitState () {\n return {\n tab: 0\n };\n }\n\n changeTab (tab) {\n this.setState({\n tab\n });\n }\n\n render () {\n return (\n \n
\n );\n }\n\n renderTabButton (tabButton, index) {\n const {tab} = this.props;\n return (\n \n {tabs.map(this.renderTabButton, this)}\n
\n \n {this.renderContent()}\n \n
\n \n
\n );\n } else {\n result = (\n custom
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/manage/manage.less",
"content": "@import '~styles/colors.less';\n\n.root {\n padding: 30px;\n padding-top: 5px;\n}\n\n.tabs {\n text-align: center;\n}\n\n.tab {\n position: relative;\n font-size: 16px;\n line-height: 39px;\n color: @adminText;\n margin-bottom: 15px;\n display: inline-block;\n margin-right: 55px;\n font-weight: 600;\n\n &:hover, &.active {\n color: @primary;\n }\n\n &.active {\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0;\n border-bottom: 1px solid @primary;\n }\n }\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.inputArea {\n padding: 0 70px;\n padding-top: 50px;\n}\n\n.content {\n text-align: center;\n}\n\n.done {\n text-transform: uppercase;\n font-size: 16px;\n color: @primary;\n text-align: center;\n margin-top: 30px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/preview-text.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './preview-text.less';\n\nexport default class PreviewText extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n onChange (event) {\n this.props.onChange(event.target.value);\n }\n\n render () {\n const {value} = this.props;\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/components/preview-text.less",
"content": "@import '~styles/colors.less';\n\n.root {\n display: inline-block;\n vertical-align: top;\n\n color: @adminText;\n font-size: 20px;\n line-height: 30px;\n font-weight: 300;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0;\n margin: 0;\n width: 250px;\n\n &::-webkit-input-placeholder {\n color: @adminTextSub;\n }\n &:-moz-placeholder {\n color: @adminTextSub;\n }\n &::-moz-placeholder {\n color: @adminTextSub;\n }\n &:-ms-input-placeholder {\n color: @adminTextSub;\n }\n &::-ms-input-placeholder {\n color: @adminTextSub;\n }\n &:placeholder-shown {\n color: @adminTextSub;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/fonts/index.js",
"content": "import * as fontsActions from 'actions/fonts';\n\nimport {dataConnect} from 'relate-js';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {bindActionCreators} from 'redux';\n\nimport Fonts from './components/fonts.jsx';\n\n@dataConnect(\n (state) => ({\n fonts: state.fonts.data\n }),\n (dispatch) => ({\n fontsActions: bindActionCreators(fontsActions, dispatch)\n }),\n () => ({\n fragments: {\n settings: {\n _id: 1,\n value: 1\n }\n },\n variablesTypes: {\n settings: {\n ids: '[String]!'\n }\n },\n initialVariables: {\n settings: {\n ids: ['fonts']\n }\n }\n })\n)\nexport default class FontsContainer extends Component {\n static propTypes = {\n fonts: PropTypes.object.isRequired\n };\n\n getInitState () {\n return {\n previewText: '',\n display: 'grid',\n manage: false\n };\n }\n\n changeDisplay (display) {\n this.setState({\n display\n });\n }\n\n changePreviewText (value) {\n this.setState({\n previewText: value\n });\n }\n\n openManage () {\n this.setState({\n manage: true\n });\n }\n\n closeManage () {\n this.setState({\n manage: false\n });\n }\n\n render () {\n return (\n \n
\n );\n }\n\n renderExtraInfo () {\n const {display, mediaItem} = this.props;\n if (display === 'list') {\n const {size, dimension} = mediaItem;\n return (\n \n
\n \n
\n {mediaItem.name}
\n {momentDate.fromNow()}
\n {this.renderExtraInfo()}\n \n {size &&
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/media/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.grid {\n display: inline-block;\n vertical-align: top;\n\n width: 21.25%;\n margin-right: 5%;\n\n margin-bottom: 60px;\n border: 1px solid transparent;\n\n cursor: pointer;\n}\n\n@media screen and (min-width: 1501px) {\n .grid {\n width: 16%;\n &:nth-child(5n+5) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1500px) and (min-width: 1101px) {\n .grid {\n &:nth-child(4n+4) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1100px) and (min-width: 851px) {\n .grid {\n width: 30%;\n &:nth-child(3n+3) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 850px) and (min-width: 751px) {\n .grid {\n width: 45%;\n margin-right: 10%;\n &:nth-child(2n+2) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 750px) {\n .grid {\n width: 100%;\n margin-right: 0%;\n }\n}\n\n.preview {\n width: 100%;\n height: 125px;\n background-color: @adminBorders;\n}\n\n.info {\n padding: 15px;\n height: 65px;\n text-align: center;\n}\n\n.title {\n color: @adminTextHighlight;\n font-size: 16px;\n line-height: 19px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.date {\n color: @adminText;\n font-size: 12px;\n font-weight: 300;\n text-transform: uppercase;\n}\n\n.extras {\n margin-top: 10px;\n}\n\n.extra {\n color: @adminText;\n font-size: 12px;\n}\n\n.grid:hover, .list:hover {\n border: 1px solid @adminBorders;\n}\n\n.grid.selected, .list.selected {\n border: 1px solid @primary;\n}\n\n.list {\n display: block;\n margin-bottom: 20px;\n border: 1px solid transparent;\n cursor: pointer;\n\n .preview {\n display: table-cell;\n vertical-align: top;\n width: 300px;\n height: 150px;\n }\n .info {\n display: table-cell;\n vertical-align: middle;\n text-align: left;\n padding: 10px 30px;\n }\n .title {\n font-size: 18px;\n line-height: 24px;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/media/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Entry from './entry';\n\nexport default class MediaList extends Component {\n static fragments = {\n media: Entry.fragments.mediaItem\n };\n\n static propTypes = {\n media: PropTypes.array.isRequired,\n toggleMediaSelection: PropTypes.func.isRequired,\n selected: PropTypes.array.isRequired,\n display: PropTypes.string.isRequired\n };\n\n render () {\n const {media} = this.props;\n\n return (\n {size}
}\n {dimension && {`${dimension.width}x${dimension.height}`}
}\n \n {media.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (mediaItem) {\n const {toggleMediaSelection, selected, display} = this.props;\n return (\n \n {this.renderContent()}\n {uploadsVisible &&
\n );\n }\n\n renderContent () {\n const {mediaCount} = this.props;\n let result;\n if (mediaCount === 0) {\n result = this.renderNoContent();\n } else {\n result = this.renderHasContent();\n }\n return result;\n }\n\n renderNoContent () {\n const {uploadMediaFiles} = this.props;\n return (\n \n
\n \n \n \n Upload\n \n
\n \n You haven’t uploaded any media!\n
\n \n Just drag it into this window or click the upload button bellow.\n
\n \n Just worry about the upload, we’ll take care of categorizing it for you.\n
\n \n {`You've selected ${len} items`}\n \n \n
\n \n \n \n \n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/media/components/menu.less",
"content": "@import '~styles/colors.less';\n\n.list {\n position: absolute;\n top: 70px;\n bottom: 0; left: 0; right: 0;\n}\n\n.uploadButton {\n position: absolute;\n top: 0;\n right: 0;\n padding: 0 10px;\n :global {\n i {\n color: @adminText;\n line-height: 70px;\n font-size: 22px;\n }\n }\n &:hover :global i {\n color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/media/components/sorting.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {Link} from 'react-router';\n\nimport styles from './sorting.less';\n\nexport default class Sorting extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired,\n sort: PropTypes.string.isRequired,\n order: PropTypes.string.isRequired\n };\n\n reverseOrder (order) {\n return order === 'asc' ? 'desc' : 'asc';\n }\n\n render () {\n return (\n \n \n
\n \n Sort by: \n {this.renderSort('Date', '_id')}\n {this.renderSort('Size', 'filesize')}\n {this.renderSort('Dimension', 'dimension')}\n
\n );\n }\n\n renderSort (label, property) {\n const {location, sort, order} = this.props;\n const active = sort === property;\n const query = Object.assign({}, location.query, {\n sort: property,\n order: active ? this.reverseOrder(order) : order\n });\n\n return (\n \n {label}\n {\n active &&\n \n
\n );\n }\n\n renderStatus () {\n const {status} = this.props;\n let result;\n\n if (status === 'queue') {\n result = ;\n } else if (status === 'uploading') {\n result = {name}
\n {this.renderStatus()}\n \n {result}\n
\n \n \n \n
\n \n Uploads\n \n {uploadsFinished}\n / \n {uploads.length}\n \n
\n \n {uploads.map(this.renderUpload, this)}\n
\n \n \n
\n );\n }\n\n renderNoMenus () {\n return (\n Relax, select a menu first!
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/components/content.less",
"content": "@import '~styles/sizes.less';\n@import '~styles/colors.less';\n\n.empty {\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n\n :global i {\n font-size: 56px;\n color: @adminTextSub;\n margin-bottom: 20px;\n margin-top: 20px;\n }\n}\n\n.emptyText {\n font-size: 17px;\n color: @adminTextSub;\n}\n\n.noMenus {\n width: 440px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.noTitle {\n font-size: 36px;\n font-weight: 300;\n margin-bottom: 5px;\n color: @adminText;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/components/entry.jsx",
"content": "import cx from 'classnames';\nimport moment from 'moment';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {Link} from 'react-router';\n\nimport styles from './entry.less';\n\nexport default class MenuEntry extends Component {\n static fragments = {\n menu: {\n _id: 1,\n title: 1,\n date: 1\n }\n };\n\n static propTypes = {\n menu: PropTypes.object.isRequired,\n active: PropTypes.bool.isRequired,\n query: PropTypes.object.isRequired\n };\n\n render () {\n const {menu, active, query} = this.props;\n const date = moment(menu.date).fromNow();\n const editLink = '/admin/menus/' + menu._id;\n\n return (\n \n Create your first menu
\n {menu.title}
\n {date}
\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n height: 70px;\n border-bottom: 1px solid @adminBorders;\n padding: 16px 15px;\n position: relative;\n display: block;\n text-decoration: none;\n\n &:hover {\n background-color: @primaryBack;\n }\n}\n\n.title {\n font-size: 15px;\n color: @adminTextHighlight;\n}\n\n.date {\n font-size: 12px;\n color: @adminText;\n font-weight: 300;\n}\n\n.active {\n background-color: @primary;\n\n .title {\n color: #ffffff;\n }\n .date {\n color: #ffffff;\n }\n\n &:hover {\n background-color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Entry from './entry';\n\nexport default class MenusList extends Component {\n static fragments = {\n menus: Entry.fragments.menu\n };\n\n static propTypes = {\n menus: PropTypes.array.isRequired,\n activeId: PropTypes.string,\n query: PropTypes.object.isRequired\n };\n\n render () {\n return (\n \n {this.props.menus.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (menu, key) {\n const {activeId, query} = this.props;\n return (\n \n \n \n {this.renderNew()}\n
\n );\n }\n\n renderNew () {\n const {newOpened, closeNew} = this.props;\n if (newOpened) {\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/builder.less",
"content": "@import '~styles/colors.less';\n\n.root {\n max-width: 672px;\n margin: 0 auto;\n}\n\n.part {\n display: inline-block;\n vertical-align: top;\n position: absolute;\n top: 0;\n bottom: 0;\n}\n\n.left, .right {\n width: 50%;\n}\n\n.left {\n left: 0;\n margin-right: 50px;\n}\n.leftContent {\n position: absolute;\n top: 0;\n right: 70px;\n left: 0;\n bottom: 0;\n\n .innerScroll {\n width: 270px;\n float: right;\n }\n}\n\n.innerScroll {\n padding-right: 20px;\n}\n\n.right {\n right: 0;\n padding-left: 70px;\n}\n.rightContent {\n position: absolute;\n top: 0;\n left: 70px;\n right: 0;\n bottom: 0;\n}\n\n.center {\n left: 50%;\n width: 2px;\n background-color: @adminBorders;\n}\n\n.icon {\n position: absolute;\n top: 200px;\n left: -20px;\n font-size: 46px;\n color: @adminBorders;\n\n &:before {\n z-index: 1;\n position: relative;\n }\n &:after {\n content: '';\n position: absolute;\n left: 0; right: 0; top: 50%;\n height: 7px;\n background-color: #ffffff;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/collapsable.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './collapsable.less';\n\nexport default class Collapsable extends Component {\n static propTypes = {\n title: PropTypes.string.isRequired,\n icon: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n defaultOpened: PropTypes.bool.isRequired\n };\n\n static defaultProps = {\n defaultOpened: true\n };\n\n getInitState () {\n return {\n opened: this.props.defaultOpened\n };\n }\n\n @bind\n onClick () {\n this.setState({\n opened: !this.state.opened\n });\n }\n\n render () {\n const {opened} = this.state;\n const {title, icon} = this.props;\n return (\n \n \n \n
\n \n \n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/collapsable.less",
"content": "@import '~styles/colors.less';\n\n.root {\n margin-bottom: 35px;\n}\n\n.header {\n cursor: pointer;\n margin-bottom: 10px;\n}\n\n.icon, .title, .headerIcon {\n display: inline-block;\n vertical-align: top;\n line-height: 30px;\n color: @adminText;\n}\n\n.icon {\n font-size: 24px;\n margin-right: 13px;\n}\n\n.title {\n font-size: 14px;\n}\n\n.headerIcon {\n float: right;\n font-size: 12px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/entry.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport Draggable from 'components/dnd/draggable';\nimport Droppable from 'components/dnd/droppable';\nimport React, {PropTypes} from 'react';\n\nimport styles from './entry.less';\n\nexport default class MenuEntry extends Component {\n static propTypes = {\n item: PropTypes.object.isRequired,\n children: PropTypes.node,\n dragging: PropTypes.bool,\n draggedMenuItem: PropTypes.func,\n positionInParent: PropTypes.number,\n draggingSelf: PropTypes.bool\n };\n\n static defaultProps = {\n item: {}\n };\n\n render () {\n const {item, positionInParent, draggingSelf} = this.props;\n const {label, type} = item;\n const isNew = !(item.id && true);\n\n const dragInfo = {\n type: isNew ? 'new' : 'move',\n item,\n id: item.id,\n parentId: item.parent,\n positionInParent\n };\n\n return (\n \n \n \n {title}\n \n \n
\n {opened && this.props.children}\n \n
\n \n {label || type === 'url' && isNew && 'Where Link appears to be dragged'}\n
\n {!isNew && this.renderChildren()}\n Drop here for sub link!
\n \n {placeholderContent}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n}\n\n.draggingSelf {\n opacity: 0.5;\n}\n\n.info {\n font-size: 14px;\n padding: 3px 7px;\n line-height: 24px;\n border-radius: 4px;\n margin: 7px 0;\n cursor: move;\n}\n\n.page {\n background-color: @primaryBack;\n color: @primary;\n}\n\n.url {\n background-color: #FFFBBD;\n color: #C09F00;\n}\n\n.sub {\n margin-left: 30px;\n margin-bottom: 7px;\n}\n\n.empty {\n display: block;\n border: 1px solid @adminBorders;\n border-radius: 2px;\n line-height: 30px;\n height: 30px;\n padding: 0px 7px;\n}\n\n.emptyText {\n color: @adminText;\n font-size: 12px;\n}\n\n.dropIcon {\n font-size: 18px;\n line-height: 28px;\n color: @dropSuccess;\n}\n\n.active {\n background-color: @dropSuccessBack;\n border-color: @dropSuccess;\n text-align: center;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/index.js",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nimport MenuBuilder from './builder';\n\nexport default class MenuBuilderContainer extends Component {\n render () {\n return (\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/link/link.less",
"content": "@import '~styles/colors.less';\n\n.option {\n display: block;\n margin-bottom: 15px;\n}\n\n.label {\n color: @adminText;\n font-size: 14px;\n line-height: 32px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/menu/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {draggedMenuItem} from 'actions/menu';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport Menu from './menu';\n\n@dataConnect(\n (state) => ({\n menuId: state.router.params.id,\n dragging: state.dnd.dragging,\n menuData: state.menu,\n draggingId: state.dnd.dragInfo.id\n }),\n (dispatch) => bindActionCreators({draggedMenuItem}, dispatch),\n (props) => ({\n fragments: Menu.fragments,\n variablesTypes: {\n menu: {\n _id: 'ID!'\n }\n },\n initialVariables: {\n menu: {\n _id: props.menuId\n }\n }\n })\n)\nexport default class MenuContainer extends Component {\n static propTypes = {\n menuId: PropTypes.string.isRequired\n };\n\n componentWillReceiveProps (nextProps) {\n if (this.props.menuId !== nextProps.menuId) {\n this.props.relate.setVariables({\n menu: {\n _id: nextProps.menuId\n }\n });\n }\n }\n\n render () {\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/menus/screens/menu/components/menu-builder/menu/menu.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport Dragger from 'components/dnd/dragger';\nimport Droppable from 'components/dnd/droppable';\nimport React, {PropTypes} from 'react';\n\nimport styles from './menu.less';\nimport Entry from '../entry';\n\nexport default class Menu extends Component {\n static fragments = {\n menu: {\n _id: 1,\n data: 1\n }\n };\n\n static propTypes = {\n dragging: PropTypes.bool.isRequired,\n draggingId: PropTypes.number,\n draggedMenuItem: PropTypes.func.isRequired,\n menuData: PropTypes.object.isRequired\n };\n\n render () {\n const {menuData} = this.props;\n const hasChildren = menuData && menuData.root && menuData.root.children.length > 0;\n return (\n \n \n {\n hasChildren &&\n this.renderChildren(menuData.root.children)\n }\n \n {this.renderDragger()}\n
\n );\n }\n\n renderChildren (children) {\n return children.map(this.renderEntry, this);\n }\n\n renderEntry (id, index) {\n const {menuData, dragging, draggingId, draggedMenuItem} = this.props;\n const item = menuData[id];\n\n return (\n \n
\n Drop your links here!
\n \n Drag pages or custom links from the left and drop them in this\n section to start building your menu structure.\n
\n \n Remember you can also sort them by moving them above or bellow other items.\n
\n \n
\n );\n }\n\n renderDragger () {\n const {dragging, draggedMenuItem} = this.props;\n if (dragging) {\n return (\n \n {placeholderContent}\n
\n \n {this.renderPages()}\n
\n );\n }\n\n renderPages () {\n const {pages} = this.props;\n let result;\n\n if (this.props.loading) {\n result = (\n \n
\n );\n } else if (this.props.pages.length > 0) {\n result = pages.map(this.renderPage, this);\n } else {\n result = (\n No pages to show
\n );\n }\n\n return result;\n }\n\n renderPage (page) {\n const item = {\n type: 'page',\n typeProps: {\n pageId: page._id\n },\n label: page.title\n };\n return (\n \n \n \n {this.renderState()}\n \n \n \n
\n );\n }\n\n renderState () {\n const {saveMenu, state} = this.props;\n return \n
\n \n
\n {this.renderDeleteConfirm()}\n \n
\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n height: 70px;\n border-bottom: 1px solid @adminBorders;\n padding: 13px;\n position: relative;\n display: block;\n text-decoration: none;\n\n &:hover {\n background-color: @primaryBack;\n }\n}\n\n.status {\n position: absolute;\n left: 13px;\n top: 30px;\n width: 10px;\n height: 10px;\n background-color: @draft;\n border-radius: 50%;\n}\n\n.published {\n background-color: @primary;\n}\n\n.info {\n padding-left: 25px;\n padding-top: 3px;\n}\n\n.title {\n font-size: 15px;\n color: @adminTextHighlight;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.date {\n font-size: 12px;\n color: @adminText;\n font-weight: 300;\n}\n\n.active {\n background-color: @primary;\n\n .status.published {\n background-color: #ffffff;\n }\n .title {\n color: #ffffff;\n }\n .date {\n color: #ffffff;\n }\n\n &:hover {\n background-color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Entry from './entry';\n\nexport default class PagesList extends Component {\n static fragments = {\n pages: Entry.fragments.page\n };\n\n static propTypes = {\n pages: PropTypes.array.isRequired,\n activePageId: PropTypes.string,\n query: PropTypes.object.isRequired\n };\n\n render () {\n return (\n {page.title}
\n {date}
\n \n {this.props.pages.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (page, key) {\n const {activePageId, query} = this.props;\n return (\n \n \n \n {this.renderNew()}\n
\n );\n }\n\n renderNew () {\n const {newOpened, closeNew} = this.props;\n if (newOpened) {\n return (\n \n \n
\n );\n }\n\n renderNoPages () {\n return (\n Relax, select a page first!
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/components/pages.less",
"content": "@import '~styles/sizes.less';\n@import '~styles/colors.less';\n\n.empty {\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n\n :global i {\n font-size: 56px;\n color: @adminTextSub;\n margin-bottom: 20px;\n margin-top: 20px;\n }\n}\n\n.emptyText {\n font-size: 17px;\n color: @adminTextSub;\n}\n\n.noPages {\n width: 440px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.noTitle {\n font-size: 36px;\n font-weight: 300;\n margin-bottom: 5px;\n color: @adminText;\n}\n\n.noText {\n font-size: 16px;\n color: @adminText;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {dataConnect} from 'relate-js';\n\nimport Pages from './components/pages.jsx';\n\n@dataConnect(\n () => ({\n fragments: {\n pagesCount: true\n }\n })\n)\nexport default class PagesContainer extends Component {\n static propTypes = {\n children: PropTypes.node,\n pagesCount: PropTypes.number\n };\n\n render () {\n const {pagesCount} = this.props;\n return (\n Oh my!
\n \n You don’t have any pages yet!\n
\n Lets change that\n
\n \n Lets change that\n
\n {this.renderStatus()}\n
\n );\n }\n\n renderStatus () {\n const {page} = this.props;\n let result;\n\n if (page.state === 'draft') {\n return this.renderDraftStatus();\n } else if (page.state === 'published') {\n return this.renderPublishedStatus();\n }\n\n return result;\n }\n\n renderDraftStatus () {\n const {publishPage} = this.props;\n return (\n \n
\n \n \n
\n \n \n
\n );\n }\n\n renderPublishedStatus () {\n const {unpublishPage} = this.props;\n return (\n This page is still a draft
\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/screens/page/components/info/info.less",
"content": "@import '~styles/colors.less';\n\n.root {\n padding: 30px 25px;\n}\n\n.actionButton {\n display: inline-block;\n color: @alert;\n font-weight: 300;\n font-size: 13px;\n text-transform: uppercase;\n}\n\n.bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 15px 20px;\n text-align: center;\n border-top: 1px solid @adminBorders;\n}\n\n.draft {\n margin-bottom: 45px;\n text-align: center;\n}\n\n.publishButton {\n display: inline-block;\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n color: @primary;\n line-height: 22px;\n font-size: 16px;\n }\n i {\n margin-right: 5px;\n }\n span {\n text-transform: uppercase;\n }\n }\n}\n\n.unpublishButton {\n display: inline-block;\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n color: @draft;\n line-height: 22px;\n font-size: 16px;\n }\n i {\n margin-right: 5px;\n }\n span {\n text-transform: uppercase;\n }\n }\n}\n\n.label {\n font-size: 13px;\n color: @adminText;\n margin-top: 12px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/screens/page/components/info/item.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './item.less';\n\nexport default class InfoItem extends Component {\n static propTypes = {\n icon: PropTypes.string,\n image: PropTypes.string,\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired\n };\n\n render () {\n const {icon, label, value, image} = this.props;\n return (\n This page is published
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/screens/page/components/info/item.less",
"content": "@import '~styles/colors.less';\n\n.root {\n margin-bottom: 35px;\n}\n\n.icon {\n font-size: 14px;\n line-height: 20px;\n color: @adminText;\n width: 20px;\n text-align: center;\n margin-right: 7px;\n}\n\n.image {\n display: inline-block;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n overflow: hidden;\n margin-right: 7px;\n}\n\n.infoLabel {\n font-size: 13px;\n color: @adminTextHighlight;\n line-height: 20px;\n text-transform: uppercase;\n}\n\n.infoValue {\n padding-left: 27px;\n color: @adminText;\n font-size: 13px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/screens/page/components/page.jsx",
"content": "import cx from 'classnames';\nimport velocity from 'velocity-animate';\nimport A from 'components/a';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport ContentHeader from 'components/content-header';\nimport ContentHeaderActions from 'components/content-header-actions';\nimport ContentLoading from 'components/content-loading';\nimport ContentSidebar from 'components/content-sidebar';\nimport EditableTitle from 'components/editable-title';\nimport PageBuilder from 'components/page-builder';\nimport React, {PropTypes} from 'react';\nimport {findDOMNode} from 'react-dom';\n\nimport styles from './page.less';\nimport Info from './info';\nimport Revisions from './revisions';\n\nexport default class Page extends Component {\n static fragments = {\n page: {\n _id: 1,\n title: 1,\n slug: 1\n }\n };\n\n static propTypes = {\n page: PropTypes.object.isRequired,\n location: PropTypes.object.isRequired,\n updateTitle: PropTypes.func.isRequired,\n updateSlug: PropTypes.func.isRequired,\n loading: PropTypes.bool.isRequired,\n togglePageInfo: PropTypes.func.isRequired,\n togglePageRevisions: PropTypes.func.isRequired,\n pageId: PropTypes.string.isRequired,\n sidebar: PropTypes.string\n };\n\n static defaultProps = {\n page: {}\n };\n\n getInitState () {\n const {location} = this.props;\n return {\n build: location.query.build && true\n };\n }\n\n componentWillReceiveProps (nextProps) {\n const {location} = this.props;\n const oldBuild = location.query.build;\n const currentBuild = nextProps.location.query.build;\n\n if (this.props.pageId !== nextProps.pageId) {\n this.setState({\n build: location.query.build && true\n });\n }\n\n if (oldBuild !== currentBuild) {\n const config = {\n duration: 800,\n display: null,\n easing: 'easeOutExpo'\n };\n if (currentBuild) {\n velocity(this.refs.content, {top: '0px'}, config);\n // velocity(findDOMNode(this.refs.header), {translateY: '-70px'}, config);\n velocity(findDOMNode(this.refs.cover), {opacity: 0}, Object.assign({}, config, {display: 'none'}));\n } else {\n velocity(this.refs.content, {top: '70px'}, config);\n // velocity(findDOMNode(this.refs.header), {translateY: '0px'}, config);\n velocity(findDOMNode(this.refs.cover), {opacity: 1}, Object.assign({}, config, {display: 'block'}));\n }\n }\n }\n\n render () {\n const {loading, page} = this.props;\n let result;\n\n if (loading) {\n result = (\n \n {icon && }\n {image && 
}\n \n {label}\n \n
\n \n {value}\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n
\n \n {this.renderSidebar()}\n Click to Build
\n Page Revisions
;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/pages/screens/page/index.js",
"content": "import bind from 'decorators/bind';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {updatePageTitle, updatePageSlug} from 'actions/page';\nimport {addTab} from 'actions/tabs';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport Page from './components/page';\n\n@dataConnect(\n (state) => ({\n pageId: state.router.params.id,\n location: state.router.location\n }),\n (dispatch) => bindActionCreators({updatePageTitle, updatePageSlug, addTab}, dispatch),\n (props) => ({\n fragments: Page.fragments,\n variablesTypes: {\n page: {\n _id: 'ID!'\n }\n },\n initialVariables: {\n page: {\n _id: props.pageId\n }\n }\n })\n)\nexport default class PageContainer extends Component {\n static propTypes = {\n relate: PropTypes.object.isRequired,\n page: PropTypes.object.isRequired,\n pageId: PropTypes.string.isRequired,\n location: PropTypes.object.isRequired,\n updatePage: PropTypes.func.isRequired\n };\n\n getInitState () {\n this.processTab(this.props);\n return {\n sidebar: null\n };\n }\n\n componentWillReceiveProps (nextProps) {\n if (this.props.pageId !== nextProps.pageId) {\n this.setState({\n sidebar: null\n });\n this.props.relate.setVariables({\n page: {\n _id: nextProps.pageId\n }\n });\n }\n\n const oldBuild = this.props.location.query.build;\n const currentBuild = nextProps.location.query.build;\n if (oldBuild !== currentBuild || this.props.pageId !== nextProps.pageId) {\n this.processTab(nextProps);\n }\n }\n\n processTab (props) {\n const currentBuild = props.location.query.build;\n if (currentBuild) {\n this.props.addTab('page', props.pageId);\n }\n }\n\n @bind\n updateTitle (title) {\n const {page} = this.props;\n return this.props.updatePageTitle(page._id, title);\n }\n\n @bind\n updateSlug (slug) {\n const {page} = this.props;\n return this.props.updatePageSlug(page._id, slug);\n }\n\n @bind\n togglePageInfo () {\n const {sidebar} = this.state;\n this.setState({\n sidebar: sidebar === 'info' ? null : 'info'\n });\n }\n\n @bind\n togglePageRevisions () {\n const {sidebar} = this.state;\n this.setState({\n sidebar: sidebar === 'revisions' ? null : 'revisions'\n });\n }\n\n render () {\n const {page, location, loading, pageId} = this.props;\n return (\n \n
\n \n {this.renderSchemaType(schema.type)}\n
\n ...and now create the content model.
\n {`What properties will ${schema.title} single contain?`}
\n \n \n \n
\n \n \n
\n );\n } else if (type === 'data') {\n result = (\n {schema.title}
\n \n \n
\n );\n }\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/model.less",
"content": "@import '~styles/colors.less';\n\n.root {\n text-align: center;\n padding: 30px;\n\n width: 800px;\n max-width: 100%;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n.header {\n font-size: 36px;\n color: @adminText;\n}\n\n.subHeader {\n font-size: 16px;\n color: @adminText;\n}\n\n.option {\n display: inline-block;\n vertical-align: top;\n margin-top: 40px;\n margin-bottom: 70px;\n\n :global i {\n color: @adminText;\n font-size: 40px;\n margin-bottom: 10px;\n }\n}\n\n.title {\n font-size: 26px;\n color: @primary;\n}\n\n.buttons {\n margin: 40px 0;\n}\n\n.button {\n font-size: 16px;\n text-transform: uppercase;\n color: @adminText;\n margin: 0 10px;\n}\n\n.primary {\n color: @primary;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/name.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport Input from 'components/modal-input';\nimport React, {PropTypes} from 'react';\n\nimport styles from './name.less';\n\nexport default class SchemaName extends Component {\n static propTypes = {\n schema: PropTypes.object.isRequired,\n schemaStepBack: PropTypes.func.isRequired,\n schemaStepForward: PropTypes.func.isRequired,\n changeSchemaTitle: PropTypes.func.isRequired\n };\n\n render () {\n const {schema, schemaStepBack, schemaStepForward, changeSchemaTitle} = this.props;\n return (\n {schema.title}
\n \n
\n );\n }\n\n renderSchemaType (type) {\n let result;\n if (type === 'single') {\n result = (\n \n {this.renderSchemaType(schema.type)}\n
\n \n
\n Let's give it a name!
\n \n \n \n
\n \n \n
\n );\n } else if (type === 'data') {\n result = (\n With URL
\n Single Page
\n \n \n
\n );\n }\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/name.less",
"content": "@import '~styles/colors.less';\n\n.root {\n text-align: center;\n padding: 30px;\n position: absolute;\n width: 100%;\n left: 50%;\n transform: translate(-50%, 0%);\n}\n\n.holder {\n display: inline-block;\n width: 330px;\n padding-bottom: 40px;\n}\n\n.header {\n font-size: 36px;\n margin-bottom: 30px;\n color: @adminText;\n}\n\n.option {\n display: inline-block;\n vertical-align: top;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n border: 1px solid @adminTextSub;\n margin-top: 40px;\n margin-bottom: 60px;\n\n :global i {\n color: @adminText;\n font-size: 40px;\n margin-bottom: 10px;\n margin-top: 45px;\n }\n}\n\n.title {\n font-size: 16px;\n font-weight: 600;\n color: @adminText;\n}\n\n.subTitle {\n font-size: 12px;\n color: @adminTextSub;\n}\n\n.buttons {\n margin: 40px 0;\n}\n\n.button {\n font-size: 16px;\n text-transform: uppercase;\n color: @adminText;\n margin: 0 10px;\n}\n\n.primary {\n color: @primary;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/properties/index.js",
"content": "import * as schemaActions from 'actions/schema';\n\nimport Component from 'components/component';\nimport React from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport Properties from './properties';\n\n@connect(\n (state) => ({\n openedProperties: state.schema.openedProperties,\n properties: state.schema.data.properties\n }),\n (dispatch) => bindActionCreators(schemaActions, dispatch)\n)\nexport default class SchemasBuilderPropertiesContainer extends Component {\n render () {\n return (\n Without URL
\n Multiple Table Entries
\n \n {singleFixedProperties.map(this.renderProperty, this)}\n {properties.map(this.renderProperty, this)}\n \n
\n );\n }\n\n renderProperty (property, key) {\n const {openedProperties, toggleProperty, changePropertySetting} = this.props;\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/properties/property-options.less",
"content": ".root {\n text-align: left;\n padding: 20px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/properties/property.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './property.less';\nimport PropertyOptions from './property-options';\n\nexport default class SchemaProperty extends Component {\n static propTypes = {\n property: PropTypes.object.isRequired,\n opened: PropTypes.bool.isRequired,\n toggleProperty: PropTypes.func.isRequired,\n changePropertySetting: PropTypes.func.isRequired\n };\n\n @bind\n onToggle () {\n const {toggleProperty, property} = this.props;\n toggleProperty(property.id);\n }\n\n render () {\n const {property} = this.props;\n return (\n \n
\n );\n }\n\n renderIcon () {\n const {opened, property} = this.props;\n let result;\n if (property.locked) {\n result = (\n \n );\n } else {\n result = (\n \n );\n }\n return result;\n }\n\n renderOpened () {\n const {opened, property} = this.props;\n if (opened && !property.locked) {\n const {changePropertySetting} = this.props;\n return (\n \n
\n {this.renderOpened()}\n \n
\n {property.title}
\n {property.id}
\n \n
\n {property.type}
\n {this.renderIcon()}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/components/builder/types.less",
"content": "@import '~styles/colors.less';\n\n.root {\n text-align: center;\n padding: 30px;\n position: absolute;\n width: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.subHeader {\n font-size: 16px;\n color: @adminText;\n}\n\n.header {\n font-size: 36px;\n color: @primary;\n font-weight: 300;\n}\n\n.options {\n margin-top: 80px;\n}\n\n.or {\n display: inline-block;\n vertical-align: top;\n line-height: 320px;\n font-size: 26px;\n font-weight: 600;\n color: @adminText;\n padding: 0 50px;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/new/index.js",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nimport Builder from './components/builder';\n\nexport default class SchemasNewContainer extends Component {\n render () {\n return (\n Let's create some new content types!
\n What type of content is this?
\n \n
\n or
\n \n
\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/schema/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n height: 70px;\n border-bottom: 1px solid @adminBorders;\n padding: 13px;\n position: relative;\n display: block;\n text-decoration: none;\n\n &:hover {\n background-color: @primaryBack;\n }\n}\n\n.status {\n position: absolute;\n left: 13px;\n top: 30px;\n width: 10px;\n height: 10px;\n background-color: #F7CF00;\n border-radius: 50%;\n}\n\n.published {\n background-color: @primary;\n}\n\n.info {\n padding-left: 25px;\n padding-top: 3px;\n}\n\n.title {\n font-size: 15px;\n color: @adminTextHighlight;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.date {\n font-size: 12px;\n color: @adminText;\n font-weight: 300;\n}\n\n.active {\n background-color: @primary;\n\n .status.published {\n background-color: #ffffff;\n }\n .title {\n color: #ffffff;\n }\n .date {\n color: #ffffff;\n }\n\n &:hover {\n background-color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/schema/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Entry from './entry';\n\nexport default class SchemaEntriesList extends Component {\n static fragments = {\n schemaList: Entry.fragments.schemaEntry\n };\n\n static propTypes = {\n schemaList: PropTypes.array.isRequired,\n activeSchemaEntryId: PropTypes.string,\n query: PropTypes.object.isRequired\n };\n\n render () {\n return (\n {schemaEntry.title}
\n {date}
\n \n {this.props.schemaList.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (schemaEntry, key) {\n const {activeSchemaEntryId, query} = this.props;\n return (\n \n \n \n {this.renderNew()}\n
\n );\n }\n\n renderNew () {\n const {newOpened, closeNew, schema} = this.props;\n if (newOpened) {\n return (\n \n \n
\n );\n }\n\n renderNoPages () {\n const {schemaId} = this.props;\n return (\n Relax, select an entry first!
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/schema/components/schema.less",
"content": "@import '~styles/sizes.less';\n@import '~styles/colors.less';\n\n.empty {\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n\n :global i {\n font-size: 56px;\n color: @adminTextSub;\n margin-bottom: 20px;\n margin-top: 20px;\n }\n}\n\n.emptyText {\n font-size: 17px;\n color: @adminTextSub;\n}\n\n.noEntries {\n width: 440px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.noTitle {\n font-size: 36px;\n font-weight: 300;\n margin-bottom: 5px;\n color: @adminText;\n}\n\n.noText {\n font-size: 16px;\n color: @adminText;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/schemas/screens/schema/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {dataConnect} from 'relate-js';\n\nimport Schema from './components/schema';\n\n@dataConnect(\n (state) => ({\n schemaId: state.router.params.id\n }),\n (props) => ({\n fragments: {\n schemaListCount: true\n },\n variablesTypes: {\n schemaListCount: {\n schemaId: 'ID!'\n }\n },\n initialVariables: {\n schemaListCount: {\n schemaId: props.schemaId\n }\n },\n mutations: {\n addSchemaEntry: [\n {\n type: 'INCREMENT',\n field: 'schemaListCount'\n }\n ]\n }\n })\n)\nexport default class SchemaContainer extends Component {\n static propTypes = {\n children: PropTypes.node,\n schemaId: PropTypes.string.isRequired\n };\n\n render () {\n const {schemaListCount, schemaId} = this.props;\n return (\n Oh my!
\n \n You don’t have any entries yet!\n
\n Lets change that\n
\n \n Lets change that\n
\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/components/menu.less",
"content": ".list {\n position: absolute;\n top: 70px;\n bottom: 0; left: 0; right: 0;\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/menu.js",
"content": "import * as adminMenuActions from 'actions/admin-menu';\n\nimport bind from 'decorators/bind';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport Menu from './components/menu';\n\n@connect(\n (state) => ({\n pathname: state.router.location.pathname\n }),\n (dispatch) => bindActionCreators(adminMenuActions, dispatch)\n)\nexport default class SettingsMenuContainer extends Component {\n static propTypes = {\n closeAdminMenu: PropTypes.func.isRequired,\n openAdminMenu: PropTypes.func.isRequired,\n pathname: PropTypes.string.isRequired\n };\n\n componentDidMount () {\n this.props.openAdminMenu();\n }\n\n @bind\n onBack () {\n this.props.closeAdminMenu();\n }\n\n render () {\n const {pathname} = this.props;\n return (\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/screens/analytics/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport AnalyticsSettings from './components/analytics';\n\nconst options = [\n {\n label: 'Google analytics tracking ID',\n type: 'String',\n id: 'googleAnalytics',\n props: {\n placeholder: 'UA-XXXXX-Y'\n }\n }\n];\n\nexport default class AnalyticsSettingsContainer extends Component {\n static propTypes = {};\n\n render () {\n return (\n Data Settings
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/screens/data/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport DataSettings from './components/data';\n\nexport default class DataSettingsContainer extends Component {\n static propTypes = {};\n\n render () {\n return (\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/screens/email/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport EmailSettings from './components/email';\n\nconst options = [\n {\n label: 'Mail service',\n type: 'Select',\n id: 'mailService',\n props: {\n values: [\n '1und1',\n 'AOL',\n 'DebugMail.io',\n 'DynectEmail',\n 'FastMail',\n 'GandiMail',\n 'Gmail',\n 'Godaddy',\n 'GodaddyAsia',\n 'GodaddyEurope',\n 'hot.ee',\n 'Hotmail',\n 'iCloud',\n 'mail.ee',\n 'Mail.ru',\n 'Mailgun',\n 'Mailjet',\n 'Mandrill',\n 'Naver',\n 'Postmark',\n 'QQ',\n 'QQex',\n 'SendCloud',\n 'SendGrid',\n 'SES',\n 'Sparkpost',\n 'Yahoo',\n 'Yandex',\n 'Zoho'\n ]\n }\n },\n {\n label: 'Mail user/email',\n type: 'String',\n id: 'mailUser'\n },\n {\n label: 'Mail user password',\n type: 'String',\n id: 'mailPass',\n props: {\n password: true\n }\n },\n {\n label: 'Send emails to',\n type: 'String',\n id: 'mailTo'\n }\n];\n\nexport default class EmailSettingsContainer extends Component {\n static propTypes = {};\n\n render () {\n return (\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/settings/screens/general/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport GeneralSettings from './components/general';\n\nconst options = [\n {\n label: 'Site Title',\n type: 'String',\n id: 'title',\n default: ''\n },\n // {\n // label: 'Frontpage',\n // type: 'PagePicker',\n // id: 'frontpage'\n // },\n // {\n // label: 'Favicon',\n // type: 'Image',\n // id: 'favicon',\n // props: {\n // width: 50,\n // height: 50,\n // type: 'favicon'\n // }\n // },\n // {\n // label: 'Webclip',\n // type: 'Image',\n // id: 'webclip',\n // props: {\n // width: 114,\n // height: 114\n // }\n // }\n];\n\nexport default class GeneralSettingsContainer extends Component {\n static propTypes = {};\n\n render () {\n return (\n \n {this.props.children}\n
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/users/components/entry.less",
"content": "@import '~styles/colors.less';\n\n.root {\n width: 21.25%;\n margin-right: 5%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: 60px;\n border: 1px solid transparent;\n text-align: center;\n}\n\n@media screen and (min-width: 1501px) {\n .root {\n width: 16%;\n &:nth-child(5n+5) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1500px) and (min-width: 1101px) {\n .root {\n &:nth-child(4n+4) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1100px) and (min-width: 851px) {\n .root {\n width: 30%;\n &:nth-child(3n+3) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 850px) and (min-width: 751px) {\n .root {\n width: 45%;\n margin-right: 10%;\n &:nth-child(2n+2) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 750px) {\n .root {\n width: 100%;\n margin-right: 0%;\n }\n}\n\n.user {\n width: 125px;\n height: 125px;\n display: inline-block;\n vertical-align: top;\n border-radius: 50%;\n overflow: hidden;\n margin-top: 10px;\n}\n\n.info {\n padding: 15px;\n height: 65px;\n text-align: center;\n}\n\n.title {\n color: @adminTextHighlight;\n font-size: 16px;\n line-height: 19px;\n}\n\n.value {\n color: @adminText;\n font-size: 14px;\n font-weight: 300;\n}\n\n.actions {\n visibility: hidden;\n border-top: 1px solid @adminBorders;\n}\n\n.button {\n height: 39px;\n line-height: 39px;\n font-size: 12px;\n text-transform: uppercase;\n color: @adminText;\n}\n\n.remove {\n color: @alert;\n}\n\n.root:hover {\n border: 1px solid @adminBorders;\n .actions {\n visibility: visible;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/screens/users/components/list.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Entry from './entry';\n\nexport default class List extends Component {\n static fragments = {\n users: Entry.fragments.user\n };\n\n static propTypes = {\n users: PropTypes.array.isRequired,\n onDelete: PropTypes.func.isRequired,\n search: PropTypes.string.isRequired\n };\n\n render () {\n const {users} = this.props;\n return (\n \n \n
\n \n
\n {user.name}
\n {user.email}
\n \n \n
\n \n {users.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (user) {\n const {onDelete, search} = this.props;\n const inSearch = !search || user.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;\n if (inSearch) {\n return (\n \n \n \n Add new user \n \n \n \n \n {this.renderNew()}\n {this.renderDeleteConfirm()}\n
\n );\n }\n\n renderNew () {\n const {newOpened, closeNew} = this.props;\n if (newOpened) {\n return (\n \n \n
\n \n {this.props.children}\n
\n \n {this.props.children}\n
\n \n \n \n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-displays/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n display: inline-block;\n vertical-align: top;\n padding: 0 15px;\n}\n\n.button {\n display: inline-block;\n vertical-align: top;\n width: 30px;\n height: 30px;\n margin: 0 5px;\n :global i {\n font-size: 22px;\n line-height: 30px;\n color: @adminText;\n }\n}\n\n.active {\n :global i {\n color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-header/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ContentHeader extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n smallPadding: PropTypes.bool\n };\n\n static defaultProps = {\n smallPadding: false\n };\n\n render () {\n const {smallPadding} = this.props;\n return (\n \n {this.props.children}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-header/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n height: 70px;\n border-bottom: 1px solid @adminBorders;\n padding: 20px 20px;\n line-height: 30px;\n}\n\n.smallPadding {\n padding: 10px 20px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-header-actions/index.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ContentHeaderActions extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired\n };\n\n render () {\n return (\n \n {this.props.children}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-header-actions/index.less",
"content": ".root {\n float: right;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-loading/index.jsx",
"content": "import Animate from 'components/animate';\nimport Component from 'components/component';\nimport React from 'react';\nimport Spinner from 'components/spinner';\n\nimport styles from './index.less';\n\nexport default class ContentLoading extends Component {\n render () {\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-loading/index.less",
"content": ".root {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n}\n\n.center {\n display: inline-block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-new/index.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ContentNew extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired\n };\n\n render () {\n const {children, onClick} = this.props;\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-new/index.less",
"content": "@import '~styles/colors.less';\n\n.button {\n display: inline-block;\n vertical-align: top;\n padding: 0 20px;\n color: @adminText;\n text-transform: uppercase;\n font-size: 12px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-search/index.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ContentSearch extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n onChange (event) {\n this.props.onChange(event.target.value);\n }\n\n render () {\n const {value} = this.props;\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-search/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n display: inline-block;\n vertical-align: top;\n\n :global i {\n font-size: 24px;\n line-height: 30px;\n color: @adminTextSub;\n margin-right: 10px;\n }\n}\n\n.input {\n display: inline-block;\n vertical-align: top;\n color: @adminTextSub;\n font-size: 20px;\n line-height: 30px;\n font-weight: 300;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0;\n margin: 0;\n width: 200px;\n\n &::-webkit-input-placeholder {\n color: @adminTextSub;\n }\n &:-moz-placeholder {\n color: @adminTextSub;\n }\n &::-moz-placeholder {\n color: @adminTextSub;\n }\n &:-ms-input-placeholder {\n color: @adminTextSub;\n }\n &::-ms-input-placeholder {\n color: @adminTextSub;\n }\n &:placeholder-shown {\n color: @adminTextSub;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-sidebar/index.jsx",
"content": "import velocity from 'velocity-animate';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ContentSidebar extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n opened: PropTypes.bool.isRequired\n };\n\n componentWillReceiveProps (nextProps) {\n if (this.props.opened !== nextProps.opened) {\n const config = {\n duration: 800,\n display: null,\n easing: 'easeOutExpo'\n };\n if (nextProps.opened) {\n velocity(this.refs.root, {right: '0px'}, config);\n } else {\n velocity(this.refs.root, {right: '-290px'}, config);\n }\n }\n }\n\n render () {\n return (\n \n \n \n
\n \n {this.props.children}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/content-sidebar/index.less",
"content": "@import '~styles/colors.less';\n@import '~styles/sizes.less';\n\n.root {\n position: absolute;\n border-top: 1px solid @adminBorders;\n border-left: 1px solid @adminBorders;\n top: -1px; right: -@menuWidth; bottom: 0;\n width: @menuWidth;\n background-color: #ffffff;\n z-index: 11;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/editable-title/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class EditableTitle extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n sub: PropTypes.bool,\n onSubmit: PropTypes.func.isRequired\n };\n\n getInitState () {\n return {\n editing: false\n };\n }\n\n componentWillReceiveProps (nextProps) {\n if (this.state.editing && nextProps.value !== this.props.value) {\n this.setState({\n editing: false\n });\n }\n }\n\n componentDidUpdate (prevProps, prevState) {\n if (!prevState.editing && this.state.editing) {\n const input = this.refs.input;\n\n if (input) {\n input.focus && input.focus();\n const len = this.state.editValue.length;\n input.setSelectionRange && input.setSelectionRange(len, len);\n }\n }\n }\n\n onClick () {\n this.setState({\n editing: true,\n editValue: this.props.value\n });\n }\n\n onChange (event) {\n this.setState({\n editValue: event.target.value\n });\n }\n\n cancel (event) {\n event.preventDefault();\n this.setState({\n editing: false,\n editValue: ''\n });\n }\n\n onSubmit (event) {\n event.preventDefault();\n this.props\n .onSubmit(this.state.editValue)\n .then(() => {\n this.setState({\n editing: false\n });\n });\n }\n\n render () {\n const {sub} = this.props;\n return (\n \n {this.renderContent()}\n
\n );\n }\n\n renderContent () {\n const {editing} = this.state;\n const {value} = this.props;\n let result;\n\n if (!editing) {\n result = (\n \n );\n } else {\n result = (\n \n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/editable-title/index.less",
"content": "@import '~styles/colors.less';\n\n.title {\n display: inline-block;\n\n font-weight: 300;\n font-size: 18px;\n line-height: 26px;\n height: 26px;\n color: @adminTextHighlight;\n}\n\n.editButton {\n :global i {\n color: @adminText;\n font-size: 16px;\n line-height: 26px;\n margin-left: 10px;\n opacity: 0;\n transition: all 0.1s ease-out;\n }\n\n &:hover :global i {\n opacity: 1;\n }\n}\n\n.input {\n display: inline-block;\n vertical-align: top;\n border: 0;\n outline: 0;\n padding: 0;\n width: 350px;\n margin-right: 10px;\n}\n\n.formButton {\n display: inline-block;\n vertical-align: top;\n text-transform: uppercase;\n font-size: 11px;\n margin-left: 10px;\n line-height: 26px;\n height: 26px;\n}\n\n.confirmButton {\n color: @primary;\n}\n\n.cancelButton {\n color: @adminText;\n\n &:hover {\n color: @alert;\n }\n}\n\n.sub {\n .title {\n font-size: 12px;\n line-height: 25px;\n height: 25px;\n color: @adminText;\n }\n .editButton {\n :global i {\n font-size: 13px;\n line-height: 25px;\n }\n }\n .formButton {\n line-height: 25px;\n height: 25px;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/border/index.jsx",
"content": "import cx from 'classnames';\nimport BorderStyle from 'components/input-options/border-style';\nimport ColorPicker from 'components/input-options/color';\nimport Component from 'components/component';\nimport NumberInput from 'components/input-options/number';\nimport React from 'react';\n\nimport styles from './index.less';\n\nexport default class BorderPicker extends Component {\n static propTypes = {\n value: React.PropTypes.object.isRequired,\n onChange: React.PropTypes.func.isRequired\n };\n\n getInitState () {\n this.onWidhtChange = this.onInputChange.bind(this, 'width');\n this.onColorChange = this.onInputChange.bind(this, 'color');\n this.onStyleChange = this.onInputChange.bind(this, 'style');\n\n return {\n selected: 'center',\n values: this.parseValue(this.props.value)\n };\n }\n\n componentWillReceiveProps (nextProps) {\n this.setState({\n values: this.parseValue(nextProps.value)\n });\n }\n\n onInputChange (id, value) {\n if (this.state.selected === 'center') {\n this.state.values.top[id] = value;\n this.state.values.right = Object.assign({}, this.state.values.top);\n this.state.values.bottom = Object.assign({}, this.state.values.top);\n this.state.values.left = Object.assign({}, this.state.values.top);\n this.state.values.equal = true;\n } else {\n this.state.values[this.state.selected][id] = value;\n }\n this.props.onChange(Object.assign({}, this.state.values));\n }\n\n parseValue (value) {\n const result = {\n top: {\n style: 'solid',\n width: 1,\n color: {\n value: '#000000',\n opacity: 100\n }\n },\n left: {\n style: 'solid',\n width: 1,\n color: {\n value: '#000000',\n opacity: 100\n }\n },\n right: {\n style: 'solid',\n width: 1,\n color: {\n value: '#000000',\n opacity: 100\n }\n },\n bottom: {\n style: 'solid',\n width: 1,\n color: {\n value: '#000000',\n opacity: 100\n }\n },\n equal: false\n };\n\n if (value) {\n result.top = value.top || result.top;\n result.left = value.left || result.left;\n result.right = value.right || result.right;\n result.bottom = value.bottom || result.bottom;\n }\n\n if (this.equal(result.top, result.right) &&\n this.equal(result.top, result.bottom) &&\n this.equal(result.top, result.left)) {\n result.equal = true;\n } else {\n result.equal = false;\n }\n\n return result;\n }\n\n equal (comp1, comp2) {\n return (\n comp1.style === comp2.style &&\n comp1.width === comp2.width &&\n comp1.color.value === comp2.color.value &&\n comp1.color.opacity === comp2.color.opacity\n );\n }\n\n changeSelected (selected, event) {\n event.preventDefault();\n this.setState({\n selected\n });\n }\n\n render () {\n const values = this.state.values;\n let value = 0;\n let inactive = false;\n\n if (this.state.selected !== 'center') {\n value = values[this.state.selected];\n } else {\n inactive = !values.equal;\n value = values.top;\n\n if (inactive) {\n value.style = 'solid';\n }\n }\n\n return (\n \n
\n );\n }\n\n renderToggleButton (pos, active) {\n const changeSelected = this.changeSelected.bind(this, pos);\n return (\n \n {this.renderToggleButton('top', !values.equal)}\n {this.renderToggleButton('left', !values.equal)}\n {this.renderToggleButton('right', !values.equal)}\n {this.renderToggleButton('bottom', !values.equal)}\n {this.renderToggleButton('center', values.equal)}\n
\n \n {this.renderOption('solid')}\n {this.renderOption('dashed')}\n {this.renderOption('dotted')}\n {this.renderOption('double')}\n
\n );\n }\n\n renderOption (type) {\n const {value} = this.props;\n const onClick = this.onClick.bind(this, type);\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/box-shadow/index.jsx",
"content": "import cloneDeep from 'lodash.clonedeep';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\nimport Shadow from './shadow';\n\nexport default class BoxShadow extends Component {\n static propTypes = {\n value: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n static defaultProps = {\n value: []\n };\n\n getInitState () {\n return {\n editingShadow: false\n };\n }\n\n addNewClick () {\n this.props.onChange([...this.props.value, {\n type: 'outset',\n color: '#000000',\n spread: '2px',\n blur: '2px',\n x: '2px',\n y: '2px'\n }]);\n this.setState({\n editingShadow: this.props.value.length\n });\n }\n\n changeShadow (key, value) {\n if (this.state.editingShadow !== false) {\n const newValue = cloneDeep(this.props.value);\n newValue[this.state.editingShadow][key] = value;\n this.props.onChange(newValue);\n }\n }\n\n selectShadow (index) {\n if (this.state.editingShadow === index) {\n this.setState({\n editingShadow: false\n });\n } else {\n this.setState({\n editingShadow: index\n });\n }\n }\n\n removeShadow (index) {\n const newValue = cloneDeep(this.props.value);\n newValue.splice(index, 1);\n this.props.onChange(newValue);\n }\n\n render () {\n return (\n \n {this.props.value.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (shadow, index) {\n return (\n Add new shadow
\n \n
\n );\n }\n\n renderEditing () {\n if (this.props.editing && this.state.ready) {\n return (\n {\n this.ref = ref;\n !this.state.ready && this.setState({ready: true});\n }}\n >\n
\n {this.renderEditing()}\n \n {`${shadow.type}, ${colorLabel}, ${shadow.x} ${shadow.y}, ${shadow.blur}, ${shadow.spread}`}\n
\n \n \n
\n \n
\n );\n }\n\n renderContent () {\n if (this.props.opened) {\n return (\n {this.ref = ref;}}>\n
\n {this.renderContent()}\n \n \n
\n {label}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/color-picker.less",
"content": ".root {\n position: relative;\n width: 100%;\n height: 184px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/color.jsx",
"content": "import Component from 'components/component';\nimport Portal from 'components/portal';\nimport Stick from 'components/stick';\nimport React, {PropTypes} from 'react';\nimport {findDOMNode} from 'react-dom';\n\nimport styles from './color.less';\n\nexport default class Color extends Component {\n static fragments = {\n color: {\n _id: 1,\n label: 1,\n value: 1\n }\n };\n\n static propTypes = {\n color: PropTypes.object.isRequired,\n selectColor: PropTypes.func.isRequired,\n addOverlay: PropTypes.func.isRequired,\n closeOverlay: PropTypes.func.isRequired\n };\n\n getInitState () {\n return {\n overed: false\n };\n }\n\n onClick () {\n this.props.selectColor(this.props.color._id);\n }\n\n onMouseEnter () {\n this.setState({\n overed: true,\n element: findDOMNode(this)\n });\n }\n\n onMouseLeave () {\n this.setState({\n overed: false\n });\n }\n\n render () {\n const style = {\n backgroundColor: this.props.color.value\n };\n\n return (\n \n \n {color.label}\n
\n \n \n
\n );\n }\n\n renderColor (color) {\n return (\n Color Collection
\n \n {this.props.colors.map(this.renderColor, this)}\n \n \n \n
\n {this.renderAdding()}\n \n \n {gradients &&\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/edit.less",
"content": ".root {\n position: relative;\n width: 270px;\n padding: 6px;\n border-radius: 4px;\n background-color: #ffffff;\n z-index: 1;\n\n -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n\n transform: translateY(3px);\n}\n\n.triangle {\n position: absolute;\n background-color: #ffffff;\n text-align: left;\n display: inline-block;\n top: -9px;\n left: 24px;\n\n transform: rotate(-60deg) skewX(-30deg) scale(1,.866);\n\n &:before, &:after {\n content: '';\n position: absolute;\n background-color: inherit;\n }\n\n &, &:before, &:after {\n width: 10px;\n height: 10px;\n border-top-right-radius: 40%;\n }\n\n &:before {\n transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);\n }\n\n &:after {\n transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/gradient-points.jsx",
"content": "import cx from 'classnames';\nimport utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {applyBackground, getColorString} from 'helpers/colors';\n\nimport styles from './gradient-points.less';\n\nexport default class GradientPoints extends Component {\n static propTypes = {\n editingPoint: PropTypes.number.isRequired,\n value: PropTypes.object.isRequired,\n colors: PropTypes.array.isRequired,\n changeEditingPoint: PropTypes.func.isRequired,\n pointPercChange: PropTypes.func.isRequired,\n addPoint: PropTypes.func.isRequired,\n removePoint: PropTypes.func.isRequired\n };\n\n constructor (props, children) {\n super(props, children);\n this.onMouseUpListener = this.onMouseUp.bind(this);\n this.onMouseMoveListener = this.onMouseMove.bind(this);\n }\n\n componentWillUnmount () {\n document.removeEventListener('mouseup', this.onMouseUpListener);\n document.removeEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseDown (index, event) {\n event.preventDefault();\n event.stopPropagation();\n\n this.activePoint = index;\n\n document.addEventListener('mouseup', this.onMouseUpListener);\n document.addEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseMove (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.bar);\n const perc = utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1);\n\n if (this.props.value.points.length > 2) {\n const verticalOffset = Math.abs(event.pageY - bounds.top);\n\n if (verticalOffset > 50) {\n this.activePointDelete = true;\n } else {\n this.activePointDelete = false;\n }\n }\n\n this.props.pointPercChange(this.activePoint, utils.roundSnap(perc * 100, [0, 25, 50, 75, 100]));\n }\n\n onMouseUp (event) {\n event.preventDefault();\n event.stopPropagation();\n this.componentWillUnmount();\n if (this.activePointDelete) {\n this.activePointDelete = false;\n this.props.removePoint(this.activePoint);\n }\n }\n\n markerClicked (number, event) {\n event.preventDefault();\n event.stopPropagation();\n this.props.changeEditingPoint(number);\n }\n\n addPoint (event) {\n const bounds = utils.getOffsetRect(this.refs.bar);\n const perc = utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1);\n\n this.props.addPoint(Math.round(perc * 100));\n }\n\n render () {\n const gradStyle = {};\n applyBackground(gradStyle, Object.assign({}, this.props.value, {angle: 0, type: 'linear'}), this.props.colors);\n\n return (\n \n
\n );\n }\n\n renderPoint (colorObj, index) {\n const markerStyle = {\n left: `${colorObj.perc}%`,\n transform: `translate(${-colorObj.perc}%, -50%)`\n };\n const selected = this.props.editingPoint === index;\n if (selected) {\n markerStyle.backgroundColor = getColorString(colorObj, this.props.colors);\n }\n if (this.activePoint === index && this.activePointDelete) {\n markerStyle.visibility = 'hidden';\n }\n const onClick = this.markerClicked.bind(this, index);\n const onMouseDown = this.onMouseDown.bind(this, index);\n\n return (\n \n \n {this.props.value.points.map(this.renderPoint, this)}\n
\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/hue.less",
"content": ".root {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 10px;\n border-radius: 4px;\n background: linear-gradient(to top, #FF0000 0%, #FF0099 10%, #CD00FF 20%, #3200FF 30%, #0066FF 40%, #00FFFD 50%, #00FF66 60%, #35FF00 70%, #CDFF00 80%, #FF9900 90%, #FF0000 100%);\n \n &:after {\n content: '';\n position: absolute;\n display: block;\n border-radius: 4px;\n top: 0px; right: 0px; bottom: 0px; left: 0px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n}\n\n.marker {\n position: absolute;\n display: inline-block;\n width: 12px;\n height: 8px;\n border: 1px solid rgba(0, 0, 0, 0.4);\n background-color: #ffffff;\n border-radius: 2px;\n z-index: 1;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n cursor: pointer;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/index.js",
"content": "import * as colorsActions from 'actions/colors';\n\nimport forEach from 'lodash.foreach';\nimport sortBy from 'lodash.sortby';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {getColor} from 'helpers/colors';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport ColorPalettePicker from './color-palette-picker';\n\nconst INPUT_TYPES = ['hex', 'rgba', 'hsva'];\n\n@dataConnect(\n null,\n (dispatch) => ({\n colorsActions: bindActionCreators(colorsActions, dispatch)\n }),\n () => ({\n fragments: {\n colors: {\n _id: 1,\n label: 1,\n value: 1\n }\n }\n })\n)\nexport default class ColorPalettePickerContainer extends Component {\n static propTypes = {\n value: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n colors: PropTypes.array,\n colorsActions: PropTypes.object.isRequired,\n gradients: PropTypes.bool.isRequired,\n white: PropTypes.bool,\n className: PropTypes.string\n };\n\n static defaultProps = {\n colors: [],\n gradients: false\n };\n\n getInitState () {\n return {\n opened: false,\n inputType: 0,\n addingColor: false,\n addingColorName: '',\n editingPoint: 0\n };\n }\n\n onChange (changes) {\n this.props.onChange(Object.assign({}, this.props.value || {}, changes));\n }\n\n selectColor (id) {\n this.valueChange('palette', id);\n }\n\n hsvChange (hsv) {\n this.valueChange('hsv', hsv);\n }\n\n hexChange (hex) {\n this.valueChange('hex', hex);\n }\n\n rgbChange (rgb) {\n this.valueChange('rgb', rgb);\n }\n\n valueChange (valueType, value) {\n const type = this.props.value && this.props.value.type || 'hex';\n\n if (type !== 'radial' && type !== 'linear') {\n const currentColor = this.getCurrentColor();\n this.props.onChange({\n type: valueType,\n value,\n opacity: currentColor.opacity\n });\n } else {\n const editingPoint = Math.min(this.state.editingPoint, this.props.value.points.length);\n const points = [];\n forEach(this.props.value.points, (point, index) => {\n if (index === editingPoint) {\n points.push(Object.assign({}, point, {\n type: valueType,\n value\n }));\n } else {\n points.push(point);\n }\n });\n this.props.onChange(Object.assign({}, this.props.value, {points}));\n }\n }\n\n opacityChange (opacity) {\n const type = this.props.value && this.props.value.type || 'hex';\n\n if (type !== 'radial' && type !== 'linear') {\n this.props.onChange({\n type: this.props.value && this.props.value.type || 'hex',\n value: this.props.value && this.props.value.value || '#000000',\n opacity\n });\n } else {\n const editingPoint = Math.min(this.state.editingPoint, this.props.value.points.length);\n const points = [];\n forEach(this.props.value.points, (point, index) => {\n if (index === editingPoint) {\n points.push(Object.assign({}, point, {\n opacity\n }));\n } else {\n points.push(point);\n }\n });\n this.props.onChange(Object.assign({}, this.props.value, {points}));\n }\n }\n\n toggleOpened () {\n this.setState({\n opened: !this.state.opened\n });\n }\n\n previousInputType () {\n this.setState({\n inputType: this.state.inputType === 0 ? INPUT_TYPES.length - 1 : this.state.inputType - 1\n });\n }\n\n nextInputType () {\n this.setState({\n inputType: this.state.inputType === INPUT_TYPES.length - 1 ? 0 : this.state.inputType + 1\n });\n }\n\n toggleAddingColor () {\n this.setState({\n addingColor: !this.state.addingColor\n });\n }\n\n changeAddingColor (addingColorName) {\n this.setState({\n addingColorName\n });\n }\n\n addColor () {\n if (this.state.addingColorName) {\n const color = getColor(this.props.value || {\n type: 'hex',\n value: '#000000',\n opacity: 100\n }, this.props.colors);\n\n this.props.colorsActions\n .addColor({\n color: {\n _id: 1,\n label: 1,\n value: 1\n }\n }, {\n label: this.state.addingColorName,\n value: color.colr.toHex()\n })\n .then((result) => {\n this.selectColor(result.addColor._id);\n this.setState({\n addingColor: false,\n addingColorName: ''\n });\n });\n }\n }\n\n changeToSolid () {\n if (this.props.value.type === 'linear' || this.props.value.type === 'radial') {\n if (this.props.value.type === 'linear') {\n this.previousLinear = this.props.value;\n } else {\n this.previousRadial = this.props.value;\n }\n this.props.onChange({\n type: this.props.value.points[0].type,\n value: this.props.value.points[0].value,\n opacity: this.props.value.points[0].opacity\n });\n }\n }\n\n changeToLinear () {\n if (this.props.value.type !== 'linear') {\n this.setState({\n editingPoint: 0\n }, () => {\n if (this.props.value.type !== 'radial' && this.previousLinear) {\n this.props.onChange(this.previousLinear);\n } else {\n let points = [];\n if (this.props.value.type === 'radial') {\n points = this.props.value.points;\n } else {\n points = [\n Object.assign({perc: 0}, this.props.value),\n Object.assign({perc: 100}, this.props.value)\n ];\n }\n\n this.props.onChange({\n type: 'linear',\n angle: 0,\n points\n });\n }\n });\n }\n }\n\n changeToRadial () {\n if (this.props.value.type !== 'radial') {\n if (this.props.value.type !== 'linear' && this.previousRadial) {\n this.props.onChange(this.previousRadial);\n } else {\n let points = [];\n if (this.props.value.type === 'linear') {\n points = this.props.value.points;\n } else {\n points = [\n Object.assign({perc: 0}, this.props.value),\n Object.assign({perc: 100}, this.props.value)\n ];\n }\n\n this.props.onChange({\n type: 'radial',\n radius: 'fs',\n center: {\n top: 50,\n left: 50\n },\n points\n });\n }\n }\n }\n\n changeAngle (angle) {\n this.props.onChange(Object.assign({}, this.props.value, {angle}));\n }\n\n changeRadius (radius) {\n this.props.onChange(Object.assign({}, this.props.value, {radius}));\n }\n\n changeCenter (center) {\n this.props.onChange(Object.assign({}, this.props.value, {center}));\n }\n\n changeEditingPoint (editingPoint) {\n this.setState({\n editingPoint\n });\n }\n\n pointPercChange (editingPoint, perc) {\n const points = [];\n forEach(this.props.value.points, (point, index) => {\n if (index === editingPoint) {\n points.push(Object.assign({}, point, {\n perc\n }));\n } else {\n points.push(point);\n }\n });\n this.props.onChange(Object.assign({}, this.props.value, {points}));\n }\n\n addPoint (perc) {\n const orderedPoints = sortBy(this.props.value.points, 'perc');\n let to = 0;\n forEach(orderedPoints, (point, index) => {\n if (point.perc < perc) {\n to = index + 1;\n } else {\n return false;\n }\n });\n\n let newPoint;\n if (to === 0) {\n newPoint = Object.assign({}, orderedPoints[0], {perc});\n } else if (to === orderedPoints.length) {\n newPoint = Object.assign({}, orderedPoints[orderedPoints.length - 1], {perc});\n } else {\n newPoint = Object.assign({}, orderedPoints[to - 1], {perc});\n }\n const newPoints = this.props.value.points.slice(0);\n newPoints.splice(to, 0, newPoint);\n this.props.onChange(Object.assign({}, this.props.value, {\n points: newPoints\n }));\n this.setState({\n editingPoint: to\n });\n }\n\n removePoint (index) {\n if (this.props.value.points.length > 2) {\n const newPoints = this.props.value.points.slice(0);\n newPoints.splice(index, 1);\n this.props.onChange(Object.assign({}, this.props.value, {\n points: newPoints\n }));\n this.setState({\n editingPoint: 0\n });\n }\n }\n\n getCurrentColor () {\n return getColor(this.props.value || {\n type: 'hex',\n value: '#000000',\n opacity: 100\n }, this.props.colors);\n }\n\n render () {\n const type = this.props.value && this.props.value.type || 'hex';\n let color;\n\n if (type !== 'linear' && type !== 'radial') {\n color = this.getCurrentColor();\n } else {\n color = getColor(\n this.props.value.points[Math.min(this.state.editingPoint, this.props.value.points.length)],\n this.props.colors\n );\n }\n\n return (\n {label}
\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/input.less",
"content": "@import '~styles/colors.less';\n\n.input {\n display: inline-block;\n width: 70px;\n margin: 0 4.5px;\n}\n\n.small {\n width: 38px;\n}\n\n.inputField {\n width: 100%;\n text-align: center;\n background-color: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.2);\n padding: 3.5px;\n font-size: 12px;\n line-height: 15px;\n color: #999999;\n\n &:focus {\n border-color: @primary;\n }\n}\n\n.label {\n font-size: 8px;\n color: #999999;\n line-height: 17px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/inputs.jsx",
"content": "import utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {hexIsValid} from 'helpers/colors';\n\nimport styles from './inputs.less';\nimport Input from './input';\n\nexport default class Inputs extends Component {\n static propTypes = {\n colr: PropTypes.object.isRequired,\n opacity: PropTypes.number.isRequired,\n previousInputType: PropTypes.func.isRequired,\n nextInputType: PropTypes.func.isRequired,\n inputType: PropTypes.string.isRequired,\n hexChange: PropTypes.func.isRequired,\n hsvChange: PropTypes.func.isRequired,\n rgbChange: PropTypes.func.isRequired,\n opacityChange: PropTypes.func.isRequired\n };\n\n init () {\n this.onRChange = this.onRGBChange.bind(this, 'r');\n this.onGChange = this.onRGBChange.bind(this, 'g');\n this.onBChange = this.onRGBChange.bind(this, 'b');\n this.onHChange = this.onHSVChange.bind(this, 'h');\n this.onSChange = this.onHSVChange.bind(this, 's');\n this.onVChange = this.onHSVChange.bind(this, 'v');\n }\n\n onHexChange (value) {\n if (hexIsValid(value)) {\n this.props.hexChange(value);\n }\n }\n\n onRGBChange (prop, value) {\n const number = parseInt(value, 10);\n\n if (!isNaN(number)) {\n const rgb = this.props.colr.toRgbObject();\n rgb[prop] = utils.limitNumber(number, 0, 255);\n this.props.rgbChange(rgb);\n }\n }\n\n onHSVChange (prop, value) {\n const number = parseInt(value, 10);\n\n if (!isNaN(number)) {\n const hsv = this.props.colr.toHsvObject();\n if (prop === 'h') {\n hsv[prop] = utils.limitNumber(number, 0, 360);\n } else {\n hsv[prop] = utils.limitNumber(number, 0, 100);\n }\n this.props.hsvChange(hsv);\n }\n }\n\n onOpacityChange (value) {\n const opacity = parseInt(value, 10);\n\n if (!isNaN(opacity)) {\n this.props.opacityChange(utils.limitNumber(opacity, 0, 100));\n }\n }\n\n render () {\n return (\n \n \n \n \n {this.renderInputs()}\n \n \n \n
\n );\n }\n\n renderInputs () {\n const {inputType, opacity, colr} = this.props;\n\n if (inputType === 'hex') {\n const hex = colr.toHex();\n return (\n \n \n \n
\n );\n } else if (inputType === 'rgba') {\n const rgb = colr.toRgbObject();\n return (\n \n \n \n \n \n
\n );\n } else if (inputType === 'hsva') {\n const hsv = colr.toHsvObject();\n return (\n \n \n \n \n \n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/inputs.less",
"content": ".root {\n position: relative;\n padding-top: 12px;\n padding-bottom: 4px;\n}\n\n.previous, .next {\n position: absolute;\n display: inline-block;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n cursor: pointer;\n\n :global i {\n font-size: 12px;\n color: #999999;\n line-height: 12px;\n }\n\n &:hover :global i {\n color: #333333;\n }\n}\n.previous {\n left: 0;\n}\n.next {\n right: 0;\n}\n\n.inputs {\n padding: 0 12px;\n text-align: center;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/linear-gradient.jsx",
"content": "import cx from 'classnames';\nimport sortBy from 'lodash.sortby';\nimport utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {applyBackground, getColorString} from 'helpers/colors';\n\nimport styles from './linear-gradient.less';\n\nexport default class LinearGradient extends Component {\n static propTypes = {\n editingPoint: PropTypes.number.isRequired,\n value: PropTypes.object.isRequired,\n colors: PropTypes.array.isRequired,\n changeEditingPoint: PropTypes.func.isRequired,\n pointPercChange: PropTypes.func.isRequired,\n addPoint: PropTypes.func.isRequired,\n changeAngle: PropTypes.func.isRequired\n };\n\n constructor (props, children) {\n super(props, children);\n this.onMouseUpListener = this.onMouseUp.bind(this);\n this.onMouseMoveListener = this.onMouseMove.bind(this);\n }\n\n getInitState () {\n return {\n dragging: false\n };\n }\n\n componentWillUnmount () {\n document.removeEventListener('mouseup', this.onMouseUpListener);\n document.removeEventListener('mousemove', this.onMouseMoveListener);\n }\n\n markerClicked (number) {\n this.props.changeEditingPoint(number);\n }\n\n onMouseDown (index, event) {\n event.preventDefault();\n event.stopPropagation();\n\n const orderedPoints = sortBy(this.props.value.points, 'perc');\n this.activePoint = index;\n this.activeFirst = orderedPoints[0] === this.props.value.points[index];\n this.activeLast = orderedPoints[orderedPoints.length - 1] === this.props.value.points[index];\n\n this.setState({\n dragging: true\n });\n\n document.addEventListener('mouseup', this.onMouseUpListener);\n document.addEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseMove (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.holder);\n const point = {\n x: utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1),\n y: 1 - utils.limitNumber((event.pageY - bounds.top) / bounds.height, 0, 1)\n };\n\n if (this.activeFirst || this.activeLast) {\n // point.y = 1 - point.y;\n const center = {\n x: 0.5,\n y: 0.5\n };\n const lineAngle = this.getLineAngle(center, point);\n\n let newAngle;\n if (lineAngle > 359 && lineAngle < 360) {\n newAngle = 0;\n } else {\n newAngle = utils.roundSnap(lineAngle, [0, 45, 90, 135, 180, 225, 270, 315]);\n }\n\n if (this.activeFirst) {\n newAngle -= 180;\n if (newAngle < 0) {\n newAngle += 360;\n }\n }\n this.props.changeAngle(newAngle);\n }\n const pointA = this.getRectPoint(this.props.value.angle, 158);\n const pointB = {\n x: -pointA.x,\n y: -pointA.y\n };\n\n const newPoint = {\n x: ((point.x - 0.5) * 2) * 156,\n y: ((point.y - 0.5) * 2) * 156\n };\n\n const xDelta = pointA.x - pointB.x;\n const yDelta = pointA.y - pointB.y;\n const u =\n ((newPoint.x - pointB.x) * xDelta + (newPoint.y - pointB.y) * yDelta) /\n (xDelta * xDelta + yDelta * yDelta);\n\n let closestPoint;\n if (u < 0) {\n closestPoint = {\n x: pointB.x,\n y: pointB.y\n };\n } else if (u > 1) {\n closestPoint = {\n x: pointA.x,\n y: pointA.y\n };\n } else {\n closestPoint = {\n x: Math.round(pointB.x + u * xDelta),\n y: Math.round(pointB.y + u * yDelta)\n };\n }\n const total = utils.pointsDistance(pointA, pointB);\n const dist = utils.pointsDistance(pointB, closestPoint);\n\n this.props.pointPercChange(this.activePoint, utils.roundSnap(dist / total * 100, [0, 25, 50, 75, 100]));\n }\n\n onMouseUp (event) {\n event.preventDefault();\n event.stopPropagation();\n this.componentWillUnmount();\n\n this.setState({\n dragging: false\n });\n }\n\n onLineClick (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.holder);\n const point = {\n x: utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1),\n y: 1 - utils.limitNumber((event.pageY - bounds.top) / bounds.height, 0, 1)\n };\n\n const pointA = this.getRectPoint(this.props.value.angle, 158);\n const pointB = {\n x: -pointA.x,\n y: -pointA.y\n };\n const newPoint = {\n x: ((point.x - 0.5) * 2) * 156,\n y: ((point.y - 0.5) * 2) * 156\n };\n\n const total = utils.pointsDistance(pointA, pointB);\n const dist = utils.pointsDistance(pointB, newPoint);\n\n this.props.addPoint(Math.round(dist / total * 100));\n }\n\n getLineAngle (pointA, pointB) {\n const dy = pointB.y - pointA.y;\n const dx = pointB.x - pointA.x;\n let theta = Math.atan2(dy, dx) * 180 / Math.PI; // range (-180, 180)\n if (theta < 0) {\n theta += 360;\n }\n return theta;\n }\n\n getRectPoint (angle, radius) {\n const result = {\n x: 0,\n y: 0\n };\n if (angle >= 0 && angle <= 45) {\n result.x = radius;\n result.y = radius * Math.tan(angle * Math.PI / 180);\n } else if (angle > 45 && angle <= 90) {\n result.x = radius * Math.tan((45 - (angle - 45)) * Math.PI / 180);\n result.y = radius;\n } else if (angle > 90 && angle <= 180) {\n const calc = this.getRectPoint(angle - 90, radius);\n result.x = -calc.y;\n result.y = calc.x;\n } else if (angle > 180 && angle <= 270) {\n const calc = this.getRectPoint(angle - 180, radius);\n result.x = -calc.x;\n result.y = -calc.y;\n } else if (angle > 270 && angle <= 360) {\n const calc = this.getRectPoint(angle - 270, radius);\n result.x = calc.y;\n result.y = -calc.x;\n }\n return result;\n }\n\n render () {\n return (\n \n {this.renderContent()}\n
\n );\n }\n\n renderContent () {\n const gradStyle = {};\n applyBackground(gradStyle, this.props.value, this.props.colors);\n\n const angle = this.props.value.angle;\n const pointA = this.getRectPoint(angle, 158);\n const pointB = {\n x: -pointA.x,\n y: -pointA.y\n };\n\n // relative to html axis\n pointA.x = pointA.x + 158;\n pointA.y = 158 - pointA.y;\n pointB.x = pointB.x + 158;\n pointB.y = 158 - pointB.y;\n\n const orderedPoints = sortBy(this.props.value.points, 'perc');\n const firstPointPosition = utils.getPointInLineByPerc(\n pointB,\n pointA,\n orderedPoints[0].perc\n );\n const lastPointPosition = utils.getPointInLineByPerc(\n pointB,\n pointA,\n orderedPoints[orderedPoints.length - 1].perc\n );\n\n return (\n \n \n {this.props.value.points.map(this.renderPoint.bind(this, pointA, pointB))}\n {this.renderAngle()}\n
\n );\n }\n\n renderPoint (pointA, pointB, colorObj, index) {\n const pointPosition = utils.getPointInLineByPerc(pointB, pointA, colorObj.perc);\n const selected = this.props.editingPoint === index;\n const style = {\n left: pointPosition.x,\n top: pointPosition.y,\n backgroundColor: getColorString(colorObj, this.props.colors)\n };\n const onClick = this.markerClicked.bind(this, index);\n const onMouseDown = this.onMouseDown.bind(this, index);\n\n return (\n \n {`${angle}º`}\n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/linear-gradient.less",
"content": ".root {\n position: absolute;\n display: inline-block;\n top: 30px;\n width: 316px;\n height: 316px;\n left: -336px;\n background-color: #ffffff;\n\n -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);\n\n &:before {\n content: '';\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n opacity: 0.5;\n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiPHPmDAMMGBsbw9lMDDgA6RKM%2F%2F%2F%2Fh3POnj1LCzsAAgwAQtYIcFfEyzkAAAAASUVORK5CYII%3D');\n }\n}\n\n.content {\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n}\n\n.lineSVG {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n -webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.24));\n filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.24));\n}\n\n.line {\n cursor: copy;\n}\n\n.point {\n position: absolute;\n display: inline-block;\n width: 10px;\n height: 10px;\n border: 2px solid #ffffff;\n transform: translate(-50%, -50%);\n border-radius: 5px;\n cursor: pointer;\n\n -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.22);\n -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.22);\n box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.22);\n\n &.selected {\n width: 14px;\n height: 14px;\n border-radius: 7px;\n }\n}\n\n.angleInfo {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n background-color: #333333;\n width: 22px;\n height: 22px;\n border-radius: 11px;\n text-align: center;\n display: inline-block;\n color: #efefef;\n font-size: 10px;\n line-height: 22px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/opacity.jsx",
"content": "import utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './opacity.less';\n\nexport default class Opacity extends Component {\n static propTypes = {\n opacity: PropTypes.number.isRequired,\n opacityChange: PropTypes.func.isRequired,\n colr: PropTypes.object.isRequired\n };\n\n constructor (props, children) {\n super(props, children);\n this.onMouseUpListener = this.onMouseUp.bind(this);\n this.onMouseMoveListener = this.onMouseMove.bind(this);\n }\n\n componentWillUnmount () {\n document.removeEventListener('mouseup', this.onMouseUpListener);\n document.removeEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseDown (event) {\n event.preventDefault();\n event.stopPropagation();\n\n this.onMouseMove(event);\n\n document.addEventListener('mouseup', this.onMouseUpListener);\n document.addEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseMove (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.bar);\n const perc = utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1);\n\n this.props.opacityChange(Math.round(perc * 100));\n }\n\n onMouseUp (event) {\n event.preventDefault();\n event.stopPropagation();\n this.componentWillUnmount();\n }\n\n render () {\n const {opacity, colr} = this.props;\n const markerStyle = {\n left: `${opacity}%`,\n transform: `translate(${-opacity}%, -50%)`\n };\n const rgb = colr.toRgbObject();\n const gradStyle = {\n background:\n `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b},0) 0%,rgba(${rgb.r},${rgb.g},${rgb.b},1) 100%)`\n };\n\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/opacity.less",
"content": ".root {\n width: 100%;\n height: 10px;\n margin-top: 4px;\n position: relative;\n}\n\n.opacity {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 14px;\n border-radius: 4px;\n\n &:before {\n content: '';\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n opacity: 0.5;\n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiPHPmDAMMGBsbw9lMDDgA6RKM%2F%2F%2F%2Fh3POnj1LCzsAAgwAQtYIcFfEyzkAAAAASUVORK5CYII%3D');\n }\n\n &:after {\n content: '';\n position: absolute;\n display: block;\n border-radius: 4px;\n top: 0px; right: 0px; bottom: 0px; left: 0px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n}\n\n.gradient {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n border-radius: 4px;\n background: -moz-linear-gradient(left, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);\n background: -webkit-linear-gradient(left, rgba(255,0,0,0) 0%,rgba(255,0,0,1) 100%);\n background: linear-gradient(to right, rgba(255,0,0,0) 0%,rgba(255,0,0,1) 100%);\n}\n\n.marker {\n position: absolute;\n display: inline-block;\n width: 8px;\n height: 12px;\n border: 1px solid rgba(0, 0, 0, 0.4);\n background-color: #ffffff;\n border-radius: 2px;\n z-index: 1;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n cursor: pointer;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/radial-gradient.jsx",
"content": "import cx from 'classnames';\nimport forEach from 'lodash.foreach';\nimport sortBy from 'lodash.sortby';\nimport utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {applyBackground, getColorString} from 'helpers/colors';\n\nimport styles from './radial-gradient.less';\n\nconst size = 316;\n\nexport default class RadialGradient extends Component {\n static propTypes = {\n editingPoint: PropTypes.number.isRequired,\n value: PropTypes.object.isRequired,\n colors: PropTypes.array.isRequired,\n changeEditingPoint: PropTypes.func.isRequired,\n pointPercChange: PropTypes.func.isRequired,\n addPoint: PropTypes.func.isRequired,\n changeCenter: PropTypes.func.isRequired\n };\n\n constructor (props, children) {\n super(props, children);\n this.onMouseUpListener = this.onMouseUp.bind(this);\n this.onMouseMoveListener = this.onMouseMove.bind(this);\n }\n\n getInitState () {\n return {\n dragging: false\n };\n }\n\n componentWillUnmount () {\n document.removeEventListener('mouseup', this.onMouseUpListener);\n document.removeEventListener('mousemove', this.onMouseMoveListener);\n }\n\n markerClicked (number) {\n this.props.changeEditingPoint(number);\n }\n\n onMouseDown (index, event) {\n event.preventDefault();\n event.stopPropagation();\n\n const orderedPoints = sortBy(this.props.value.points, 'perc');\n this.activePoint = index;\n this.activeFirst = orderedPoints[0] === this.props.value.points[index];\n this.activeLast = orderedPoints[orderedPoints.length - 1] === this.props.value.points[index];\n\n this.setState({\n dragging: true\n });\n\n document.addEventListener('mouseup', this.onMouseUpListener);\n document.addEventListener('mousemove', this.onMouseMoveListener);\n }\n\n onMouseMove (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.holder);\n const point = {\n x: utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1),\n y: utils.limitNumber((event.pageY - bounds.top) / bounds.height, 0, 1)\n };\n\n if (this.activeFirst) {\n this.props.changeCenter({\n top: utils.roundSnap(point.y * 100, [0, 25, 50, 75, 100]),\n left: utils.roundSnap(point.x * 100, [0, 25, 50, 75, 100])\n });\n } else {\n const {pointA, pointB} = this.getRadialLine();\n\n const newPoint = {\n x: point.x * size,\n y: point.y * size\n };\n\n const xDelta = pointA.x - pointB.x;\n const yDelta = pointA.y - pointB.y;\n const u =\n 1 -\n ((newPoint.x - pointB.x) * xDelta + (newPoint.y - pointB.y) * yDelta) /\n (xDelta * xDelta + yDelta * yDelta);\n\n let closestPoint;\n if (u < 0) {\n closestPoint = {\n x: pointB.x,\n y: pointB.y\n };\n } else if (u > 1) {\n closestPoint = {\n x: pointA.x,\n y: pointA.y\n };\n } else {\n closestPoint = {\n x: Math.round(pointB.x + u * xDelta),\n y: Math.round(pointB.y + u * yDelta)\n };\n }\n const total = utils.pointsDistance(pointA, pointB);\n const dist = utils.pointsDistance(pointB, closestPoint);\n\n this.props.pointPercChange(this.activePoint, utils.roundSnap(dist / total * 100, [0, 25, 50, 75, 100]));\n }\n }\n\n onMouseUp (event) {\n event.preventDefault();\n event.stopPropagation();\n this.componentWillUnmount();\n\n this.setState({\n dragging: false\n });\n }\n\n onLineClick (event) {\n event.preventDefault();\n\n const bounds = utils.getOffsetRect(this.refs.holder);\n const point = {\n x: utils.limitNumber((event.pageX - bounds.left) / bounds.width, 0, 1),\n y: utils.limitNumber((event.pageY - bounds.top) / bounds.height, 0, 1)\n };\n\n const {pointA, pointB} = this.getRadialLine();\n const newPoint = {\n x: point.x * size,\n y: point.y * size\n };\n\n const total = utils.pointsDistance(pointA, pointB);\n const dist = utils.pointsDistance(pointA, newPoint);\n\n this.props.addPoint(Math.round(dist / total * 100));\n }\n\n getRadialLine () {\n const radius = this.props.value.radius;\n const center = this.props.value.center;\n\n const pointA = {\n x: size * center.left / 100,\n y: size * center.top / 100\n };\n let pointB;\n\n if (radius[1] === 'c') {\n let closestPoint;\n let closestDistance = 999;\n let farthestPoint;\n let farthestDistance = 0;\n\n const corners = [\n {x: 0, y: 0},\n {x: size, y: 0},\n {x: size, y: size},\n {x: 0, y: size}\n ];\n\n forEach(corners, (cornerPoint) => {\n const distance = utils.pointsDistance(pointA, cornerPoint);\n if (distance > farthestDistance) {\n farthestDistance = distance;\n farthestPoint = cornerPoint;\n }\n if (distance < closestDistance) {\n closestDistance = distance;\n closestPoint = cornerPoint;\n }\n });\n\n if (radius === 'fc') {\n pointB = farthestPoint;\n } else {\n pointB = closestPoint;\n }\n } else {\n let closestPoint;\n let closestDistance = 999;\n let farthestPoint;\n let farthestDistance = 0;\n\n const sides = [\n {x: 0, y: pointA.y},\n {x: pointA.x, y: 0},\n {x: size, y: pointA.y},\n {x: pointA.x, y: size}\n ];\n\n forEach(sides, (sidePoint) => {\n const distance = utils.pointsDistance(pointA, sidePoint);\n if (distance > farthestDistance) {\n farthestDistance = distance;\n farthestPoint = sidePoint;\n }\n if (distance < closestDistance) {\n closestDistance = distance;\n closestPoint = sidePoint;\n }\n });\n\n if (radius === 'fs') {\n pointB = farthestPoint;\n } else {\n pointB = closestPoint;\n }\n }\n\n return {\n pointA,\n pointB\n };\n }\n\n render () {\n return (\n \n \n \n
\n \n {this.renderContent()}\n
\n );\n }\n\n renderContent () {\n const gradStyle = {};\n applyBackground(gradStyle, this.props.value, this.props.colors);\n\n const radialLine = this.getRadialLine();\n\n const orderedPoints = sortBy(this.props.value.points, 'perc');\n const firstPointPosition = utils.getPointInLineByPerc(\n radialLine.pointA,\n radialLine.pointB,\n orderedPoints[0].perc\n );\n const lastPointPosition = utils.getPointInLineByPerc(\n radialLine.pointA,\n radialLine.pointB,\n orderedPoints[orderedPoints.length - 1].perc\n );\n\n return (\n \n \n {this.props.value.points.map(this.renderPoint.bind(this, radialLine.pointA, radialLine.pointB))}\n
\n );\n }\n\n renderPoint (pointA, pointB, colorObj, index) {\n const pointPosition = utils.getPointInLineByPerc(pointA, pointB, colorObj.perc);\n const selected = this.props.editingPoint === index;\n const style = {\n left: pointPosition.x,\n top: pointPosition.y,\n backgroundColor: getColorString(colorObj, this.props.colors)\n };\n const onClick = this.markerClicked.bind(this, index);\n const onMouseDown = this.onMouseDown.bind(this, index);\n return (\n \n \n \n
\n Radius
\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/sat-light.less",
"content": ".root {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 14px;\n background-color: #ff0000;\n border-radius: 4px;\n\n &:before, &:after {\n content: '';\n position: absolute;\n display: block;\n border-radius: 4px;\n top: 0px; right: 0px; bottom: 0px; left: 0px;\n }\n &:before {\n background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);\n background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);\n background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);\n }\n &:after {\n background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);\n background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);\n background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);\n }\n}\n\n.border {\n position: absolute;\n display: block;\n border-radius: 4px;\n z-index: 1;\n top: 0px; right: 0px; bottom: 0px; left: 0px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n}\n\n.marker {\n position: absolute;\n display: inline-block;\n width: 10px;\n height: 10px;\n border: 2px solid #ffffff;\n border-radius: 5px;\n z-index: 1;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n cursor: pointer;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/types.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './types.less';\n\nexport default class Types extends Component {\n static propTypes = {\n type: PropTypes.string.isRequired,\n changeToSolid: PropTypes.func.isRequired,\n changeToLinear: PropTypes.func.isRequired,\n changeToRadial: PropTypes.func.isRequired\n };\n\n render () {\n const {type} = this.props;\n\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/color/types.less",
"content": "@import '~styles/colors.less';\n\n.types {\n text-align: right;\n margin-bottom: 6px;\n}\n\n.type {\n display: inline-block;\n position: relative;\n width: 26px;\n height: 26px;\n margin-left: 16px;\n border-radius: 4px;\n cursor: pointer;\n\n &:after {\n content: ' ';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n border: 1px solid rgba(0, 0, 0, 0.20);\n border-radius: 4px;\n }\n\n &:hover {\n &:after {\n border-color: @primary;\n }\n }\n}\n\n.solid {\n background-color: #999999;\n\n &.active {\n background-color: @primary;\n\n &:after {\n border-color: @primary;\n }\n }\n}\n\n.linear {\n background: -moz-linear-gradient(top, #ffffff 0%, #999999 100%);\n background: -webkit-linear-gradient(top, #ffffff 0%,#999999 100%);\n background: linear-gradient(to bottom, #ffffff 0%,#999999 100%);\n\n &.active {\n background: -moz-linear-gradient(top, #ffffff 0%, @primary 100%);\n background: -webkit-linear-gradient(top, #ffffff 0%, @primary 100%);\n background: linear-gradient(to bottom, #ffffff 0%, @primary 100%);\n\n &:after {\n border-color: @primary;\n }\n }\n}\n\n.radial {\n background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #999999 100%);\n background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#999999 100%);\n background: radial-gradient(ellipse at center, #ffffff 0%,#999999 100%);\n\n &.active {\n background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, @primary 100%);\n background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, @primary 100%);\n background: radial-gradient(ellipse at center, #ffffff 0%, @primary 100%);\n\n &:after {\n border-color: @primary;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/columns/column.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './column.less';\n\nexport default class Column extends Component {\n static propTypes = {\n selected: PropTypes.bool.isRequired,\n width: PropTypes.string,\n widthPerc: PropTypes.string,\n id: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n className: PropTypes.string\n };\n\n @bind\n onClick () {\n const {id, onClick} = this.props;\n onClick(id);\n }\n\n render () {\n const {selected, width, widthPerc, className} = this.props;\n\n const style = {};\n if (width === 'custom') {\n style.width = `${widthPerc}`;\n }\n\n return (\n \n {this.renderChildren()}\n {this.renderOptions()}\n
\n );\n }\n\n renderChildren () {\n const {value, selectedElement} = this.props;\n const valueParsed = this.parseValue(value);\n const children = [];\n const numChildren = selectedElement.children.length;\n let i;\n\n for (i = 0; i < numChildren; i++) {\n if (valueParsed[i].width === 'block') {\n children.push(this.renderColumn(i, valueParsed[i]));\n } else {\n const columns = [];\n for (i; i < numChildren; i++) {\n if (valueParsed[i].width !== 'block' && !(columns.length > 0 && valueParsed[i].break)) {\n columns.push(this.renderColumn(i, valueParsed[i]));\n } else {\n i--;\n break;\n }\n }\n children.push(\n \n {columns}\n
\n );\n }\n }\n\n return children;\n }\n\n renderColumn (id, value) {\n return (\n \n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/columns/columns-manager.less",
"content": "@import '~styles/colors.less';\n\n.row {\n display: table;\n table-layout: fixed;\n width: 100%;\n\n .column {\n display: table-cell;\n vertical-align: top;\n }\n}\n\n.options {\n margin: 5px 0;\n padding: 10px;\n border-left: 2px solid @primary;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/columns/index.js",
"content": "import Component from 'components/component';\nimport React from 'react';\nimport {connect} from 'react-redux';\n\nimport ColumnsManager from './columns-manager';\n\n@connect(\n (state) => ({\n selectedElement: state.pageBuilder.selectedElement\n })\n)\nexport default class ColumnsManagerContainer extends Component {\n static columnOptions = [\n {\n label: 'Width',\n type: 'Select',\n id: 'width',\n props: {\n labels: ['Block', 'Column auto', 'Column custom'],\n values: ['block', 'auto', 'custom']\n },\n unlocks: {\n custom: [\n {\n label: 'Width (%)',\n type: 'Percentage',\n id: 'widthPerc'\n }\n ]\n }\n }\n ];\n\n static columnOptionsSingleRow = [\n {\n label: 'Width',\n type: 'Select',\n id: 'width',\n props: {\n labels: ['Column auto', 'Column custom'],\n values: ['auto', 'custom']\n },\n unlocks: {\n custom: [\n {\n label: 'Width (%)',\n type: 'Percentage',\n id: 'widthPerc'\n }\n ]\n }\n }\n ];\n\n static breakOptions = [\n {\n label: 'To next line',\n type: 'Boolean',\n id: 'break',\n default: false\n }\n ];\n\n render () {\n return (\n \n
\n );\n }\n\n renderOption (option, i) {\n const onClick = this.optionClicked.bind(this, this.props.values[i]);\n return (\n \n
\n \n
\n {label}
\n \n \n
\n \n {(labels || values).map(this.renderOption, this)}\n
\n \n
\n );\n }\n\n renderToggleButton (pos, active) {\n const onClick = this.changeSelected.bind(this, pos);\n return (\n \n {this.renderToggleButton('tl', !values.equal)}\n {this.renderToggleButton('bl', !values.equal)}\n {this.renderToggleButton('tr', !values.equal)}\n {this.renderToggleButton('br', !values.equal)}\n {this.renderToggleButton('center', values.equal)}\n
\n \n
\n \n
\n );\n }\n\n renderOptions () {\n let result;\n\n const {filter, schemaProperties} = this.props;\n const property = find(schemaProperties, 'id', filter.prop);\n\n if (property) {\n const options = Object.assign({}, getFilterDefaultOptions(property.type), filter.options);\n\n switch (property.type) {\n case 'Date':\n result = ([\n \n
\n cancel
\n \n {this.props.new ? 'Create new filter' : 'Ok'}\n
\n \n
,\n From
\n \n
\n ]);\n break;\n case 'String':\n result = [\n To
\n {\n options.toGran !== 'present' &&\n \n
\n ];\n if (options.op === 'equal' || options.op === 'not-equal') {\n result.push(\n Operation
\n \n
\n );\n }\n break;\n case 'Boolean':\n result = (\n Value
\n \n
\n );\n break;\n default:\n result = (\n Value
\n \n
\n );\n }\n } else {\n result = (\n Set
\n \n Invalid filter\n
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/filters/filter.jsx",
"content": "import find from 'lodash.find';\nimport getFilterDefaultOptions from 'helpers/schema-filter-default-options';\nimport Balloon from 'components/balloon';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport Edit from './edit';\n\nexport default class Filter extends Component {\n static propTypes = {\n editing: PropTypes.bool.isRequired,\n filter: PropTypes.object.isRequired,\n schemaProperties: PropTypes.array.isRequired,\n index: PropTypes.number.isRequired,\n selectFilter: PropTypes.func.isRequired,\n removeFilter: PropTypes.func.isRequired,\n new: PropTypes.bool\n };\n\n getDateString (gran, value) {\n let str;\n if (gran === 'present') {\n str = 'present';\n } else {\n str = `${value} ${gran}${value !== 1 && 's' || ''}`;\n }\n return str;\n }\n\n onClick () {\n if (!this.props.new) {\n this.props.selectFilter(this.props.index);\n }\n }\n\n onRemove (event) {\n event.preventDefault();\n event.stopPropagation();\n this.props.removeFilter(this.props.index);\n }\n\n render () {\n return (\n \n
\n );\n }\n\n renderContent () {\n let result;\n const {filter, schemaProperties} = this.props;\n const property = find(schemaProperties, 'id', filter.prop);\n\n if (property) {\n const options = Object.assign({}, getFilterDefaultOptions(property.type), filter.options);\n\n switch (property.type) {\n case 'Date':\n result = (\n {\n this.ref = ref;\n !this.state.ready && this.setState({ready: true});\n }}\n >\n {this.renderContent()}\n {\n !this.props.new &&\n
\n {this.renderEditing()}\n \n delete\n
\n }\n \n {property.title}\n from \n {this.getDateString(options.fromGran, options.fromValue)}\n up to \n {this.getDateString(options.toGran, options.toValue)}\n
\n );\n break;\n case 'Boolean':\n result = (\n \n {property.title}\n is \n {options.value}\n
\n );\n break;\n default:\n if (options.op === 'equal') {\n result = (\n \n {property.title}\n equals\n to \n {options.value}\n
\n );\n } else if (options.op === 'not-equal') {\n result = (\n \n {property.title}\n differs\n from \n {options.value}\n
\n );\n } else if (options.op === 'set') {\n result = (\n \n {property.title}\n is \n set\n
\n );\n } else if (options.op === 'not-set') {\n result = (\n \n {property.title}\n is \n not set\n
\n );\n }\n }\n }\n\n return result;\n }\n\n renderEditing () {\n if (this.props.editing && this.state.ready) {\n return (\n \n {this.props.value.map(this.renderFilter, this)}\n {this.renderNew()}\n
\n );\n }\n\n renderFilter (filter, index) {\n const editing = this.props.editOpened && this.props.editIndex === index;\n return (\n Add new filter condition
\n \n {this.renderCollapsable()}\n \n {label}\n \n \n
\n );\n }\n\n renderCollapsable () {\n if (this.state.opened) {\n return (\n \n {this.props.entries.map(this.renderEntry, this)}\n
\n );\n }\n }\n\n renderEntry (entry) {\n const onClick = this.onEntryClick.bind(this, entry.value);\n return (\n \n {this.renderFont()}\n {this.renderOptions()}\n
\n );\n }\n\n renderOptions () {\n const families = [];\n const fvds = [];\n const value = this.props.value;\n\n if (this.props.fonts && typeof this.props.fonts.fonts === 'object') {\n forEach(this.props.fonts.fonts, (fvdsArray, family) => {\n families.push({\n label: family,\n value: family\n });\n\n if (value.family && value.family === family) {\n forEach(fvdsArray, (fvd) => {\n fvds.push({\n label: fvd,\n value: fvd\n });\n });\n }\n });\n }\n\n return (\n \n
\n );\n }\n\n renderFont () {\n let result;\n\n if (typeof this.props.value === 'object' && this.props.value.family && this.props.value.fvd) {\n result = (\n No font selected yet
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/font/font-picker.less",
"content": "@import '~styles/colors.less';\n\n.root {\n width: 100%;\n border: 1px solid @chromeBordersColor;\n border-radius: 3px;\n}\n\n.warning {\n color: @chromeTextColor;\n line-height: 77px;\n text-align: center;\n margin: 0;\n}\n\n.options {\n background-color: @chromeBackgroundDarkerColor;\n padding: 5px 5px;\n position: relative;\n height: 40px;\n}\n\n.fontsDropdown {\n width: 67%;\n margin-right: 3%;\n text-transform: capitalize;\n}\n\n.typeDropdown {\n width: 27%;\n margin-left:3%;\n}\n\n.sep {\n height: 24px;\n width: 0;\n border-left: 1px solid @chromeBordersColor;\n position: absolute;\n top: 8px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/font/font.jsx",
"content": "import utils from 'helpers/utils';\nimport Component from 'components/component';\nimport React from 'react';\n\nimport styles from './font.less';\n\nexport default class Font extends Component {\n static propTypes = {\n input: React.PropTypes.bool,\n style: React.PropTypes.object,\n family: React.PropTypes.string,\n fvd: React.PropTypes.string,\n onChange: React.PropTypes.func,\n text: React.PropTypes.string\n };\n\n render () {\n const style = Object.assign({}, this.props.style);\n style.fontFamily = this.props.family;\n utils.processFVD(style, this.props.fvd);\n\n return (\n \n {this.renderSelected()}\n
\n );\n }\n\n renderSelected () {\n let result;\n if (this.props.value && this.props.value.family) {\n result = (\n \n \n {this.props.value.content}\n \n
\n );\n } else {\n result = No icon selected
;\n }\n return result;\n }\n}\n" }, { "path": "lib/shared/screens/admin/shared/components/input-options/icon/index.js", "content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport IconPicker from './icon-picker';\n\nexport default class IconPickerContainer extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n getInitState () {\n return {\n selector: false\n };\n }\n\n openSelector () {\n this.setState({\n selector: true\n });\n }\n\n closeSelector () {\n this.setState({\n selector: false\n });\n }\n\n render () {\n return (\n\n
\n );\n }\n\n renderUnselect () {\n const {value, width} = this.props;\n if (value) {\n return (\n \n
\n {this.renderUnselect()}\n {this.renderMediaSelector()}\n \n {this.renderSelected()}\n
\n Choose Image
\n \n
\n );\n }\n\n renderState () {\n const {state} = this.props;\n if (state) {\n if (state === 'valid') {\n return (\n \n \n
\n \n \n
\n \n
\n \n
\n \n
\n );\n }\n\n renderArrows () {\n const {arrows} = this.props;\n if (arrows) {\n return (\n \n \n \n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/number/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n width: 100%;\n max-width: 150px;\n height: 38px;\n display: block;\n position: relative;\n outline: none;\n background-color: @chromeBackgroundDarkerColor;\n border: 1px solid @chromeBordersColor;\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s ease-out;\n}\n\n.focused {\n border: 1px solid @primary;\n}\n\n.small {\n width: 80px;\n}\n\n.input {\n display: inline-block;\n vertical-align: top;\n border: 0;\n outline: 0;\n background: transparent;\n box-shadow: none;\n line-height: 36px;\n padding: 0 12px;\n padding-right: 40px;\n width: 100%;\n font-size: 10px;\n color: @chromeTextColor;\n}\n\n.arrows {\n display: inline-block;\n vertical-align: top;\n position: absolute;\n width: 20px;\n top: 0;\n right: 0;\n bottom: 0;\n}\n\n.arrow {\n display: inline-block;\n color: @chromeTextSubColor;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 19px;\n width: 20px;\n text-align: center;\n font-size: 12px;\n\n :global i {\n line-height: 18px;\n font-size: 7px;\n color: @chromeTextSubColor;\n }\n\n &:last-child {\n top: auto;\n bottom: 0;\n }\n\n &:hover {\n background-color: @chromeBackgroundActive;\n }\n}\n\n.white {\n border-color: @adminInputBorders;\n background-color: transparent;\n\n .input {\n color: @adminText;\n }\n .arrow {\n color: @adminText;\n\n &:hover {\n background-color: transparent;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/optional/index.jsx",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nimport styles from './index.less';\n\nexport default class Optional extends Component {\n static propTypes = {\n value: React.PropTypes.bool.isRequired,\n onChange: React.PropTypes.func.isRequired,\n label: React.PropTypes.string.isRequired\n };\n\n toggle (event) {\n event.preventDefault();\n this.props.onChange(!this.props.value);\n }\n\n render () {\n return (\n \n {this.props.label}\n \n {this.props.value && }\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/optional/index.less",
"content": "@import '~styles/colors.less';\n\n@size: 15px;\n\n.root {\n position: relative;\n cursor: pointer;\n padding: 0 3px;\n margin-bottom: 8px;\n\n &:hover {\n .label {\n color: @chromeTextColor;\n }\n .box {\n border-color: @primary;\n }\n }\n}\n\n.box, .label {\n vertical-align: top;\n line-height: 17px;\n transition: all 0.3s ease-out;\n}\n\n.label {\n text-transform: uppercase;\n font-size: 10px;\n color: @chromeTextColor;\n line-height: 16px;\n padding-right: @size + 5px;\n\n &.white {\n color: @adminText;\n }\n}\n\n.box {\n position: absolute;\n right: 3px;\n top: 1px;\n display: inline-block;\n width: @size;\n height: @size;\n text-align: center;\n border: 1px solid @chromeTextSubColor;\n border-radius: 3px;\n\n :global i {\n font-size: 9px;\n color: #ffffff;\n line-height: 14px;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/page/index.js",
"content": "import forEach from 'lodash.foreach';\nimport Combobox from 'components/input-options/combobox';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {dataConnect} from 'relate-js';\n\n@dataConnect(\n () => ({\n fragments: {\n pages: {\n _id: 1,\n title: 1\n }\n }\n })\n)\nexport default class PagePickerContainer extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n pages: PropTypes.array.isRequired,\n fetchData: PropTypes.func.isRequired\n };\n\n static defaultProps = {\n pages: []\n };\n\n componentDidMount () {\n this.props.fetchData({\n fragments: this.constructor.fragments\n });\n }\n\n render () {\n const labels = [];\n const values = [];\n\n forEach(this.props.pages, (page) => {\n labels.push(page.title);\n values.push(page._id);\n });\n\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/schema/index.js",
"content": "import forEach from 'lodash.foreach';\nimport Combobox from 'components/input-options/combobox';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {dataConnect} from 'relate-js';\n\n@dataConnect(\n () => ({\n fragments: {\n schemas: {\n _id: 1,\n title: 1\n }\n }\n })\n)\nexport default class SchemaPickerContainer extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.string.isRequired,\n schemas: PropTypes.array.isRequired\n };\n\n render () {\n const labels = [];\n const values = [];\n\n forEach(this.props.schemas, (schema) => {\n labels.push(schema.title);\n values.push(schema._id);\n });\n\n return (\n \n \n {label}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/section/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n margin: 0 -13px;\n cursor: pointer;\n padding: 0 10px;\n margin-top: -1px;\n border-top: 1px solid @chromeBordersColor;\n border-bottom: 1px solid @chromeBordersColor;\n\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: 50px;\n color: @chromeTextColor;\n }\n i {\n font-size: 10px;\n padding-right: 10px;\n }\n span {\n font-size: 11px;\n text-transform: uppercase;\n }\n }\n\n &:hover {\n background-color: @chromeBackgroundActive;\n\n :global {\n i, span {\n color: @chromeTextColorHighlight;\n }\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/shadow-position/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class ShadowPosition extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n init () {\n this.onOutset = this.onClick.bind(this, 'outset');\n this.onInset = this.onClick.bind(this, 'inset');\n }\n\n onClick (to) {\n this.props.onChange(to);\n }\n\n render () {\n const {value} = this.props;\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/shadow-position/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n padding-top: 5px;\n}\n\n.outset, .inset {\n display: inline-block;\n width: 24px;\n height: 24px;\n background-color: #ffffff;\n margin-right: 9px;\n border-radius: 4px;\n}\n\n.outset {\n -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);\n -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);\n box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);\n\n &.active {\n -webkit-box-shadow: 0px 0px 3px 1px @primary;\n -moz-box-shadow: 0px 0px 3px 1px @primary;\n box-shadow: 0px 0px 3px 1px @primary;\n }\n}\n\n.inset {\n -webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.3);\n -moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.3);\n box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.3);\n\n &.active {\n -webkit-box-shadow: inset 0px 0px 3px 1px @primary;\n -moz-box-shadow: inset 0px 0px 3px 1px @primary;\n box-shadow: inset 0px 0px 3px 1px @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/sorts/edit.jsx",
"content": "import find from 'lodash.find';\nimport forEach from 'lodash.foreach';\nimport Combobox from 'components/input-options/combobox';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nexport default class Edit extends Component {\n static propTypes = {\n schema: PropTypes.object,\n sort: PropTypes.object.isRequired,\n new: PropTypes.bool,\n onPropertyChange: PropTypes.func.isRequired,\n onOrderChange: PropTypes.func.isRequired,\n cancelEdit: PropTypes.func.isRequired,\n submitEdit: PropTypes.func.isRequired,\n schemaProperties: PropTypes.array.isRequired\n };\n\n render () {\n const {sort, schemaProperties} = this.props;\n const labels = [];\n const values = [];\n\n forEach(schemaProperties, (property) => {\n labels.push(property.title);\n values.push(property.id);\n });\n\n return (\n \n
\n );\n }\n\n renderOptions () {\n let result;\n\n const {sort, schemaProperties} = this.props;\n const property = find(schemaProperties, 'id', sort.prop);\n\n if (property) {\n let labels = [];\n switch (property.type) {\n case 'Date':\n labels = ['Newest to oldest', 'Oldest to newest'];\n break;\n case 'Boolean':\n labels = ['Trues first', 'Falses first'];\n break;\n default:\n labels = ['Alphabetical order [A-Z]', 'Inverse alphabetical order [Z-A]'];\n }\n\n result = (\n \n
\n cancel
\n \n {this.props.new ? 'Create new sort' : 'Ok'}\n
\n \n
\n );\n } else {\n result = (\n Order
\n \n Invalid sort\n
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/sorts/index.js",
"content": "import * as elementsActions from 'actions/elements';\n\nimport cloneDeep from 'lodash.clonedeep';\nimport forEach from 'lodash.foreach';\nimport staticProperties from 'helpers/schema-static-properties';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\nimport {buildQueryAndVariables} from 'relax-fragments';\n\nimport Sorts from './sorts';\n\n@connect(\n (state) => ({\n elements: state.elements,\n selectedId: state.pageBuilder.selectedId,\n selectedElement: state.pageBuilder.selectedElement\n }),\n (dispatch) => bindActionCreators(elementsActions, dispatch)\n)\nexport default class SortsContainer extends Component {\n static fragments = Sorts.fragments;\n\n static propTypes = {\n value: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n elements: PropTypes.object.isRequired,\n selectedId: PropTypes.string,\n selectedElement: PropTypes.object\n };\n\n static defaultProps = {\n value: []\n };\n\n getInitState () {\n this.fetchData(this.props);\n return {\n newOpened: false\n };\n }\n\n componentWillReceiveProps (nextProps) {\n if (this.getSelectedSchemaId(nextProps) !== this.getSelectedSchemaId(this.props)) {\n this.fetchData(nextProps);\n }\n }\n\n getSelectedSchemaId (props) {\n const {selectedElement} = props;\n return selectedElement && selectedElement.props && selectedElement.props.schemaId;\n }\n\n fetchData (props) {\n const {selectedId} = props;\n const schemaId = this.getSelectedSchemaId(props);\n if (schemaId) {\n props.getElementData(selectedId, buildQueryAndVariables(\n this.constructor.fragments,\n {\n schema: {\n _id: {\n value: schemaId,\n type: 'ID!'\n }\n }\n }\n ));\n }\n }\n\n openNew () {\n this.setState({\n newOpened: true,\n editingSort: {\n prop: 'publishedDate',\n type: 'Date',\n options: {}\n }\n });\n }\n\n onPropertyChange (prop) {\n this.setState({\n editingSort: Object.assign({}, this.state.editingSort, {\n prop\n })\n });\n }\n\n onOrderChange (order) {\n this.setState({\n editingSort: Object.assign({}, this.state.editingSort, {\n order\n })\n });\n }\n\n cancelEdit () {\n this.setState({\n newOpened: false,\n editOpened: false,\n editIndex: null\n });\n }\n\n submitEdit () {\n let newSorts = this.props.value;\n\n if (this.state.newOpened) {\n newSorts = [...newSorts, this.state.editingSort];\n } else if (this.state.editOpened) {\n newSorts = [...newSorts];\n newSorts[this.state.editIndex] = this.state.editingSort;\n }\n\n this.props.onChange(newSorts);\n this.setState({\n newOpened: false,\n editOpened: false,\n editIndex: null\n });\n }\n\n selectSort (index) {\n if (this.state.editOpened && this.state.editIndex === index) {\n this.setState({\n editOpened: false,\n editIndex: null\n });\n } else {\n this.setState({\n editOpened: true,\n editIndex: index,\n editingSort: cloneDeep(this.props.value[index])\n });\n }\n }\n\n removeSort (index) {\n const newSorts = [...this.props.value];\n newSorts.splice(index, 1);\n this.props.onChange(newSorts);\n }\n\n render () {\n const {selectedId, elements} = this.props;\n const elementData = elements[selectedId];\n const schema = elementData && elementData.schema || null;\n\n const schemaProperties = schema && schema.properties || [];\n const properties = [...staticProperties];\n\n forEach(schemaProperties, (customProperty) => {\n properties.push(Object.assign({}, customProperty, {\n id: `properties#${customProperty.id}`\n }));\n });\n\n return (\n \n
\n );\n }\n\n renderContent () {\n let result;\n const {sort, schemaProperties} = this.props;\n const property = find(schemaProperties, 'id', sort.prop);\n\n if (property) {\n switch (property.type) {\n case 'Date':\n if (sort.order === 'ASC') {\n result = (\n {\n this.ref = ref;\n !this.state.ready && this.setState({ready: true});\n }}\n >\n {this.renderContent()}\n {\n !this.props.new &&\n
\n {this.renderEditing()}\n \n delete\n
\n }\n \n {property.title}\n newest\n to \n oldest\n
\n );\n } else {\n result = (\n \n {property.title}\n oldest\n to \n newest\n
\n );\n }\n break;\n case 'Boolean':\n if (sort.order === 'ASC') {\n result = (\n \n {property.title}\n first\n
\n );\n } else {\n result = (\n \n {property.title}\n last\n
\n );\n }\n break;\n default:\n if (sort.order === 'ASC') {\n result = (\n \n {property.title}\n alphabetical\n order \n [A-Z]\n
\n );\n } else {\n result = (\n \n {property.title}\n inverse alphabetical\n order \n [Z-A]\n
\n );\n }\n }\n }\n\n return result;\n }\n\n renderEditing () {\n if (this.props.editing && this.state.ready) {\n return (\n \n {this.props.value.map(this.renderSort, this)}\n {this.renderNew()}\n
\n );\n }\n\n renderSort (sort, index) {\n const editing = this.props.editOpened && this.props.editIndex === index;\n return (\n Add new sort condition
\n \n
\n );\n }\n\n renderToggleButton (pos, icon, active) {\n const onClick = this.changeSelected.bind(this, pos);\n return (\n \n {this.renderToggleButton('top', 'arrows-1_minimal-up', !values.equal)}\n {this.renderToggleButton('left', 'arrows-1_minimal-left', !values.equal)}\n {this.renderToggleButton('center', 'ui-2_link-68', values.equal)}\n {this.renderToggleButton('right', 'arrows-1_minimal-right', !values.equal)}\n {this.renderToggleButton('bottom', 'arrows-1_minimal-down', !values.equal)}\n
\n \n
\n Value
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/input-options/text-shadow/index.jsx",
"content": "import cloneDeep from 'lodash.clonedeep';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\nimport Shadow from './shadow';\n\nexport default class TextShadow extends Component {\n static propTypes = {\n value: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired\n };\n\n static defaultProps = {\n value: []\n };\n\n getInitState () {\n return {\n editingShadow: false\n };\n }\n\n addNewClick () {\n this.props.onChange([...this.props.value, {\n color: '#000000',\n blur: '2px',\n x: '2px',\n y: '2px'\n }]);\n this.setState({\n editingShadow: this.props.value.length\n });\n }\n\n changeShadow (key, value) {\n if (this.state.editingShadow !== false) {\n const newValue = cloneDeep(this.props.value);\n newValue[this.state.editingShadow][key] = value;\n this.props.onChange(newValue);\n }\n }\n\n selectShadow (index) {\n if (this.state.editingShadow === index) {\n this.setState({\n editingShadow: false\n });\n } else {\n this.setState({\n editingShadow: index\n });\n }\n }\n\n removeShadow (index) {\n const newValue = cloneDeep(this.props.value);\n newValue.splice(index, 1);\n this.props.onChange(newValue);\n }\n\n render () {\n return (\n \n {this.props.value.map(this.renderEntry, this)}\n
\n );\n }\n\n renderEntry (shadow, index) {\n return (\n Add new shadow
\n \n
\n );\n }\n\n renderEditing () {\n if (this.props.editing && this.state.ready) {\n return (\n {\n this.ref = ref;\n !this.state.ready && this.setState({ready: true});\n }}\n >\n
\n {this.renderEditing()}\n {`${getColor(shadow.color).label}, ${shadow.x} ${shadow.y}, ${shadow.blur}`}
\n \n \n
\n \n \n
\n );\n }\n\n renderNewButton () {\n const {newIcon, onNew} = this.props;\n if (newIcon && onNew) {\n return (\n \n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/list-header/index.less",
"content": "@import '~styles/colors.less';\n\n.header {\n position: relative;\n height: 70px;\n border-bottom: 1px solid @adminBorders;\n}\n\n.backButton {\n position: absolute;\n top: 0;\n left: 0;\n padding: 0 7px;\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: 70px;\n }\n span {\n text-transform: uppercase;\n font-size: 12px;\n }\n i {\n font-size: 10px;\n margin-right: 5px;\n }\n }\n}\n\n.newButton {\n position: absolute;\n top: 0;\n right: 0;\n padding: 0 10px;\n :global {\n i {\n color: @adminText;\n line-height: 70px;\n font-size: 22px;\n }\n }\n &:hover :global i {\n color: @primary;\n }\n}\n\n.title {\n padding: 0 60px;\n text-align: center;\n line-height: 69px;\n font-size: 22px;\n color: @adminTextHighlight;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/list-search-sort/index.jsx",
"content": "import bind from 'decorators/bind';\nimport cx from 'classnames';\nimport debounce from 'lodash.debounce';\nimport find from 'lodash.find';\nimport Balloon from 'components/balloon';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {Link} from 'react-router';\nimport {pushState} from 'redux-router';\n\nimport styles from './index.less';\n\nexport default class ListSearchSort extends Component {\n static propTypes = {\n sorts: PropTypes.array.isRequired,\n sort: PropTypes.string.isRequired,\n search: PropTypes.string,\n order: PropTypes.string.isRequired,\n location: PropTypes.object.isRequired\n };\n\n static contextTypes = {\n store: PropTypes.object.isRequired\n };\n\n getInitState () {\n this.searchDebounce = debounce(::this.changeSearch, 300);\n return {\n opened: false,\n focused: false\n };\n }\n\n toggleSorts () {\n this.setState({\n opened: !this.state.opened\n });\n }\n\n changeSearch () {\n const {location} = this.props;\n const query = Object.assign({}, location.query, {\n s: this.state.search\n });\n this.context.store.dispatch(pushState(null, location.pathname, query));\n }\n\n @bind\n onFocus () {\n this.setState({\n focused: true,\n search: this.props.search\n });\n }\n\n @bind\n onBlur () {\n if (this.state.search !== this.props.search) {\n this.changeSearch();\n }\n this.setState({\n focused: false\n });\n }\n\n @bind\n updateSearch (event) {\n this.setState({\n search: event.target.value\n });\n this.searchDebounce();\n }\n\n render () {\n const {focused} = this.state;\n const {sort, order, sorts} = this.props;\n const selected = find(sorts, (obj) => obj.sort === sort && obj.order === order);\n\n return (\n {title}
\n {this.renderNewButton()}\n {this.props.children}\n \n \n
\n );\n }\n\n renderSorts () {\n if (this.state.opened) {\n const {sorts} = this.props;\n return (\n \n {selected && selected.label}\n \n
\n {this.renderSorts()}\n \n {result}\n
\n );\n }\n\n renderImageType () {\n const {mediaItem, width, height, useThumbnail} = this.props;\n let result;\n\n if (useThumbnail) {\n result = (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/entry.less",
"content": "@import '~styles/colors.less';\n\n.entry {\n display: inline-block;\n vertical-align: top;\n\n width: 21.25%;\n margin-right: 5%;\n\n margin-bottom: 60px;\n border: 1px solid transparent;\n\n cursor: pointer;\n}\n\n@media screen and (min-width: 1501px) {\n .entry {\n width: 16%;\n &:nth-child(5n+5) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1500px) and (min-width: 1101px) {\n .entry {\n &:nth-child(4n+4) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 1100px) and (min-width: 851px) {\n .entry {\n width: 30%;\n &:nth-child(3n+3) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 850px) and (min-width: 751px) {\n .entry {\n width: 45%;\n margin-right: 10%;\n &:nth-child(2n+2) {\n margin-right: 0;\n }\n }\n}\n\n@media screen and (max-width: 750px) {\n .entry {\n width: 100%;\n margin-right: 0%;\n }\n}\n\n\n.preview {\n width: 100%;\n height: 125px;\n background-color: @adminBorders;\n}\n\n.info {\n padding: 15px;\n height: 65px;\n text-align: center;\n}\n\n.title {\n color: @adminTextHighlight;\n font-size: 16px;\n line-height: 19px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.date {\n color: @adminText;\n font-size: 12px;\n font-weight: 300;\n text-transform: uppercase;\n}\n\n.entry:hover {\n border: 1px solid @adminBorders;\n}\n\n.entry.selected {\n border: 1px solid @primary;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/filters.jsx",
"content": "import forEach from 'lodash.foreach';\nimport Combobox from 'components/input-options/combobox';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {getMimeTypes} from 'helpers/mime-types';\n\nimport styles from './filters.less';\n\nexport default class Filters extends Component {\n static propTypes = {\n changeSort: PropTypes.func.isRequired,\n changeOrder: PropTypes.func.isRequired,\n changeType: PropTypes.func.isRequired,\n sort: PropTypes.string.isRequired,\n order: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n allowedType: PropTypes.string.isRequired\n }\n\n sortChange (key, value) {\n this.props.changeSort(key, value);\n }\n\n render () {\n const {changeSort, changeOrder, changeType, sort, order, type, allowedType} = this.props;\n\n const mimeFilterOptions = {\n labels: ['ALL'],\n values: ['all']\n };\n const mimeTypes = getMimeTypes(allowedType);\n forEach(mimeTypes, (mimeType) => {\n const splitted = mimeType.split('/');\n if (splitted[1]) {\n mimeFilterOptions.labels.push(splitted[1].toUpperCase());\n mimeFilterOptions.values.push(mimeType);\n }\n });\n\n return (\n \n
\n \n
\n {mediaItem.name}
\n {momentDate.fromNow()}
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/filters.less",
"content": "@import '~styles/colors.less';\n\n.mediumCombobox {\n display: inline-block;\n vertical-align: top;\n width: 142px;\n margin-right: 10px;\n}\n\n.smallCombobox {\n display: inline-block;\n vertical-align: top;\n width: 88px;\n}\n\n.label {\n text-transform: uppercase;\n font-size: 10px;\n color: @chromeTextColor;\n line-height: 16px;\n margin-bottom: 8px;\n padding: 0 3px;\n}\n\n.option {\n margin-bottom: 30px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/index.js",
"content": "import * as mediaActions from 'actions/media';\n\nimport bind from 'decorators/bind';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {getMimeTypes} from 'helpers/mime-types';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport MediaSelector from './media-selector';\n\n@dataConnect(\n (state) => ({\n uploads: state.media.uploads\n }),\n (dispatch) => bindActionCreators(mediaActions, dispatch),\n () => ({\n fragments: MediaSelector.fragments,\n variablesTypes: {\n media: {\n sort: 'String',\n order: 'String',\n filters: '[Filter]'\n }\n },\n initialVariables: {\n media: {\n sort: '_id',\n order: 'desc'\n }\n },\n mutations: {\n addMedia: [\n {\n type: 'PREPEND',\n field: 'media'\n }\n ]\n }\n })\n)\nexport default class MediaSelectorContainer extends Component {\n static propTypes = {\n selected: PropTypes.string,\n media: PropTypes.array,\n onClose: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n allowedType: PropTypes.string.isRequired,\n uploadMediaFiles: PropTypes.func.isRequired,\n uploads: PropTypes.array.isRequired\n };\n\n static defaultProps = {\n media: []\n };\n\n getInitState () {\n return {\n sort: '_id',\n order: 'desc',\n type: 'all'\n };\n }\n\n componentWillUpdate (nextProps, nextState) {\n if (this.state.sort !== nextState.sort ||\n this.state.order !== nextState.order ||\n this.state.type !== nextState.type) {\n const filter = nextState.type;\n let filters = [];\n if (filter !== 'all') {\n let type = getMimeTypes(filter);\n let op = 'in';\n if (!type) {\n op = 'eq';\n type = filter;\n }\n filters = [{\n property: 'type',\n op: {\n [op]: type\n }\n }];\n }\n\n nextProps.relate.setVariables({\n media: {\n sort: nextState.sort,\n order: nextState.order,\n filters\n }\n });\n }\n }\n\n @bind\n changeSort (sort) {\n this.setState({sort});\n }\n\n @bind\n changeOrder (order) {\n this.setState({order});\n }\n\n @bind\n changeType (type) {\n this.setState({type});\n }\n\n render () {\n const {media, selected, onClose, onChange, allowedType, uploadMediaFiles, uploads} = this.props;\n\n return (\n \n
\n Sort by
\n \n
\n Filter by type
\n \n {mocks}\n {this.props.media.map(this.renderItem, this)}\n
\n );\n }\n\n renderItem (mediaItem) {\n const {onChange, selected} = this.props;\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/media-selector.less",
"content": "@import '~styles/colors.less';\n\n.sidebar {\n position: absolute;\n top: 0; left: 0; bottom: 0;\n width: 280px;\n background-color: @chromeBackgroundColor;\n}\n\n.wrapper {\n position: absolute;\n top: 0; left: 280px; bottom: 0; right: 0;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/mock-entry.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport Spinner from 'components/spinner';\nimport React, {PropTypes} from 'react';\n\nimport mockStyles from './mock-entry.less';\nimport styles from './entry.less';\n\nexport default class MediaMockEntry extends Component {\n static propTypes = {\n upload: PropTypes.object.isRequired\n };\n\n render () {\n const {upload} = this.props;\n let result;\n\n if (upload.status === 'queue') {\n result = ;\n } else if (upload.status === 'uploading') {\n result = \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/mock-entry.less",
"content": ".root {\n cursor: default;\n &:hover {\n border: 1px solid transparent !important;\n }\n}\n\n.preview {\n text-align: center;\n padding: 50px 0;\n\n :global i {\n font-size: 18px;\n color: #ccc;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/selected/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {dataConnect} from 'relate-js';\n\nimport Selected from './selected';\n\n@dataConnect(\n (props) => {\n const result = {\n fragments: {},\n variablesTypes: {\n mediaItem: {\n id: 'ID!'\n }\n },\n initialVariables: {\n mediaItem: {\n id: props.selected\n }\n }\n };\n\n if (props.selected) {\n result.fragments = Selected.fragments;\n }\n\n return result;\n }\n)\nexport default class MediaSelectorSelectedContainer extends Component {\n static propTypes = {\n selected: PropTypes.string,\n mediaItem: PropTypes.object\n };\n\n componentWillReceiveProps (nextProps) {\n if (this.props.selected !== nextProps.selected && nextProps.selected) {\n this.props.relate.refresh(nextProps);\n }\n }\n\n render () {\n const {mediaItem, selected} = this.props;\n return (\n \n {result}\n
\n \n \n
\n );\n } else {\n result = (\n \n
\n \n
\n \n
\n \n {mediaItem.name}\n
\n \n {date}\n
\n {mediaItem.dimension && mediaItem.dimension.width &&\n \n {`${mediaItem.dimension.width}x${mediaItem.dimension.height}`}\n
\n }\n \n {mediaItem.size}\n
\n \n
\n );\n }\n\n return result;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/selected/selected.less",
"content": "@import '~styles/colors.less';\n\n.root {\n position: absolute;\n padding: 12px;\n bottom: 52px;\n left: 0;\n right: 0;\n height: 124px;\n border-top: 1px solid @chromeBordersColor;\n}\n\n.wrapper {\n display: table;\n width: 100%;\n table-layout: fixed;\n}\n\n.imagePart {\n display: table-cell;\n vertical-align: middle;\n width: 100px;\n height: 100px;\n}\n\n.dummyImage {\n display: inline-block;\n background-color: @chromeBordersColor;\n width: 100px;\n height: 100px;\n}\n\n.infoPart {\n display: table-cell;\n vertical-align: middle;\n padding: 5px 10px;\n padding-right: 0;\n}\n\n.title {\n color: @chromeTextColor;\n font-size: 11px;\n margin-bottom: 5px;\n word-break: break-word;\n}\n.underTitle {\n font-size: 10px;\n color: @chromeTextSubColor;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/sidebar.jsx",
"content": "import Button from 'components/button';\nimport Component from 'components/component';\nimport Scrollable from 'components/scrollable';\nimport React, {PropTypes} from 'react';\n\nimport styles from './sidebar.less';\nimport Filters from './filters';\nimport Selected from './selected';\n\nexport default class MediaSelectorSidebar extends Component {\n static propTypes = {\n selected: PropTypes.string,\n changeSort: PropTypes.func.isRequired,\n changeOrder: PropTypes.func.isRequired,\n changeType: PropTypes.func.isRequired,\n sort: PropTypes.string.isRequired,\n order: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n allowedType: PropTypes.string.isRequired\n };\n\n render () {\n const {selected, changeSort, changeOrder, changeType, sort, order, type, allowedType} = this.props;\n return (\n \n
\n \n \n
\n \n
\n \n Nothing selected\n
\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/sidebar.less",
"content": "@import '~styles/colors.less';\n\n.header {\n font-size: 16px;\n padding: 0 10px;\n line-height: 60px;\n border-bottom: 1px solid @chromeBordersColor;\n color: @chromeTextColor;\n text-align: center;\n}\n\n.done {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n padding: 10px;\n border-top: 1px solid @chromeBordersColor;\n}\n\n.filters {\n position: absolute;\n top: 61px;\n bottom: 176px;\n left: 0; right: 0;\n}\n\n.wrapper {\n padding: 30px 20px;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/top-bar.jsx",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nimport styles from './top-bar.less';\n\nexport default class MediaSelectorTopBar extends Component {\n render () {\n return (\n Media Selector
\n \n
\n \n \n
\n \n topbar\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/media-selector/top-bar.less",
"content": "@import '~styles/colors.less';\n\n.root {\n height: 61px;\n border-bottom: 1px solid @adminBorders;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/menu-button/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {Link} from 'react-router';\n\nimport styles from './index.less';\n\nexport default class Menu extends Component {\n static propTypes = {\n link: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.string.isRequired,\n active: PropTypes.bool,\n onActiveClick: PropTypes.func,\n dark: PropTypes.bool,\n children: PropTypes.node,\n query: PropTypes.object\n };\n\n static defaultProps = {\n active: false\n };\n\n getInitState () {\n this.caretToggle = ::this.caretToggle;\n return {\n opened: true\n };\n }\n\n caretToggle () {\n this.setState({\n opened: !this.state.opened\n });\n }\n\n onClick (event) {\n if (this.props.active && this.props.onActiveClick) {\n event.preventDefault();\n event.stopPropagation();\n this.props.onActiveClick();\n }\n }\n\n render () {\n const {link, label, icon, active, dark, query} = this.props;\n return (\n \n
\n );\n }\n\n renderChildren () {\n const {children} = this.props;\n if (children && this.state.opened) {\n return (\n \n \n \n {label}\n \n {this.renderCaret()}\n
\n {this.renderChildren()}\n \n {children}\n
\n );\n }\n }\n\n renderCaret () {\n const {children} = this.props;\n if (children) {\n const {opened} = this.state;\n return (\n \n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/menu-button/index.less",
"content": "@import '~styles/colors.less';\n\n.button {\n display: block;\n height: 60px;\n\n font-size: 14px;\n color: @adminText;\n\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: 60px;\n }\n i {\n width: 60px;\n text-align: center;\n font-size: 22px;\n color: @primarySub;\n }\n span {\n font-weight: 600;\n }\n }\n\n &:hover {\n background-color: @primaryBack;\n }\n}\n\n.dark {\n :global i {\n color: @adminText;\n }\n}\n\n.buttonHolder {\n position: relative;\n}\n\n.caret {\n position: absolute;\n right: 0;\n top: 0;\n height: 60px;\n width: 60px;\n text-align: center;\n display: inline-block;\n\n :global i {\n color: @adminText;\n font-size: 22px;\n line-height: 60px;\n }\n\n &:hover {\n :global i {\n color: @adminTextHighlight;\n }\n }\n}\n\n.active {\n background-color: @primary;\n\n :global {\n i, span {\n color: #ffffff;\n }\n }\n\n .caret {\n :global {\n color: #ffffff;\n }\n }\n\n &:hover {\n background-color: @primary;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/menu-sub-button/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {Link} from 'react-router';\n\nimport styles from './index.less';\n\nexport default class MenuSubButton extends Component {\n static propTypes = {\n link: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n active: PropTypes.bool,\n query: PropTypes.object\n };\n\n static defaultProps = {\n active: false\n };\n\n render () {\n const {link, label, active, query} = this.props;\n return (\n \n \n \n \n \n \n
\n \n
\n \n {this.renderTitles()}\n {children}\n
\n \n {subTitle &&
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/modal/index.less",
"content": "@import '~styles/colors.less';\n\n.root {\n position: fixed;\n top: 0; bottom: 0;\n left: 0; right: 0;\n z-index: 10;\n}\n\n.background {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.6);\n top: 0; bottom: 0;\n left: 0; right: 0;\n}\n\n.wrapper {\n position: absolute;\n top: 0; bottom: 0;\n left: 0; right: 0;\n pointer-events: none;\n}\n\n.content {\n pointer-events: all;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n\n width: 725px;\n max-width: 90%;\n border-radius: 4px;\n overflow: hidden;\n\n &.small {\n width: 430px;\n }\n &.big {\n width: 90%;\n height: 80%;\n }\n}\n\n.titles {\n padding: 20px 20px;\n}\n\n.subTitle {\n font-size: 12px;\n color: @adminText;\n text-align: center;\n text-transform: uppercase;\n line-height: 18px;\n margin-bottom: 5px;\n}\n\n.title {\n font-size: 26px;\n color: @adminText;\n text-align: center;\n line-height: 34px;\n font-weight: 300;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/modal-delete/index.jsx",
"content": "import Animate from 'components/animate';\nimport Button from 'components/button';\nimport Component from 'components/component';\nimport Spinner from 'components/spinner';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\nimport Modal from '../modal';\n\nexport default class ModalDelete extends Component {\n static propTypes = {\n submit: PropTypes.func.isRequired,\n cancel: PropTypes.func.isRequired,\n loading: PropTypes.bool,\n children: PropTypes.node.isRequired,\n cancelLabel: PropTypes.string,\n deleteLabel: PropTypes.string,\n title: PropTypes.string,\n subTitle: PropTypes.string\n };\n\n static defaultProps = {\n cancelLabel: 'Cancel',\n deleteLabel: 'Delete',\n title: 'Are you sure?',\n subTitle: 'You won\\'t be able to reverse it'\n };\n\n onSubmit (event) {\n event.preventDefault();\n this.props.submit();\n }\n\n render () {\n const {cancel, title, subTitle} = this.props;\n return (\n {subTitle}
}\n {title && {title}
}\n \n {this.renderLoading()}\n {this.renderCreateButton()}\n
\n \n \n
\n );\n }\n\n renderCreateButton () {\n const {loading, cancelLabel, deleteLabel, cancel, submit} = this.props;\n\n return (\n \n
\n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/modal-delete/index.less",
"content": ".button {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.state {\n position: relative;\n margin-top: 15px;\n margin-bottom: 30px;\n height: 30px;\n}\n\n.out {\n display: none;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/modal-input/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {findDOMNode} from 'react-dom';\n\nimport styles from './index.less';\n\nexport default class ModalInput extends Component {\n static propTypes = {\n invalid: PropTypes.bool,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n focus: PropTypes.bool,\n type: PropTypes.string\n };\n\n static defaultProps = {\n type: 'text'\n };\n\n componentDidMount () {\n if (this.props.focus) {\n findDOMNode(this).focus();\n }\n }\n\n onChange (event) {\n this.props.onChange(event.target.value);\n }\n\n render () {\n const {placeholder, value, invalid, type} = this.props;\n return (\n \n \n \n
\n \n \n \n
\n );\n }\n\n renderLoading () {\n const {loading} = this.props;\n\n return (\n \n \n
\n );\n }\n\n renderCreateButton () {\n const {loading, submitLabel} = this.props;\n\n return (\n \n
\n \n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/modal-new/index.less",
"content": ".root {\n text-align: center;\n padding: 45px;\n padding-bottom: 40px;\n}\n\n.button {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.state {\n position: relative;\n margin-top: 30px;\n height: 30px;\n}\n\n.out {\n display: none;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/options-list/index.jsx",
"content": "import cx from 'classnames';\nimport merge from 'lodash.merge';\nimport warning from 'warning';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {TypesOptionsMap, TypesOptionsDefaultProps} from 'helpers/input-options-map';\n\nimport styles from './index.less';\n\nexport default class OptionsList extends Component {\n static propTypes = {\n options: PropTypes.array.isRequired,\n values: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n passToOptions: PropTypes.object,\n white: PropTypes.bool,\n tight: PropTypes.bool\n };\n\n static defaultProps = {\n passToOptions: {}\n };\n\n onChange (id, value) {\n this.props.onChange(id, value);\n }\n\n render () {\n return this.renderOptions(this.props.options);\n }\n\n renderOptions (options) {\n return (\n \n {options.map(this.renderOption, this)}\n
\n );\n }\n\n renderColumn (option, index) {\n return (\n \n {this.renderOption(option)}\n
\n );\n }\n\n renderOption (option, index) {\n let result;\n\n if (option.type === 'Columns') {\n result = (\n \n {option.options.map(this.renderColumn, this)}\n
\n );\n } else if (TypesOptionsMap[option.type]) {\n const Option = TypesOptionsMap[option.type];\n const value = this.props.values[option.id];\n const extraProps = merge({}, TypesOptionsDefaultProps[option.type] || {});\n merge(extraProps, option.props || {});\n\n let unlockedContent = null;\n if (option.unlocks && value !== '') {\n if (option.type === 'Optional') {\n if (value && option.unlocks.length > 1) {\n unlockedContent = this.renderOptions(option.unlocks);\n } else if (value && option.unlocks.length === 1) {\n unlockedContent = (\n {this.renderOptions(option.unlocks)}
\n );\n }\n extraProps.label = option.label;\n } else if (option.type === 'Section') {\n if (value) {\n unlockedContent = {this.renderOptions(option.unlocks)}
;\n }\n extraProps.label = option.label;\n } else if (option.unlocks.constructor === Array) {\n unlockedContent = this.renderOptions(option.unlocks);\n } else if (option.unlocks[value]) {\n unlockedContent = this.renderOptions(option.unlocks[value]);\n }\n }\n\n const onChange = this.onChange.bind(this, option.id);\n if (option.type === 'Section') {\n result = (\n \n
\n );\n } else {\n result = (\n \n {this.renderLabel(option.type !== 'Optional' && option.label)}\n
\n );\n }\n } else {\n warning(false, 'Element option type not valid');\n }\n return result;\n }\n\n renderLabel (label) {\n if (label) {\n const {white} = this.props;\n return (\n {label}
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/options-list/index.less",
"content": "@import '~styles/colors.less';\n\n.option {\n margin-bottom: 30px;\n\n &.tight {\n margin-bottom: 15px;\n }\n}\n\n.option>.group {\n margin-top: 20px;\n padding-left: 10px;\n}\n\n.label {\n text-transform: uppercase;\n font-size: 10px;\n color: @chromeTextColor;\n line-height: 16px;\n margin-bottom: 8px;\n padding: 0 3px;\n\n &.white {\n color: @adminText;\n }\n\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: 16px;\n }\n i {\n margin-right: 7px;\n font-size: 12px;\n }\n }\n}\n\n.columns {\n display: table;\n table-layout: fixed;\n width: 100%;\n\n &:last-child {\n .option {\n margin-bottom: 0;\n }\n }\n}\n\n.column {\n display: table-cell;\n vertical-align: top;\n\n &:first-child {\n padding-right: 10px;\n }\n\n &:last-child {\n padding-left: 10px;\n }\n}\n\n.section {\n margin: 20px 0;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/options-menu/index.jsx",
"content": "import Component from 'components/component';\nimport React from 'react';\n\nexport default class OptionsMenu extends Component {\n static propTypes = {\n options: React.PropTypes.array.isRequired,\n style: React.PropTypes.object\n };\n\n render () {\n return (\n \n {this.props.options.map(this.renderOption, this)}\n
\n );\n }\n\n renderOption (option, key) {\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/canvas/canvas.jsx",
"content": "import displays from 'helpers/displays';\nimport forEach from 'lodash.foreach';\nimport getElementProps from 'helpers/get-element-props';\nimport stylesManager from 'helpers/styles-manager';\nimport utils from 'helpers/utils';\nimport Component from 'components/component';\nimport Droppable from 'components/dnd/droppable';\nimport Symbol from 'elements/symbol';\nimport React, {PropTypes} from 'react';\nimport {Component as Jss} from 'relax-jss';\n\nimport classes from './canvas.less';\nimport Empty from './empty';\n\nexport default class Canvas extends Component {\n static propTypes = {\n pageBuilderActions: PropTypes.object.isRequired,\n display: PropTypes.string.isRequired,\n styles: PropTypes.array.isRequired,\n symbols: PropTypes.object.isRequired,\n dragging: PropTypes.bool.isRequired,\n pageData: PropTypes.object.isRequired,\n elements: PropTypes.object.isRequired,\n selectedId: PropTypes.string,\n editing: PropTypes.bool.isRequired\n };\n\n static contextTypes = {\n store: PropTypes.object.isRequired\n };\n\n static childContextTypes = {\n dropHighlight: PropTypes.string.isRequired\n };\n\n getInitState () {\n this.renderElementBind = ::this.renderElement;\n this.renderChildrenBind = ::this.renderChildren;\n return {};\n }\n\n getChildContext () {\n const {dragging} = this.props;\n return {\n dropHighlight: dragging ? 'vertical' : 'none'\n };\n }\n\n componentDidMount () {\n this.refs.canvas.addEventListener('scroll', this.onScroll.bind(this));\n }\n\n onScroll () {\n window.dispatchEvent(new Event('scroll'));\n }\n\n render () {\n const {pageData, display} = this.props;\n const dropInfo = {\n id: 'body',\n type: 'body'\n };\n const bodyStyle = {\n margin: '0 auto',\n maxWidth: displays[display]\n };\n\n // Process schema links if any\n const elementsLinks = {};\n const elements = pageData && pageData.body && this.renderChildren(pageData.body.children, {elementsLinks});\n\n return (\n \n
\n );\n }\n\n renderPlaceholder () {\n const {pageBuilderActions} = this.props;\n return (\n \n \n {elements}\n \n
\n {this.renderStyles()}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/canvas/empty.less",
"content": "@import '~styles/colors.less';\n\n.root {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.wrapper {\n position: absolute;\n top: 30%;\n left: 0;\n right: 0;\n text-align: center;\n}\n\n.title {\n font-weight: 300;\n font-size: 26px;\n line-height: 36px;\n color: @adminText;\n}\n\n.subTitle {\n font-weight: 300;\n font-size: 16px;\n line-height: 34px;\n color: @primary;\n}\n\n.button {\n display: inline-block;\n vertical-align: top;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: @primary;\n position: relative;\n text-align: center;\n margin-top: 15px;\n transform: scale(0.5);\n transition: all 0.2s ease-out;\n\n :global i {\n font-size: 14px;\n color: #ffffff;\n line-height: 40px;\n opacity: 0;\n transition: all 0.2s ease-out;\n }\n\n &:hover {\n transform: scale(1);\n\n :global i {\n opacity: 1;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/canvas/index.js",
"content": "import * as pageBuilderActions from 'actions/page-builder';\n\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {updateColors} from 'helpers/colors';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport Canvas from './canvas.jsx';\n\n@dataConnect(\n (state) => ({\n dragging: state.dnd.dragging,\n display: state.display,\n symbols: state.symbols,\n elements: state.pageBuilder.elements,\n pageData: state.pageBuilder.data,\n selectedId: state.pageBuilder.selectedId,\n editing: state.pageBuilder.editing,\n stylesData: state.styles.data\n }),\n (dispatch) => ({\n pageBuilderActions: bindActionCreators(pageBuilderActions, dispatch)\n }),\n () => ({\n fragments: {\n colors: {\n _id: 1,\n label: 1,\n value: 1\n },\n styles: {\n _id: 1,\n title: 1,\n type: 1,\n options: 1\n }\n }\n })\n)\nexport default class CanvasContainer extends Component {\n static propTypes = {\n pageBuilderActions: PropTypes.object.isRequired,\n display: PropTypes.string.isRequired,\n stylesData: PropTypes.array.isRequired,\n symbols: PropTypes.object.isRequired,\n dragging: PropTypes.bool.isRequired,\n pageData: PropTypes.object.isRequired,\n elements: PropTypes.object.isRequired,\n selectedId: PropTypes.string,\n editing: PropTypes.bool.isRequired,\n colors: PropTypes.array.isRequired\n };\n\n getInitState () {\n updateColors(this.props.colors);\n }\n\n componentWillReceiveProps (nextProps) {\n if (this.props.colors !== nextProps.colors) {\n updateColors(nextProps.colors);\n }\n }\n\n render () {\n const {\n dragging,\n display,\n symbols,\n elements,\n pageData,\n selectedId,\n editing,\n stylesData\n } = this.props;\n\n return (\n \n
\n Let's get you started
\n Click the blue dot below to add your first section
\n \n \n {before}\n \n {this.props.value}\n \n {after}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/elements-menu/autocomplete.less",
"content": ".autocomplete {\n border: 0;\n background-color: #000000;\n border-radius: 0;\n padding: 0 12px;\n height: 40px;\n\n :global span {\n line-height: 40px;\n color: #999999;\n font-size: 20px;\n border: 0;\n outline: 0;\n }\n}\n\n.editable {\n color: #efefef;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/elements-menu/elements-menu.jsx",
"content": "import cx from 'classnames';\nimport forEach from 'lodash.foreach';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {findDOMNode} from 'react-dom';\n\nimport styles from './elements-menu.less';\nimport List from './list';\nimport Search from './search';\n\nexport default class ElementsMenu extends Component {\n static fragments = {\n symbols: {\n _id: 1,\n title: 1\n }\n };\n\n static propTypes = {\n symbols: PropTypes.object.isRequired,\n pageBuilderActions: PropTypes.object.isRequired,\n elementsMenuOptions: PropTypes.object.isRequired,\n elements: PropTypes.object.isRequired,\n categories: PropTypes.object.isRequired\n };\n\n getInitState () {\n return {\n top: 0,\n left: 0,\n contentTop: 0,\n side: 'right',\n angleTriangle: false,\n searchOpened: false,\n search: '',\n suggestions: [],\n suggestion: false\n };\n }\n\n componentDidMount () {\n this.onCloseBind = ::this.onClose;\n this.updatePositionBind = ::this.updatePosition;\n this.stopPropagationBind = ::this.stopPropagation;\n this.keyDownBind = ::this.focusSearch;\n\n findDOMNode(this).addEventListener('click', this.stopPropagationBind);\n document.addEventListener('keydown', this.keyDownBind);\n document.addEventListener('click', this.onCloseBind);\n window.addEventListener('scroll', this.updatePositionBind);\n window.addEventListener('resize', this.updatePositionBind);\n this.updatePosition();\n }\n\n componentWillUnmount () {\n findDOMNode(this).removeEventListener('click', this.stopPropagationBind);\n document.removeEventListener('keydown', this.keyDownBind);\n document.removeEventListener('click', this.onCloseBind);\n window.removeEventListener('scroll', this.updatePositionBind);\n window.removeEventListener('resize', this.updatePositionBind);\n }\n\n focusSearch () {\n if (!this.state.searchOpened) {\n document.removeEventListener('keydown', this.keyDownBind);\n this.setState({\n searchOpened: true\n });\n }\n }\n\n onSearchChange (search) {\n if (search) {\n const {elements, categories} = this.props;\n const suggestions = [];\n const searchLowered = search.toLowerCase();\n let suggestion = false;\n let suggestionweight = categories.length + 2;\n\n forEach(elements, (element, name) => {\n if (this.elementAcceptable(name, element) && name.toLowerCase().indexOf(searchLowered) !== -1) {\n let weight = categories.length;\n forEach(categories, (category, ind) => {\n if (category === (element.settings && element.settings.category)) {\n weight = ind;\n }\n });\n if (weight < suggestionweight) {\n suggestion = name;\n suggestionweight = weight;\n }\n suggestions.push(name);\n }\n });\n\n forEach(this.props.symbols, (symbol) => {\n if (symbol.title.toLowerCase().indexOf(searchLowered) !== -1) {\n const weight = categories.length + 1;\n if (weight < suggestionweight) {\n suggestion = {\n type: 'symbol',\n id: symbol._id,\n title: symbol.title\n };\n suggestionweight = weight;\n }\n suggestions.push({\n type: 'symbol',\n id: symbol._id\n });\n }\n });\n\n this.setState({\n searchOpened: true,\n search,\n suggestions,\n suggestion\n });\n } else {\n this.state.searchOpened && document.addEventListener('keydown', this.keyDownBind);\n this.setState({\n searchOpened: false,\n search\n });\n }\n }\n\n toggleCategory (category) {\n const {toggleCategory} = this.props.pageBuilderActions;\n toggleCategory(category);\n }\n\n stopPropagation () {\n this.clickedInside = true;\n }\n\n updatePosition (event = null, props = this.props) {\n const containerRect = props.elementsMenuOptions.container.getBoundingClientRect();\n\n const top = containerRect.top + containerRect.height / 2 - 105;\n let left = containerRect.right + 10;\n let side = 'right';\n let angleTriangle = false;\n\n // Constraints\n let contentTop = 0;\n const menuWidth = 280;\n const menuHeight = 400;\n const windowHeight = window.innerHeight;\n const windowWidth = window.innerWidth;\n\n if (top + menuHeight > windowHeight) {\n contentTop = windowHeight - (top + menuHeight);\n\n if (contentTop < -360) {\n contentTop = -360;\n }\n }\n\n if (top < 46) {\n const dif = 46 - top;\n contentTop = dif;\n if (contentTop > 95) {\n contentTop = 115;\n angleTriangle = true;\n }\n }\n\n if (left + menuWidth > windowWidth) {\n side = 'left';\n left = containerRect.right - 10 - menuWidth - containerRect.width;\n }\n\n this.setState({top, left, contentTop, side, angleTriangle});\n }\n\n onClose () {\n if (!this.clickedInside) {\n this.props.pageBuilderActions.closeElementsMenu();\n }\n this.clickedInside = false;\n }\n\n addElement (tag) {\n const {elementsMenuOptions} = this.props;\n this.props.pageBuilderActions.closeElementsMenu();\n this.props.pageBuilderActions.addElementAt({tag}, {\n id: elementsMenuOptions.targetId,\n position: elementsMenuOptions.targetPosition\n });\n }\n\n addSymbol (symbolId) {\n const {elementsMenuOptions} = this.props;\n this.props.pageBuilderActions.closeElementsMenu();\n this.props.pageBuilderActions.addElementAt({\n tag: 'Symbol',\n props: {\n symbolId\n }\n }, {\n id: elementsMenuOptions.targetId,\n position: elementsMenuOptions.targetPosition\n });\n }\n\n elementAcceptable (elementTag, element) {\n const {elementsMenuOptions} = this.props;\n let is = true;\n\n if (elementsMenuOptions.accepts) {\n if (elementsMenuOptions.accepts !== 'any' && elementsMenuOptions.accepts !== elementTag) {\n is = false;\n }\n } else if (elementsMenuOptions.rejects) {\n if (elementsMenuOptions.rejects === 'any' || elementsMenuOptions.rejects === elementTag) {\n is = false;\n }\n }\n\n const droppableOn = element.settings.drag && element.settings.drag.droppableOn;\n if (droppableOn) {\n if (droppableOn !== 'any' && elementsMenuOptions.targetType !== droppableOn) {\n is = false;\n }\n }\n\n return is;\n }\n\n render () {\n const style = {\n top: this.state.top,\n left: this.state.left\n };\n const ballonStyle = {\n top: this.state.contentTop\n };\n\n return (\n \n {this.renderContent()}\n
\n \n \n \n {categories.map(this.renderCategory, this)}\n {this.renderSymbolsCategory()}\n \n
\n );\n }\n\n renderCategory (category) {\n const {elements, categoriesCollapsed} = this.props;\n const categoryElements = [];\n\n forEach(elements, (element, index) => {\n if (element.settings && element.settings.category) {\n if (element.settings.category === category &&\n this.props.elementAcceptable(index, element) &&\n index !== 'Symbol') {\n categoryElements.push({\n label: index,\n element\n });\n }\n } else if (category === 'other' && this.props.elementAcceptable(index, element) && index !== 'Symbol') {\n categoryElements.push({\n label: index,\n element\n });\n }\n });\n\n if (categoryElements.length > 0) {\n const collapsedCategory = categoriesCollapsed[category];\n const onClick = this.toggleCategory.bind(this, category);\n\n return (\n \n
\n );\n }\n }\n\n renderElement (elementObj) {\n const element = elementObj.element;\n const icon = element.settings.icon;\n const label = elementObj.label;\n const addElement = this.addElement.bind(this, label);\n\n return (\n \n \n {category}\n
\n \n {!collapsedCategory && categoryElements.map(this.renderElement, this)}\n
\n \n {icon.content}\n {label}\n
\n );\n }\n\n renderSymbolsCategory () {\n if (Object.keys(this.props.symbols).length > 0) {\n const {categoriesCollapsed} = this.props;\n const collapsedCategory = categoriesCollapsed.symbols;\n\n const symbols = [];\n forEach(this.props.symbols, (symbol) => {\n symbols.push(this.renderSymbol(symbol));\n });\n const onClick = this.toggleCategory.bind(this, 'symbols');\n\n return (\n \n
\n );\n }\n }\n\n renderSymbol (symbol) {\n const onClick = this.addSymbol.bind(this, symbol._id);\n return (\n \n \n Symbols\n
\n \n {!collapsedCategory && symbols}\n
\n \n \n {symbol.title}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/elements-menu/list.less",
"content": "@import '~styles/colors.less';\n\n.root {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.category {\n margin-top: -1px;\n}\n\n.collapsed {\n .categoryInfo :global i {\n transform: rotate(-90deg);\n }\n}\n\n.categoryInfo {\n background-color: @chromeBackgroundColor;\n color: #efefef;\n padding-right: 5px;\n font-size: 10px;\n text-transform: uppercase;\n cursor: pointer;\n line-height: 30px;\n border-top: 1px solid @chromeBordersColor;\n border-bottom: 1px solid @chromeBordersColor;\n\n :global {\n i, span {\n vertical-align: top;\n display: inline-block;\n }\n i {\n color: #efefef;\n line-height: 30px;\n font-size: 14px;\n width: 30px;\n text-align: center;\n transition: all 0.3s fade-out;\n }\n }\n\n &:hover {\n background-color: #3f4249;\n }\n}\n\n.elementEntry {\n height: 30px;\n cursor: pointer;\n padding-left: 25px;\n\n :global {\n i, span {\n color: #efefef;\n line-height: 30px;\n display: inline-block;\n vertical-align: top;\n }\n\n span {\n font-size: 10px;\n text-transform: uppercase;\n }\n\n i {\n width: 35px;\n font-size: 13px;\n text-align: center;\n }\n }\n\n &:hover, &.active {\n background-color: #3f4249;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/elements-menu/search.jsx",
"content": "import forEach from 'lodash.foreach';\nimport key from 'keymaster';\nimport Component from 'components/component';\nimport Scrollable from 'components/scrollable';\nimport React, {PropTypes} from 'react';\n\nimport styles from './search.less';\nimport Autocomplete from './autocomplete';\n\nexport default class Search extends Component {\n static propTypes = {\n elementAcceptable: PropTypes.func.isRequired,\n addElement: PropTypes.func.isRequired,\n addSymbol: PropTypes.func.isRequired,\n onSearchChange: PropTypes.func.isRequired,\n suggestions: PropTypes.array.isRequired,\n suggestion: PropTypes.string.isRequired,\n search: PropTypes.string.isRequired,\n symbols: PropTypes.object.isRequired,\n categories: PropTypes.object.isRequired,\n elements: PropTypes.object.isRequired\n };\n\n componentDidMount () {\n key('enter', 'suggestions', this.addElementHotkey.bind(this, 0));\n for (let i = 1; i < 10; i++) {\n key(`⌘+${i}, ctrl+${i}`, 'suggestions', this.addElementHotkey.bind(this, i));\n }\n key.setScope('suggestions');\n }\n\n componentWillUnmount () {\n key.unbind('enter');\n for (let i = 1; i < 10; i++) {\n key.unbind(`⌘+${i}, ctrl+${i}`);\n }\n key.setScope('all');\n }\n\n addElementHotkey (num, event) {\n event.preventDefault();\n event.stopPropagation();\n const {suggestions} = this.props;\n const {categories, elements} = this.props;\n\n let counter = 0;\n let added = false;\n forEach(categories, (category) => {\n forEach(suggestions, (suggestion) => {\n if (typeof suggestion === 'string') {\n const element = elements[suggestion];\n const elementCategory = element.settings && element.settings.category || 'other';\n if (category === elementCategory) {\n if (counter === num) {\n this.props.addElement(suggestion);\n added = true;\n } else {\n counter++;\n }\n }\n }\n if (added) {\n return false;\n }\n });\n if (added) {\n return false;\n }\n });\n\n if (!added) {\n forEach(suggestions, (suggestion) => {\n if (typeof suggestion !== 'string') {\n if (counter === num) {\n this.props.addSymbol(suggestion.id);\n added = true;\n } else {\n counter++;\n }\n }\n if (added) {\n return false;\n }\n });\n }\n }\n\n addElement (tag, event) {\n event.preventDefault();\n this.props.addElement(tag);\n }\n\n addSymbol (symbolId) {\n this.props.addSymbol(symbolId);\n }\n\n render () {\n this.suggestionsCounter = -1;\n\n return (\n \n
\n );\n }\n\n renderContent () {\n let result;\n\n if (this.props.suggestions.length > 0) {\n const {categories} = this.props;\n result = (\n \n \n {this.renderContent()}\n \n
\n \n {categories.map(this.renderCategory, this)}\n {this.renderSymbols()}\n
\n );\n } else {\n result = No results from your search
;\n }\n\n return result;\n }\n\n renderCategory (category) {\n const {suggestions, elements} = this.props;\n const categoryElements = [];\n\n forEach(suggestions, (elementName) => {\n if (typeof elementName === 'string') {\n const element = elements[elementName];\n if (element.settings && element.settings.category) {\n if (element.settings.category === category) {\n categoryElements.push({\n label: elementName,\n element\n });\n }\n } else if (category === 'other') {\n categoryElements.push({\n label: elementName,\n element\n });\n }\n }\n });\n\n if (categoryElements.length > 0) {\n return (\n \n
\n );\n }\n }\n\n renderElement (elementObj) {\n const element = elementObj.element;\n const icon = element.settings.icon;\n const label = elementObj.label;\n\n const index = label.toLowerCase().indexOf(this.props.search.toLowerCase());\n const before = index > 0 && label.slice(0, index);\n const searched = label.slice(index, index + this.props.search.length);\n const after = label.slice(index + this.props.search.length);\n\n this.suggestionsCounter++;\n\n return (\n {category}
\n \n {categoryElements.map(this.renderElement, this)}\n
\n \n {icon.content}\n {before}\n {searched}\n {after}\n {this.suggestionsCounter < 10 && {this.suggestionsCounter === 0 ? 'enter' : ('cmd+' + this.suggestionsCounter)}}\n
\n );\n }\n\n renderSymbols () {\n const {suggestions} = this.props;\n const symbolsSuggestions = [];\n\n forEach(suggestions, (suggestion) => {\n if (typeof suggestion !== 'string') {\n symbolsSuggestions.push(this.renderSymbol(suggestion.id));\n }\n });\n\n if (symbolsSuggestions.length > 0) {\n return (\n \n
\n );\n }\n }\n\n renderSymbol (id) {\n const symbol = this.props.symbols[id];\n const label = symbol.title;\n\n const index = label.toLowerCase().indexOf(this.props.search.toLowerCase());\n const before = index > 0 && label.slice(0, index);\n const searched = label.slice(index, index + this.props.search.length);\n const after = label.slice(index + this.props.search.length);\n\n this.suggestionsCounter++;\n\n return (\n Symbols
\n \n {symbolsSuggestions}\n
\n \n \n {before}\n {searched}\n {after}\n {this.suggestionsCounter < 10 && {this.suggestionsCounter === 0 ? 'enter' : ('cmd+' + this.suggestionsCounter)}}\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/elements-menu/search.less",
"content": "@import '~styles/colors.less';\n\n.searchList {\n position: absolute;\n top: 40px;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.noResults {\n padding: 30px 15px;\n text-align: center;\n font-size: 10px;\n color: #efefef;\n}\n\n.suggestionCategory {\n margin-top: 5px;\n}\n\n.categoryInfo {\n color: #efefef;\n font-size: 10px;\n text-transform: uppercase;\n padding: 12px;\n}\n\n.elementEntry {\n padding: 0 18px;\n cursor: pointer;\n\n .searched {\n color: @primary;\n font-weight: 800;\n }\n .hotkey {\n float: right;\n color: #999999;\n font-size: 8px;\n text-transform: uppercase;\n }\n\n :global {\n span, i {\n display: inline-block;\n vertical-align: top;\n color: #efefef;\n line-height: 30px;\n font-size: 12px;\n }\n i {\n font-size: 13px;\n padding-right: 10px;\n }\n }\n\n &:hover, &.active {\n background-color: #3f4249;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder/index.js",
"content": "import * as pageBuilderActions from 'actions/page-builder';\n\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {bindActionCreators} from 'redux';\nimport {dataConnect} from 'relate-js';\n\nimport PageBuilder from './page-builder.jsx';\n\n@dataConnect(\n (state) => ({\n params: state.router.params,\n elementsMenuOpened: state.pageBuilder.elementsMenuOpened,\n dragging: state.dnd.dragging\n }),\n (dispatch) => ({\n pageBuilderActions: bindActionCreators(pageBuilderActions, dispatch)\n }),\n (props) => ({\n fragments: {\n draft: {\n _id: {\n _id: 1,\n _userId: 1\n },\n __v: 1,\n data: 1,\n actions: 1\n }\n },\n variablesTypes: {\n draft: {\n id: 'ID!'\n }\n },\n initialVariables: {\n draft: {\n id: props.params.id\n }\n }\n })\n)\nexport default class PageBuilderContainer extends Component {\n static propTypes = {\n relate: PropTypes.object.isRequired,\n params: PropTypes.object.isRequired\n };\n\n componentWillReceiveProps (nextProps) {\n if (this.props.params.id !== nextProps.params.id) {\n this.props.relate.setVariables({\n draft: {\n id: nextProps.params.id\n }\n });\n }\n }\n\n render () {\n return (\n \n
\n );\n }\n\n renderElementsMenu () {\n const {elementsMenuOpened} = this.props;\n if (elementsMenuOpened) {\n return (\n \n {selectedPath && selectedPath.map(this.renderEntry, this)}\n \n {(selectedElement && (selectedElement.label || selectedElement.tag)) || 'body'}\n \n
\n );\n }\n\n renderEntry (entry) {\n const {selectElement} = this.props;\n return (\n \n
\n );\n }\n\n renderContent () {\n const {linkingData, linkingFormData} = this.props;\n let result;\n\n if (linkingData) {\n result = \n {this.renderContent()}\n
\n Missing
;\n } else if (linkingFormData) {\n result = Missing
;\n } else {\n result = \n {this.renderContent()}\n
\n );\n } else {\n const dragInfo = {\n type: 'move',\n id: element.id\n };\n\n result = (\n \n \n {this.renderContent()}\n \n
\n );\n }\n return result;\n }\n\n renderOptionsMenu () {\n if (this.state.options) {\n return (\n \n {ElementClass.settings.icon.content}\n {element.label || element.tag}\n
\n {this.renderOptions()}\n \n );\n }\n\n renderCaret () {\n const {hasChildren, isExpanded} = this.props;\n if (hasChildren) {\n return (\n \n \n {this.renderOptionsMenu()}\n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/layers/entry.less",
"content": "@import '~styles/colors.less';\n\n@height: 30px;\n\n.entry {\n display: block;\n text-align: left;\n text-decoration: none;\n\n color: @chromeTextColor;\n font-size: 11px;\n line-height: @height;\n padding-right: 25px;\n margin-top: 1px;\n\n height: @height;\n\n &.subComponent {\n opacity: 0.6;\n }\n\n &:not(.hasChildren) {\n .info {\n padding-left: @height;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n left: 0; right: 0;\n height: @height;\n border-bottom: 1px solid @chromeBordersColor;\n }\n\n &.overed {\n &:before {\n background-color: @chromeBackgroundActive;\n }\n .options {\n visibility: visible;\n }\n }\n\n &.selected {\n &:before {\n background-color: @primary;\n }\n color: @chromeTextColorHighlight;\n }\n}\n\n.part {\n position: relative;\n vertical-align: top;\n display: inline-block;\n}\n\n.caret {\n width: @height;\n height: @height;\n text-align: center;\n cursor: pointer;\n\n :global i {\n color: @chromeTextColor;\n font-size: 13px;\n line-height: @height;\n transition: all 0.2s ease-out;\n }\n\n &.collapsed {\n :global i {\n transform: rotate(-90deg);\n }\n }\n}\n\n.info {\n cursor: default;\n\n :global {\n i, span {\n display: inline-block;\n vertical-align: top;\n line-height: @height;\n color: @chromeTextColor;\n }\n\n i {\n font-size: 13px;\n padding-right: 10px;\n }\n\n span {\n font-size: 11px;\n }\n }\n}\n\n.options {\n position: absolute;\n right: 0;\n height: @height;\n width: @height;\n text-align: center;\n cursor: pointer;\n\n :global i {\n line-height: @height;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/layers/index.js",
"content": "import * as pageBuilderActions from 'actions/page-builder';\n\nimport Component from 'components/component';\nimport React from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport Layers from './layers';\n\n@connect(\n (state) => ({\n data: state.pageBuilder.data,\n selectedElement: state.pageBuilder.selectedElement,\n elements: state.pageBuilder.elements,\n expanded: state.pageBuilder.expanded,\n userExpanded: state.pageBuilder.userExpanded,\n selectedId: state.pageBuilder.selectedId,\n overedId: state.pageBuilder.overedId,\n dragging: state.dnd.dragging\n }),\n (dispatch) => ({\n pageBuilderActions: bindActionCreators(pageBuilderActions, dispatch)\n })\n)\nexport default class LayersTabContainer extends Component {\n render () {\n return (\n \n \n \n
\n \n {\n data.body &&\n data.body.children &&\n this.renderList(\n data.body.children,\n {type: 'body', id: 'body'},\n {accepts: 'Section'},\n {tag: 'body'}\n )\n }\n
\n - \n {children.map(this.renderListEntry, this)}\n
- \n
- \n
\n {this.renderContent()}\n \n
\n );\n }\n\n renderContent () {\n const {selectedElement} = this.props;\n return (\n \n
\n );\n }\n\n renderOptions (ElementClass) {\n const {changeElementProperty} = this.props.pageBuilderActions;\n const {selectedId, selectedElement, display} = this.props;\n\n if (ElementClass.propsSchema) {\n const values = Object.assign({}, ElementClass.defaultProps, getElementProps(selectedElement, display));\n return (\n \n
\n Label
\n \n
\n Visible on
\n \n \n \n \n \n \n \n \n \n \n
\n \n {this.renderActionButtons()}\n \n {this.renderContent()}\n \n
\n );\n }\n\n renderContent () {\n const {selectedId} = this.props;\n let result;\n\n if (selectedId && selectedId !== 'body') {\n result = \n \n
\n );\n }\n\n renderActionButtons () {\n const {selectedId, selectedElement, duplicate, remove} = this.props;\n\n if (selectedId && selectedId !== 'body') {\n let result;\n\n if (selectedElement.subComponent) {\n result = (\n Relax, you have to select an element first!
\n \n This is a sub element\n
\n );\n } else {\n result = (\n \n \n \n
\n );\n }\n\n return result;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/settings/settings.less",
"content": "@import '~styles/colors.less';\n\n.content {\n position: absolute;\n top: 30px;\n bottom: 0px;\n left: 0;\n right: 0;\n}\n\n.info {\n position: absolute;\n left: 0;\n right: 0;\n top: 40%;\n transform: translateY(-50%);\n text-align: center;\n padding: 0 45px;\n\n :global i {\n font-size: 35px;\n color: @chromeTextSubColor;\n margin-bottom: 15px;\n }\n}\n\n.label {\n font-size: 12px;\n color: @chromeTextSubColor;\n}\n\n.actions {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 30px;\n border-bottom: 1px solid @chromeBordersColor;\n margin: 0;\n}\n\n.action {\n display: inline-block;\n vertical-align: top;\n text-align: center;\n text-decoration: none;\n width: 50%;\n margin: 0;\n border-right: 1px solid @chromeBordersColor;\n\n :global {\n i, span {\n display: inline-block;\n line-height: 30px;\n color: @chromeTextColor;\n }\n span {\n font-size: 10px;\n }\n i {\n font-size: 9px;\n margin-right: 6px;\n }\n }\n\n &:last-child {\n border-right: 0;\n }\n\n &:hover {\n :global {\n i, span {\n color: @primary;\n }\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/style/index.js",
"content": "import Component from 'components/component';\nimport React from 'react';\nimport {connect} from 'react-redux';\n\nimport Style from './style';\n\n@connect(\n (state) => ({\n styles: state.styles.data,\n display: state.display,\n selectedElement: state.pageBuilder.selectedElement,\n elements: state.pageBuilder.elements\n })\n)\nexport default class StyleTabContainer extends Component {\n render () {\n return (\n \n {this.renderOptions()}\n
\n );\n }\n\n renderOptions () {\n const {styleOptions, selectedStyle, display} = this.props;\n const values = getElementStyleValues(\n styleOptions.defaults,\n selectedStyle.options,\n selectedStyle.displayOptions,\n display\n );\n\n return (\n \n
\n );\n }\n\n renderOptionsButton () {\n if (this.props.entry._id !== 'no_style') {\n return (\n \n \n {this.renderOptionsMenu()}\n \n );\n }\n }\n\n renderOptionsMenu () {\n if (this.state.options) {\n return (\n \n {this.props.entry.title}\n {this.renderOptionsButton()}\n {this.renderInfo()}\n
\n \n \n {this.renderContent()}\n \n {this.renderSaveStyle()}\n
\n );\n }\n\n renderContent () {\n let result;\n if (this.props.editing) {\n result = (\n \n {selectedStyle.title}\n \n
\n \n {this.props.styles.map(this.renderEntry, this)}\n
\n \n \n \n \n
\n );\n } else {\n result = (\n \n \n
\n );\n }\n return result;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/style/style-picker/style-picker.less",
"content": "@import '~styles/colors.less';\n\n.selected {\n position: relative;\n padding: 0 18px;\n border-bottom: 1px solid @chromeBordersColor;\n cursor: pointer;\n\n :global {\n span, i {\n display: inline-block;\n }\n span {\n font-size: 11px;\n text-transform: uppercase;\n line-height: 65px;\n color: @chromeTextColor;\n }\n i {\n font-size: 14px;\n position: absolute;\n right: 12px;\n line-height: 65px;\n color: @chromeTextSubColor;\n }\n }\n\n &:hover {\n background-color: @chromeBackgroundActive;\n }\n}\n\n.content {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 66px;\n}\n\n.noStyle {\n bottom: 91px;\n}\n\n.saveStyle {\n position: absolute;\n bottom: 0px;\n height: 60px;\n left: 0; right: 0;\n border-top: 1px solid @chromeBordersColor;\n text-align: center;\n padding: 10px;\n\n .input {\n width: 205px;\n height: 39px;\n display: inline-block;\n vertical-align: top;\n\n :global input {\n text-transform: uppercase;\n }\n }\n}\n\n.submitButton {\n display: inline-block;\n vertical-align: top;\n width: 50px;\n text-align: center;\n cursor: pointer;\n\n :global i {\n font-size: 18px;\n line-height: 39px;\n color: @chromeTextSubColor;\n transition: all 0.3s ease-out;\n }\n\n &:hover :global i {\n color: @chromeTextColor;\n transform: translateX(5px);\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/style/style.jsx",
"content": "import getElementProps from 'helpers/get-element-props';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './style.less';\nimport StylePicker from './style-picker';\n\nexport default class Style extends Component {\n static propTypes = {\n selectedElement: PropTypes.object,\n elements: PropTypes.object,\n display: PropTypes.string,\n styles: PropTypes.array.isRequired\n };\n\n render () {\n const {selectedElement, elements} = this.props;\n let result;\n\n if (selectedElement && selectedElement.id !== 'body') {\n const Element = elements[selectedElement.tag];\n\n if (Element && Element.style) {\n result = this.renderStylePicker(Element);\n } else {\n result = this.renderNotStylable();\n }\n } else {\n result = this.renderNoneSelected();\n }\n\n return result;\n }\n\n renderStylePicker (Element) {\n const {selectedElement, display} = this.props;\n const elementProps = getElementProps(selectedElement, display);\n\n return (\n \n \n
\n );\n }\n\n renderNotStylable () {\n return (\n Relax, you have to select an element first!
\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/style/style.less",
"content": "@import '~styles/colors.less';\n\n.info {\n position: absolute;\n left: 0;\n right: 0;\n top: 40%;\n transform: translateY(-50%);\n text-align: center;\n padding: 0 45px;\n\n :global i {\n font-size: 35px;\n color: @chromeTextSubColor;\n margin-bottom: 15px;\n }\n}\n\n.label {\n font-size: 12px;\n color: @chromeTextSubColor;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/tab-button.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './tab-button.less';\n\nexport default class TabButton extends Component {\n static propTypes = {\n tab: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n active: PropTypes.bool.isRequired\n };\n\n onClick () {\n const {onClick, tab} = this.props;\n onClick(tab);\n }\n\n render () {\n const {tab, active} = this.props;\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/tab-button.less",
"content": "@import '~styles/colors.less';\n\n.root {\n display: inline-block;\n vertical-align: top;\n width: 33.3332%;\n color: @chromeTextColor;\n text-align: center;\n font-size: 12px;\n line-height: 49px;\n text-transform: uppercase;\n border-right: 1px solid @chromeBordersColor;\n\n &:last-child {\n border-right: 0;\n }\n}\n\n.selected {\n background-color: @chromeBackgroundActive;\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/page-builder-menu/tabs/tabs.jsx",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './tabs.less';\nimport Layers from './layers';\nimport Settings from './settings';\nimport Style from './style';\nimport TabButton from './tab-button';\n\nexport default class Tabs extends Component {\n static propTypes = {\n menuTab: PropTypes.string.isRequired,\n setMenuTab: PropTypes.func.isRequired\n };\n\n render () {\n const {menuTab} = this.props;\n return (\n Current selected element has no style options.
\n \n
\n );\n }\n\n renderContent () {\n const {menuTab} = this.props;\n let result;\n\n if (menuTab === 'style') {\n result = ;\n } else if (menuTab === 'settings') {\n result = \n
\n \n {this.renderContent()}\n
\n \n \n {this.props.children}\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/scrollable/index.less",
"content": ".root {\n position: absolute;\n top: 0; left: 0; bottom: 0; right: 0;\n}\n\n.scrollbar {\n :global {\n /* @helper: used to measure the scrollbar width on a temporal element */\n .gm-test {\n width: 100px;\n height: 100px;\n position: absolute;\n top: -9999px;\n overflow: scroll;\n -ms-overflow-style: scrollbar;\n }\n\n /* disable selection while dragging */\n .gm-scrollbar-disable-selection {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n /* fallback for native floating scrollbars */\n .gm-prevented {\n -webkit-overflow-scrolling: touch;\n }\n .gm-prevented .gm-scrollbar {\n display: none;\n }\n\n\n /* actual gemini-scrollbar styles */\n .gm-scrollbar-container {\n position: relative;\n overflow: hidden!important;\n width: 100%;\n height: 100%;\n }\n\n .gm-scrollbar {\n position: absolute;\n right: 2px;\n bottom: 2px;\n z-index: 1;\n border-radius: 3px;\n }\n\n .gm-scrollbar.-vertical {\n width: 5px;\n top: 2px;\n }\n\n .gm-scrollbar.-horizontal {\n height: 6px;\n left: 2px;\n }\n\n .gm-scrollbar .thumb {\n position: relative;\n display: block;\n width: 0;\n height: 0;\n cursor: pointer;\n border-radius: inherit;\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n .gm-scrollbar .thumb:hover,\n .gm-scrollbar .thumb:active {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .gm-scrollbar.-vertical .thumb {\n width: 100%;\n }\n\n .gm-scrollbar.-horizontal .thumb {\n height: 100%;\n }\n\n .gm-scrollbar-container .gm-scroll-view {\n width: 100%;\n height: 100%;\n overflow: scroll;\n -webkit-overflow-scrolling: touch;\n }\n\n /* @option: autoshow */\n .gm-scrollbar-container.gm-autoshow .gm-scrollbar {\n opacity: 0;\n transition: opacity 120ms ease-out;\n }\n .gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,\n .gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {\n opacity: 1;\n transition: opacity 340ms ease-out;\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/spinner/index.jsx",
"content": "import cx from 'classnames';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class Spinner extends Component {\n static propTypes = {\n className: PropTypes.string,\n small: PropTypes.bool\n };\n\n render () {\n const {className, small} = this.props;\n return (\n \n );\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/spinner/index.less",
"content": "// Bar spinner (check)\n.spinner {\n display: inline-block;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n border-top: 3px solid #3EB0F2;\n border-right: 3px solid #DADADA;\n border-bottom: 3px solid #DADADA;\n border-left: 3px solid #DADADA;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: sk-bar-spinner-frames 1.1s infinite linear;\n animation: sk-bar-spinner-frames 1.1s infinite linear;\n}\n.spinner, .spinner:after {\n border-radius: 50%;\n width: 20px;\n height: 20px;\n}\n.small, .small:after {\n width: 13px;\n height: 13px;\n}\n\n@-webkit-keyframes sk-bar-spinner-frames {.sk-bar-spinner-frames;}\n@keyframes sk-bar-spinner-frames {.sk-bar-spinner-frames;}\n\n.sk-bar-spinner-frames() {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/stick/index.jsx",
"content": "import cx from 'classnames';\nimport Animate from 'components/animate';\nimport Component from 'components/component';\nimport React, {PropTypes} from 'react';\n\nimport styles from './index.less';\n\nexport default class Stick extends Component {\n static propTypes = {\n element: PropTypes.node.isRequired,\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n transition: PropTypes.string,\n verticalPosition: PropTypes.oneOf(['top', 'center', 'bottom']),\n horizontalPosition: PropTypes.oneOf(['left', 'center', 'right']),\n verticalOffset: PropTypes.number,\n horizontalOffset: PropTypes.number,\n onClose: PropTypes.func\n };\n\n static defaultProps = {\n transition: 'fadeIn',\n verticalPosition: 'top',\n horizontalPosition: 'center',\n verticalOffset: 0,\n horizontalOffset: 0\n };\n\n getInitState () {\n return {\n left: 0,\n top: 0\n };\n }\n\n componentDidMount () {\n this.mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';\n this.scrollBind = ::this.onScroll;\n this.resizeBind = ::this.onResize;\n this.onCloseBind = ::this.onClose;\n document.body.addEventListener(this.mousewheelevt, this.scrollBind, false);\n window.addEventListener('resize', this.resizeBind, false);\n this.props.onClose && document.body.addEventListener('mousedown', this.onCloseBind, false);\n this.updatePosition();\n }\n\n componentWillUnmount () {\n document.body.removeEventListener(this.mousewheelevt, this.scrollBind);\n window.removeEventListener('resize', this.resizeBind);\n this.props.onClose && document.body.removeEventListener('mousedown', this.onCloseBind);\n }\n\n onClose (event) {\n const rect = this.props.element.getBoundingClientRect();\n const thisRect = this.refs.holder.getBoundingClientRect();\n\n const outOfElement = (event.pageX < rect.left || event.pageX > rect.left + rect.width) ||\n (event.pageY < rect.top || event.pageY > rect.top + rect.height);\n const outOfThis = (event.pageX < thisRect.left || event.pageX > thisRect.left + thisRect.width) ||\n (event.pageY < thisRect.top || event.pageY > thisRect.top + thisRect.height);\n\n if (outOfElement && outOfThis) {\n this.props.onClose();\n }\n }\n\n onScroll () {\n this.updatePosition();\n this.updateTimeout = setTimeout(::this.updatePosition, 0);\n }\n\n onResize () {\n this.updatePosition();\n this.updateTimeout = setTimeout(::this.updatePosition, 10);\n }\n\n updatePosition () {\n this.setState(this.getPosition());\n }\n\n getPosition () {\n const position = {\n left: 0,\n top: 0,\n horizontal: this.props.horizontalPosition,\n vertical: this.props.verticalPosition\n };\n const rect = this.props.element.getBoundingClientRect();\n const thisRect = this.refs.holder.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const windowWidth = window.innerWidth;\n\n switch (this.props.horizontalPosition) {\n case 'left':\n position.left = rect.left;\n break;\n case 'center':\n position.left = rect.left + rect.width / 2 - thisRect.width / 2;\n break;\n case 'right':\n position.left = rect.left + rect.width - thisRect.width;\n break;\n default:\n position.left = 0;\n }\n position.left += this.props.horizontalOffset;\n\n switch (this.props.verticalPosition) {\n case 'top':\n position.top = rect.top - thisRect.height;\n break;\n case 'center':\n position.top = rect.top + rect.height / 2 - thisRect.height / 2;\n break;\n case 'bottom':\n position.top = rect.top + rect.height;\n break;\n default:\n position.top = 0;\n }\n position.top += this.props.verticalOffset;\n\n // Overflows\n if (position.top + thisRect.height > windowHeight) {\n position.top = rect.top - thisRect.height - this.props.verticalOffset;\n position.vertical = 'top';\n }\n if (position.left + thisRect.width > windowWidth) {\n position.left = rect.left + rect.width - thisRect.width - this.props.horizontalOffset;\n position.horizontal = 'right';\n }\n\n return position;\n }\n\n render () {\n const {transition, className} = this.props;\n // const {vertical, horizontal} = this.state;\n const style = {\n left: this.state.left,\n top: this.state.top\n };\n\n return (\n \n {this.props.children}\n
\n \n
\n );\n }\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/components/upload/index.less",
"content": "@import '~styles/colors.less';\n\n.canDrop, .cannotDrop {\n visibility: hidden;\n position: absolute;\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 3px;\n pointer-events: none;\n border: 1px solid @primary;\n background-color: rgba(17, 164, 255, 0.75);\n color: #ffffff;\n font-size: 12px;\n line-height: 28px;\n text-align: center;\n width: 280px;\n z-index: 1;\n}\n.cannotDrop {\n border-color: #F55151;\n background-color: rgba(255, 17, 17, 0.75);\n}\n\n.active {\n .canDrop {\n visibility: visible;\n }\n &:after {\n content: ' ';\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n border: 5px solid @primary;\n }\n}\n\n.reject {\n .cannotDrop {\n visibility: visible;\n }\n &:after {\n content: ' ';\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n border: 5px solid #F55151;\n }\n}\n"
},
{
"path": "lib/shared/screens/admin/shared/helpers/input-options-map.js",
"content": "import BorderPicker from 'components/input-options/border';\nimport BorderStyle from 'components/input-options/border-style';\nimport BoxShadow from 'components/input-options/box-shadow';\nimport Button from 'components/input-options/button';\nimport Checkbox from 'components/input-options/checkbox';\nimport ColorPicker from 'components/input-options/color';\nimport ColumnsManager from 'components/input-options/columns';\nimport Combobox from 'components/input-options/combobox';\nimport CornersPicker from 'components/input-options/corners';\nimport Filters from 'components/input-options/filters';\nimport FontPicker from 'components/input-options/font';\nimport HtmlArea from 'components/input-options/rich-text';\nimport IconPicker from 'components/input-options/icon';\nimport ImagePicker from 'components/input-options/image';\nimport Input from 'components/input-options/input';\nimport MenuPicker from 'components/input-options/menu';\nimport NumberInput from 'components/input-options/number';\nimport Optional from 'components/input-options/optional';\nimport PagePicker from 'components/input-options/page';\nimport SchemaPicker from 'components/input-options/schema';\nimport Section from 'components/input-options/section';\nimport ShadowPosition from 'components/input-options/shadow-position';\nimport Sorts from 'components/input-options/sorts';\nimport SpacingPicker from 'components/input-options/spacing';\nimport TextShadow from 'components/input-options/text-shadow';\n\nexport const TypesOptionsMap = {\n Color: ColorPicker,\n String: Input,\n Image: ImagePicker,\n Audio: ImagePicker,\n Select: Combobox,\n SchemaPicker,\n MenuPicker,\n PagePicker,\n Number: NumberInput,\n Pixels: NumberInput,\n Percentage: NumberInput,\n Padding: SpacingPicker,\n Margin: SpacingPicker,\n Boolean: Checkbox,\n Font: FontPicker,\n Button,\n Icon: IconPicker,\n Corners: CornersPicker,\n ManageColumns: ColumnsManager,\n Border: BorderPicker,\n LineStyle: BorderStyle,\n Optional,\n Section,\n Html: HtmlArea,\n Filters,\n Sorts,\n TextShadow,\n BoxShadow,\n ShadowPosition,\n Date: NumberInput\n};\n\nexport const TypesOptionsDefaultProps = {\n Pixels: {\n allowed: ['px']\n },\n Percentage: {\n min: 0,\n max: 100,\n allowed: ['%']\n },\n Padding: {\n type: 'padding'\n },\n Margin: {\n type: 'margin'\n },\n Audio: {\n width: 50,\n height: 50,\n type: 'audio'\n }\n};\n"
},
{
"path": "lib/shared/screens/auth/components/logo/index.jsx",
"content": "import React from 'react';\nimport Component from 'components/component';\n\nimport styles from './index.less';\n\nexport default class Logo extends Component {\n render () {\n return (\n Release your file(s) to upload
\n You're dragging invalid files
\n \n 
\n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/auth/components/logo/index.less",
"content": "@import '~styles/colors.less';\n\n.logo {\n text-align: center;\n position: relative;\n display: inline-block;\n margin-bottom: 30px;\n}\n\n.version {\n position: absolute;\n background-color: @primary;\n right: -10px;\n top: 0;\n display: inline-block;\n font-size: 9px;\n color: #ffffff;\n border-radius: 4px;\n padding: 1px 4px;\n}\n"
},
{
"path": "lib/shared/screens/auth/index.css",
"content": ".content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 100%;\n width: 400px;\n text-align: center;\n font-family: 'Open Sans';\n}\n"
},
{
"path": "lib/shared/screens/auth/index.jsx",
"content": "import 'styles/normalize.less';\nimport 'styles/nucleo/index.less';\n\nimport React, {PropTypes} from 'react';\nimport Component from 'components/component';\n\nimport styles from './index.css';\nimport Logo from './components/logo';\n\nexport default class Auth extends Component {\n static propTypes = {\n children: PropTypes.node.isRequired\n };\n\n render () {\n return (\n \n beta
\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/auth/screens/init/components/init.jsx",
"content": "import authStyles from 'styles/auth.less';\nimport Button from 'components/button';\nimport React, {PropTypes} from 'react';\nimport Component from 'components/component';\n\nexport default class Init extends Component {\n static propTypes = {\n onChange: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n user: PropTypes.object,\n error: PropTypes.string\n };\n\n onChange (id, event) {\n this.props.onChange(id, event.target.value);\n }\n\n render () {\n const {username, password, name, email} = this.props.user;\n\n return (\n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/auth/screens/init/index.js",
"content": "import Component from 'components/component';\nimport React, {PropTypes} from 'react';\nimport {addUser} from 'actions/users';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from 'redux';\n\nimport AdminInit from './components/init';\n\n@connect(\n () => ({}),\n (dispatch) => bindActionCreators({addUser}, dispatch)\n)\nexport default class Init extends Component {\n static propTypes = {\n addUser: PropTypes.func.isRequired\n };\n\n getInitState () {\n return {\n user: {\n username: '',\n name: '',\n password: '',\n email: ''\n }\n };\n }\n\n onChange (id, value) {\n this.state.user[id] = value;\n this.setState({\n user: this.state.user\n });\n }\n\n onSubmit (event) {\n event.preventDefault();\n\n this.props\n .addUser({\n users: {\n _id: 1\n }\n }, {\n ...this.state.user\n })\n .then(() => {\n window.location = '/admin/login';\n })\n .done();\n }\n\n render () {\n return (\n Welcome to Relax!
\n Register the first user to start building your website in a breeze.
\n \n \n
\n );\n }\n}\n"
},
{
"path": "lib/shared/screens/auth/screens/login/index.js",
"content": "import request from 'superagent';\nimport React, {PropTypes} from 'react';\nimport Component from 'components/component';\n\nimport Login from './components/login';\n\nexport default class LoginContainer extends Component {\n static propTypes = {\n history: PropTypes.object.isRequired\n };\n\n getInitState () {\n return {\n username: '',\n password: ''\n };\n }\n\n onSubmit (event) {\n event.preventDefault();\n const {username, password} = this.state;\n\n request\n .post('/admin/login')\n .set('Content-Type', 'application/json')\n .set('Accept', 'application/json')\n .send({username, password})\n .end((error, res) => {\n if (error) {\n this.setState({\n error: res.body.message\n });\n } else {\n window.location.href = '/admin';\n }\n });\n }\n\n fieldChange (id, value) {\n this.setState({\n [id]: value\n });\n }\n\n render () {\n return (\n Welcome back!
\n Login with your account below to get started
\n \n