{"version":3,"file":"js/docs-bundle-bb813c4cb65b3cf7d1d7.js","mappings":"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","sources":["webpack://imageboss-www/./app/javascript/bundles/ImageViewer/index.js","webpack://imageboss-www/./app/javascript/bundles/SyntaxExample/index.js","webpack://imageboss-www/./app/javascript/packs/docs-bundle.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { classNames, If } from 'react-extras';\nimport Viewer from 'react-viewer';\nimport { Tooltip } from 'react-tippy';\n\nexport default class ImageViewer extends React.Component {\n  static propTypes = {};\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      source: props.recipe || 'boss-images',\n      recipe: props.recipe || 'cover',\n      width: props.width || 522,\n      height: props.height || 340,\n      blur: false,\n      blurValue: 3,\n      grayscale: false,\n      recipesBar: props.recipesBar || 'on',\n      optionsBar: props.optionsBar || 'on',\n      path: props.path || \"/examples/02.jpg\",\n      recipes: {\n        width: `${props.service}/${props.source}/width/:width/:options:path`,\n        height: `${props.service}/${props.source}/height/:height/:options:path`,\n        cover: `${props.service}/${props.source}/cover/:widthx:height/:options:path`,\n      }\n    };\n\n    const defaultParams = this.getDefaultDimensions();\n    this.state.width = defaultParams.width;\n    this.state.height = defaultParams.height;\n  }\n\n  componentDidMount() {\n    this.setPreviewImage();\n  }\n\n  setPreviewImage = () => {\n    const previewImageUrl = this.getImageUrl();\n    document.getElementById('preview-image').style.backgroundImage = `url(\"${previewImageUrl}\")`;\n    this.setState({ previewImg: previewImageUrl });\n  }\n\n  getDefaultDimensions = (recipe = this.state.recipe) => {\n    if (recipe === \"cover\") {\n      return { width: 500, height: 500 };\n    } else if (recipe === 'width') {\n      return { width: 700, height: this.state.height };\n    }\n\n    return { width: this.state.width, height: 700 };\n  }\n\n  setRecipe = (recipe, e) => {\n    e.preventDefault();\n    const params = this.getDefaultDimensions(recipe);\n    this.setState({ recipe, width: params.width, height: params.height }, this.setPreviewImage);\n  }\n\n  setOption = (option, e) => {\n    e.preventDefault();\n    this.setState({ [option]: !this.state[option] }, this.setPreviewImage);\n  }\n\n  getOptions = () => {\n    const optionsArray = ['format:auto'];\n    let options;\n\n    ['grayscale', 'blur'].forEach((option) => {\n      if (this.state[option]) {\n        if (option === 'grayscale') {\n          optionsArray.push(`${option}:true`)\n        } else if (option === 'blur') {\n          optionsArray.push(`${option}:${this.state.blurValue}`);\n        }\n      }\n    });\n\n    if (optionsArray.length) {\n      options = `${optionsArray.join(',')}/`;\n    }\n\n    return options || '';\n  }\n\n  getImageUrl = () => {\n    const optionsArray = [];\n    let options;\n\n    ['grayscale', 'blur'].forEach((option) => {\n      if (this.state[option]) {\n        if (option === 'grayscale') {\n          optionsArray.push(`${option}:true`)\n        } else if (option === 'blur') {\n          optionsArray.push(`${option}:${this.state.blurValue}`);\n        }\n      }\n    });\n\n    if (optionsArray.length) {\n      options = `${optionsArray.join(',')}/`;\n    }\n\n    const width = Math.max(1, Number(this.state.width));\n    const height = Math.max(1, Number(this.state.height));\n\n    return this.state.recipes[this.state.recipe]\n              .replace(':width', width)\n              .replace(':height', height)\n              .replace(':options', this.getOptions())\n              .replace('/:path', this.state.path);\n  }\n\n  toogleImageViewer = (e) => {\n    e.preventDefault();\n    this.setState({ visible: !this.state.visible });\n  }\n\n  changeParams = (param, e) => {\n    let value;\n    if (e.target.value) {\n      value = Math.min(4000, e.target.value);\n    } else {\n      value = e.target.value;\n    }\n\n    this.setState({ [param]: value });\n  }\n\n  render() {\n    const coverClass = classNames({ active: this.state.recipe === 'cover' });\n    const widthClass = classNames({ active: this.state.recipe === 'width' });\n    const heightClass = classNames({ active: this.state.recipe === 'height' });\n\n    const blurClass = classNames('icon icon-blur', { 'icon-blur-on': this.state.blur });\n    const grayscaleClass = classNames('icon icon-gs', { 'icon-gs-on': this.state.grayscale });\n\n    const recipeText = this.state.recipe == 'cover'\n        ? `/mywebsite-images/${this.state.recipe}/${this.state.width}x${this.state.height}/${this.getOptions()}`\n        : `/mywebsite-images/${this.state.recipe}/${this.state.width}/${this.getOptions()}`\n\n    return (\n      <div className=\"in-action-frame\">\n        <div className=\"in-action-image\" id=\"preview-image\" onClick={this.toogleImageViewer}>\n          <Viewer\n            visible={this.state.visible}\n            onClose={() => { this.setState({ visible: false }); }}\n            images={[{ src: this.state.previewImg , alt: 'Real Size Image' }]}\n          />\n          <a href=\"#\" className=\"btn btn-small btn-green-sh\">view in real size</a>\n        </div>\n        <div className=\"in-action-tools\">\n          <If condition={this.state.recipesBar === 'on'}>\n            <div className=\"recipes\">\n              <ul>\n                <li>\n                  <Tooltip title=\"The final image will have an exact proportion with the Smart Cropping Technology.\" position=\"top\" trigger=\"mouseenter\">\n                    <a href=\"#\" className={coverClass} onClick={this.setRecipe.bind(null, 'cover')}>Cover</a>\n                  </Tooltip>\n                  </li>\n                <li>\n                  <Tooltip title=\"The final image will have its width proportionally calculated and a fixed height.\" position=\"top\" trigger=\"mouseenter\">\n                    <a href=\"#\" className={widthClass} onClick={this.setRecipe.bind(null, 'width')}>Width</a>\n                  </Tooltip>\n                </li>\n                <li>\n                  <Tooltip title=\"The final image will have its height proportionally calculated and a fixed width.\" position=\"top\" trigger=\"mouseenter\">\n                    <a href=\"#\" className={heightClass} onClick={this.setRecipe.bind(null, 'height')}>Height</a>\n                  </Tooltip>\n                </li>\n              </ul>\n            </div>\n          </If>\n          <If condition={this.state.optionsBar === 'on'}>\n            <div className=\"options\">\n              <ul>\n                <li>\n                  <Tooltip title=\"Apply a blur filter.\" position=\"top\" trigger=\"mouseenter\">\n                    <a href=\"#\" onClick={this.setOption.bind(null, 'blur')}><i className={blurClass}></i></a>\n                  </Tooltip>\n                </li>\n                <li>\n                  <Tooltip title=\"Apply a black & white filter.\" position=\"top\" trigger=\"mouseenter\">\n                    <a href=\"#\" onClick={this.setOption.bind(null, 'grayscale')}><i className={grayscaleClass}></i></a>\n                  </Tooltip>\n                </li>\n              </ul>\n            </div>\n          </If>\n        </div>\n        <div className=\"in-action-recipe-options\">\n          <If condition={this.state.recipe === \"cover\"}>\n            <input type=\"number\" value={this.state.width} onChange={this.changeParams.bind(null, 'width')} placeholder=\"Width\" />\n            &nbsp; x &nbsp;\n            <input type=\"number\" value={this.state.height} onChange={this.changeParams.bind(null, 'height')} placeholder=\"Height\" />\n          </If>\n\n          <If condition={this.state.recipe === \"width\"}>\n            <input type=\"number\" value={this.state.width} onChange={this.changeParams.bind(null, 'width')} placeholder=\"Width\" /> &nbsp; px\n          </If>\n\n          <If condition={this.state.recipe === \"height\"}>\n            <input type=\"number\" value={this.state.height} onChange={this.changeParams.bind(null, 'height')} placeholder=\"Height\" /> &nbsp; px\n          </If>\n          &nbsp; &nbsp; <button onClick={this.setPreviewImage} className=\"btn btn-green btn-small\">Generate</button>\n        </div>\n        <div className=\"in-action-url-recipe\">\n          <div className=\"recipe\">{recipeText}</div>\n          <div className=\"client-url\">images/01.jpg</div>\n        </div>\n      </div>\n    );\n  }\n}\n","import React from \"react\";\n\nexport default class SyntaxExample extends React.Component {\n  static propTypes = {};\n\n  render() {\n    const { service, source, operation = 'cdn', dimentions, options, path } =\n      this.props;\n    const parsedOptions = [];\n\n    if (options) {\n      Object.keys(options).forEach((option) => {\n        if (option === \"wmk-path\") {\n          options[option] = encodeURIComponent(options[option]);\n        }\n\n        parsedOptions.push(`${option}:${options[option]}`);\n      });\n    }\n\n    return (\n      <div className=\"syntax-example\">\n        <span className=\"service\">{service}</span>\n        <span className=\"source\">/{source}</span>\n        {operation && <span className=\"operation\">/{operation}</span>}\n        {dimentions && <span className=\"dimensions\">/{dimentions}</span>}\n        {options ? (\n          <span className=\"options\">/{parsedOptions.join(\",\")}</span>\n        ) : (\n          \"\"\n        )}\n        <span className=\"path\">{path}</span>\n      </div>\n    );\n  }\n}\n","import ReactOnRails from 'react-on-rails';\n\nimport ImageViewer from '../bundles/ImageViewer';\nimport SyntaxExample from '../bundles/SyntaxExample';\n\nconst Rails = require('rails-ujs');\nRails.start();\n\nReactOnRails.register({\n  ImageViewer,\n  SyntaxExample,\n});\n"],"names":["ImageViewer","React","constructor","props","_this","super","this","setPreviewImage","previewImageUrl","getImageUrl","document","getElementById","style","backgroundImage","setState","previewImg","getDefaultDimensions","recipe","arguments","length","undefined","state","width","height","setRecipe","e","preventDefault","params","setOption","option","getOptions","optionsArray","options","forEach","push","blurValue","join","Math","max","Number","recipes","replace","path","toogleImageViewer","visible","changeParams","param","value","target","min","source","blur","grayscale","recipesBar","optionsBar","service","cover","defaultParams","componentDidMount","render","coverClass","classNames","active","widthClass","heightClass","blurClass","grayscaleClass","recipeText","className","id","onClick","Viewer","onClose","images","src","alt","href","If","condition","Tooltip","title","position","trigger","bind","type","onChange","placeholder","propTypes","SyntaxExample","_this$props","_this$props$operation","operation","dimentions","parsedOptions","Object","keys","encodeURIComponent","require","start","ReactOnRails"],"sourceRoot":""}