<commit_before>path = require 'path-extra'
fs = require 'fs-extra'
{remote} = require 'electron'
__ = i18n.setting.__.bind(i18n.setting)
__n = i18n.setting.__n.bind(i18n.setting)
{$, $$, _, React, ReactBootstrap, FontAwesome, ROOT} = window
{Grid, Col, Button, ButtonGroup, Input, Alert, OverlayTrigger, Tooltip} = ReactBootstrap
{config, toggleModal} = window
{APPDATA_PATH} = window
{showItemInFolder, openItem} = require 'shell'
Divider = require './divider'
NavigatorBar = require './navigator-bar'

ChangeLayoutConfig = React.createClass
  getInitialState: ->
    layout: config.get 'poi.layout', 'horizontal'
    enableDoubleTabbed: config.get 'poi.tabarea.double', false
  handleSetLayout: (layout) ->
    return if @state.layout == layout
    config.set 'poi.layout', layout
    event = new CustomEvent 'layout.change',
      bubbles: true
      cancelable: true
      detail:
        layout: layout
    window.dispatchEvent event
    @setState {layout}
    toggleModal __('Layout settings'), __('You must reboot the app for the changes to take effect.')
  handleSetDoubleTabbed: ->
    enabled = @state.enableDoubleTabbed
    config.set 'poi.tabarea.double', !enabled
    @setState
      enableDoubleTabbed: !enabled
    toggleModal __('Layout settings'), __('You must reboot the app for the changes to take effect.')
  render: ->
    <Grid>
      <Col xs={6}>
        <Button bsStyle={if @state.layout == 'horizontal' then 'success' else 'danger'} onClick={@handleSetLayout.bind @, 'horizontal'} style={width: '100%'}>
          {if @state.layout == 'horizontal' then '√ ' else ''}{__ 'Use horizontal layout'}
        </Button>
      </Col>
      <Col xs={6}>
        <Button bsStyle={if @state.layout == 'vertical' then 'success' else 'danger'} onClick={@handleSetLayout.bind @, 'vertical'} style={width: '100%'}>
          {if @state.layout == 'vertical' then '√ ' else ''}{__ 'Use vertical layout'}
        </Button>
      </Col>
      <Col xs={12}>
        <Input type="checkbox" label={__ 'Split component and plugin panel'} checked={@state.enableDoubleTabbed} onChange={@handleSetDoubleTabbed} />
      </Col>
    </Grid>

ChangeThemeConfig = React.createClass
  getInitialState: ->
    theme: config.get 'poi.theme', '__default__'
    enableSVGIcon: config.get 'poi.useSVGIcon', false
  handleSetTheme: (theme) ->
    theme = @refs.theme.getValue()
    if @state.theme != theme
      window.applyTheme theme
  onThemeChange: (e) ->
    @setState
      theme: e.detail.theme
  handleOpenCustomCss: (e) ->
    try
      d = path.join(EXROOT, 'hack', 'custom.css')
      fs.ensureFileSync d
      openItem d
    catch e
      toggleModal __('Edit custom CSS'), __("Failed. Perhaps you don't have permission to it.")
  handleSetSVGIcon: ->
    enabled = @state.enableSVGIcon
    config.set 'poi.useSVGIcon', !enabled
    window.useSVGIcon = !enabled
    @setState
      enableSVGIcon: !enabled
  componentDidMount: ->
    window.addEventListener 'theme.change', @onThemeChange
  componentWillUnmount: ->
    window.removeEventListener 'theme.change', @onThemeChange
  render: ->
    <Grid>
      <Col xs={6}>
        <Input type="select" ref="theme" value={@state.theme} onChange={@handleSetTheme}>
          {
            window.allThemes.map (theme, index) ->
              <option key={index} value={theme}>
                { if theme is '__default__' then 'Default' else (theme[0].toUpperCase() + theme.slice(1)) }
              </option>
          }
        </Input>
      </Col>
      <Col xs={6}>
        <Button bsStyle='primary' onClick={@handleOpenCustomCss} block>{__ 'Edit custom CSS'}</Button>
      </Col>
      <Col xs={12}>
        <Input type="checkbox" label={__ 'Use SVG Icon'} checked={@state.enableSVGIcon} onChange={@handleSetSVGIcon} />
      </Col>
    </Grid>

ZoomingConfig = React.createClass
  getInitialState: ->
    zoomLevel: config.get 'poi.zoomLevel', 1
  handleChangeZoomLevel: (e) ->
    zoomLevel = @refs.zoomLevel.getValue()
    zoomLevel = parseFloat(zoomLevel)
    return if @state.zoomLevel == zoomLevel
    document.getElementById('poi-app-container').style.transformOrigin = '0 0'
    document.getElementById('poi-app-container').style.WebkitTransform = "scale(#{zoomLevel})"
    document.getElementById('poi-app-container').style.width = "#{Math.floor(100 / zoomLevel)}%"
    poiappHeight = parseInt(document.getElementsByTagName('poi-app')[0].style.height)
    [].forEach.call $$('poi-app div.poi-app-tabpane'), (e) ->
      e.style.height = "#{poiappHeight / zoomLevel - 40}px"
      e.style.overflowY = "scroll"
    window.zoomLevel = zoomLevel
    window.dispatchEvent new Event('resize')
    config.set('poi.zoomLevel', zoomLevel)
    @setState
      zoomLevel: zoomLevel
  render: ->
    <Grid>
      <Col xs={6}>
        <OverlayTrigger placement='top' overlay={
            <Tooltip id='displayconfig-zoom'>{__ 'Zoom level'} <strong>{parseInt(@state.zoomLevel * 100)}%</strong></Tooltip>
          }>
          <Input type="range" ref="zoomLevel" onInput={@handleChangeZoomLevel}
            min={0.5} max={2.0} step={0.05} defaultValue={@state.zoomLevel} />
        </OverlayTrigger>
      </Col>
    </Grid>

ChangeResolutionConfig = React.createClass
  getInitialState: ->
    gameWidth =
      if (config.get 'poi.webview.width', -1) == -1
        if config.get('poi.layout', 'horizontal') == 'horizontal'
          window.innerWidth * (if window.doubleTabbed then 4.0 / 7.0 else 5.0 / 7.0)
        else
          window.innerWidth
      else
        config.get 'poi.webview.width', -1
    gameWidth: gameWidth
    useFixedResolution: config.get('poi.webview.width', -1) != -1
  handleSetWebviewWidth: (node, e) ->
    @setState
      gameWidth: @refs[node].getValue()
    width = parseInt @refs[node].getValue()
    return if isNaN(width) || width < 0 || !@state.useFixedResolution || (config.get('poi.layout', 'horizontal') == 'horizontal' && width > window.innerWidth - 150)
    window.webviewWidth = width
    window.dispatchEvent new Event('webview.width.change')
    config.set 'poi.webview.width', width
  handleResize: ->
    {gameWidth} = @state
    width = parseInt gameWidth
    return if isNaN(width) || width < 0 || (config.get('poi.layout', 'horizontal') == 'horizontal' && width > window.innerWidth - 150)
    if !@state.useFixedResolution
      if config.get('poi.layout', 'horizontal') == 'horizontal'
        @setState
          gameWidth: window.innerWidth * (if window.doubleTabbed then 4.0 / 7.0 else 5.0 / 7.0)
      else
        @setState<commit_msg>Add max resolution cap.<commit_after>path = require 'path-extra'
fs = require 'fs-extra'
{remote} = require 'electron'
__ = i18n.setting.__.bind(i18n.setting)
__n = i18n.setting.__n.bind(i18n.setting)
{$, $$, _, React, ReactBootstrap, FontAwesome, ROOT} = window
{Grid, Col, Button, ButtonGroup, Input, Alert, OverlayTrigger, Tooltip} = ReactBootstrap
{config, toggleModal} = window
{APPDATA_PATH} = window
{showItemInFolder, openItem} = require 'shell'
Divider = require './divider'
NavigatorBar = require './navigator-bar'

ChangeLayoutConfig = React.createClass
  getInitialState: ->
    layout: config.get 'poi.layout', 'horizontal'
    enableDoubleTabbed: config.get 'poi.tabarea.double', false
  handleSetLayout: (layout) ->
    return if @state.layout == layout
    config.set 'poi.layout', layout
    event = new CustomEvent 'layout.change',
      bubbles: true
      cancelable: true
      detail:
        layout: layout
    window.dispatchEvent event
    @setState {layout}
    toggleModal __('Layout settings'), __('You must reboot the app for the changes to take effect.')
  handleSetDoubleTabbed: ->
    enabled = @state.enableDoubleTabbed
    config.set 'poi.tabarea.double', !enabled
    @setState
      enableDoubleTabbed: !enabled
    toggleModal __('Layout settings'), __('You must reboot the app for the changes to take effect.')
  render: ->
    <Grid>
      <Col xs={6}>
        <Button bsStyle={if @state.layout == 'horizontal' then 'success' else 'danger'} onClick={@handleSetLayout.bind @, 'horizontal'} style={width: '100%'}>
          {if @state.layout == 'horizontal' then '√ ' else ''}{__ 'Use horizontal layout'}
        </Button>
      </Col>
      <Col xs={6}>
        <Button bsStyle={if @state.layout == 'vertical' then 'success' else 'danger'} onClick={@handleSetLayout.bind @, 'vertical'} style={width: '100%'}>
          {if @state.layout == 'vertical' then '√ ' else ''}{__ 'Use vertical layout'}
        </Button>
      </Col>
      <Col xs={12}>
        <Input type="checkbox" label={__ 'Split component and plugin panel'} checked={@state.enableDoubleTabbed} onChange={@handleSetDoubleTabbed} />
      </Col>
    </Grid>

ChangeThemeConfig = React.createClass
  getInitialState: ->
    theme: config.get 'poi.theme', '__default__'
    enableSVGIcon: config.get 'poi.useSVGIcon', false
  handleSetTheme: (theme) ->
    theme = @refs.theme.getValue()
    if @state.theme != theme
      window.applyTheme theme
  onThemeChange: (e) ->
    @setState
      theme: e.detail.theme
  handleOpenCustomCss: (e) ->
    try
      d = path.join(EXROOT, 'hack', 'custom.css')
      fs.ensureFileSync d
      openItem d
    catch e
      toggleModal __('Edit custom CSS'), __("Failed. Perhaps you don't have permission to it.")
  handleSetSVGIcon: ->
    enabled = @state.enableSVGIcon
    config.set 'poi.useSVGIcon', !enabled
    window.useSVGIcon = !enabled
    @setState
      enableSVGIcon: !enabled
  componentDidMount: ->
    window.addEventListener 'theme.change', @onThemeChange
  componentWillUnmount: ->
    window.removeEventListener 'theme.change', @onThemeChange
  render: ->
    <Grid>
      <Col xs={6}>
        <Input type="select" ref="theme" value={@state.theme} onChange={@handleSetTheme}>
          {
            window.allThemes.map (theme, index) ->
              <option key={index} value={theme}>
                { if theme is '__default__' then 'Default' else (theme[0].toUpperCase() + theme.slice(1)) }
              </option>
          }
        </Input>
      </Col>
      <Col xs={6}>
        <Button bsStyle='primary' onClick={@handleOpenCustomCss} block>{__ 'Edit custom CSS'}</Button>
      </Col>
      <Col xs={12}>
        <Input type="checkbox" label={__ 'Use SVG Icon'} checked={@state.enableSVGIcon} onChange={@handleSetSVGIcon} />
      </Col>
    </Grid>

ZoomingConfig = React.createClass
  getInitialState: ->
    zoomLevel: config.get 'poi.zoomLevel', 1
  handleChangeZoomLevel: (e) ->
    zoomLevel = @refs.zoomLevel.getValue()
    zoomLevel = parseFloat(zoomLevel)
    return if @state.zoomLevel == zoomLevel
    document.getElementById('poi-app-container').style.transformOrigin = '0 0'
    document.getElementById('poi-app-container').style.WebkitTransform = "scale(#{zoomLevel})"
    document.getElementById('poi-app-container').style.width = "#{Math.floor(100 / zoomLevel)}%"
    poiappHeight = parseInt(document.getElementsByTagName('poi-app')[0].style.height)
    [].forEach.call $$('poi-app div.poi-app-tabpane'), (e) ->
      e.style.height = "#{poiappHeight / zoomLevel - 40}px"
      e.style.overflowY = "scroll"
    window.zoomLevel = zoomLevel
    window.dispatchEvent new Event('resize')
    config.set('poi.zoomLevel', zoomLevel)
    @setState
      zoomLevel: zoomLevel
  render: ->
    <Grid>
      <Col xs={6}>
        <OverlayTrigger placement='top' overlay={
            <Tooltip id='displayconfig-zoom'>{__ 'Zoom level'} <strong>{parseInt(@state.zoomLevel * 100)}%</strong></Tooltip>
          }>
          <Input type="range" ref="zoomLevel" onInput={@handleChangeZoomLevel}
            min={0.5} max={2.0} step={0.05} defaultValue={@state.zoomLevel} />
        </OverlayTrigger>
      </Col>
    </Grid>

ChangeResolutionConfig = React.createClass
  getInitialState: ->
    gameWidth =
      if (config.get 'poi.webview.width', -1) == -1
        if config.get('poi.layout', 'horizontal') == 'horizontal'
          window.innerWidth * (if window.doubleTabbed then 4.0 / 7.0 else 5.0 / 7.0)
        else
          window.innerWidth
      else
        config.get 'poi.webview.width', -1
    gameWidth: gameWidth
    useFixedResolution: config.get('poi.webview.width', -1) != -1
  handleSetWebviewWidth: (node, e) ->
    @setState
      gameWidth: @refs[node].getValue()
    width = parseInt @refs[node].getValue()
    return if isNaN(width) || width < 0 || !@state.useFixedResolution
    if config.get('poi.layout', 'horizontal') == 'horizontal'
      width = Math.min(width, window.innerWidth - 150)

    # Avoid setting a huge size by mistake
    max_height = screen.height
    max_width = screen.width
    if config.get('poi.layout', 'horizontal') == 'horizontal'
      max_width = max_width - (if window.doubleTabbed then 600 else 400)
    else
      max_height = max_height - 200
    console.log max_width, max_height, width
    max_width = max_height / 480 * 800
    if width > max_width
      width = max_width

    window.webviewWidth = width
    window.dispatchEvent new Event('webview.width.change')
    config.set 'poi.webview.width', width
  handleResize: ->
    {gameWidth} = @state
    width = parseInt gameWidth
    return if isNaN(width) || width < 0 || (config.get('poi.layout', 'horizontal') == 'horizontal' && width > window.innerWidth - 150)
    if !@state.useFixedResolution
      if config.get('poi.layout', 'horizontal') == 'horizontal'
        @setState
          gameWidth: window.innerWidth * (if window.doubleTabbed then 4.0 / 7.0 else 5.0 / 7.0)
      else
        @setState
{'fraction_non_alphanumeric': 0.14543304759089565, 'fraction_numerical': 0.011897723913686077, 'mean_word_length': 3.1563267813267815, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 125, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3309194', 'n_tokens_mistral': 4310, 'n_tokens_neox': 4218, 'n_words': 978}