import { store } from '../reducers/index.reducer' ; import { randomizeColorMapping , defaultStyle } from '../utils/editorStyle' ; import { makeTheme , pkgJSON , themeJSON , makeReadMe } from '../utils/output' ; import { toHex } from '../utils/toHex' ; import axios from 'axios' ; import fileDownload from 'js-file-download' ; export const reset = ( ) => store . dispatch ( { type : 'RESET' } ) ; export const toggleCheck = ( ) => store . dispatch ( { type : 'TOGGLE_CHECK' } ) ; export const setThemeName = ( e ) => store . dispatch ( { type : 'SET_THEME_NAME' , payload : e . target . value } ) ; export const processImage = ( e ) : void => { store . dispatch < any > ( ( dispatch ) : any => { dispatch ( { type : 'LOADING_STATUS' , payload : true } ) ; const image = e . target . files [ 0 ] ; const imgURL = window . URL . createObjectURL ( image ) ; dispatch ( { type : 'SEND_URL' , payload : imgURL } ) ; dispatch ( { type : 'SEND_IMAGE_NAME' , payload : image . name } ) ; const formData = new FormData ( ) ; formData . append ( 'image' , image ) ; const options = { headers : { 'Content-Type' : 'multipart/form-data' } } ; axios . post ( 'generate/palette' , formData , options ) . then ( response => { dispatch ( { type : 'GET_COLORS' , payload : response . data } ) ; const palette = store . getState ( ) . palette [ 0 ] ; dispatch ( { type : 'SET_DEFAULT_STYLE' , payload : defaultStyle ( palette ) } ) ; dispatch ( { type : 'LOADING_STATUS' , payload : false } ) ; axios . post ( 'generate/imgurLink' , formData , options ) . then ( res => dispatch ( { type : 'SEND_IMGUR_LINK' , payload : res . data } ) ) ; } ) ; } ) ; } ; export const switchPalette = ( indexNo ) : any => store . dispatch ( { type : 'SWITCH_PALETTE' , payload : indexNo } ) ; export const changeBGColor = ( colors ) => { store . dispatch ( { type : 'CHANGE_BG_COLOR' , payload : colors . color } ) ; } ; export const randomize = ( palette ) => { store . dispatch ( { type : 'RANDOMIZE' , payload : randomizeColorMapping ( palette ) } ) ; } ; export const downloadTheme = ( themeName , bgColor , editor , imgurLink , isChecked ) => { const arr = [ ] ; const getEl = ( selector ) => document . querySelector ( selector ) ; const getColor = ( elemArg ) => toHex ( window . getComputedStyle ( elemArg ) . getPropertyValue ( 'color' ) ) ; const indexZero = getEl ( '.CodeMirror-code > div:nth-child(4) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(1)' ) ; const indexZeroColor = getColor ( indexZero ) ; arr . push ( indexZeroColor ) ; const indexOne = getEl ( '.CodeMirror-code > div:nth-child(3) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(4)' ) ; const indexOneColor = getColor ( indexOne ) ; arr . push ( indexOneColor ) ; const indexTwo = getEl ( '.CodeMirror-code > div:nth-child(3) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(6)' ) ; const indexTwoColor = getColor ( indexTwo ) ; arr . push ( indexTwoColor ) ; const indexThree = getEl ( 'span.cm-operator:nth-child(8)' ) ; const indexThreeColor = getColor ( indexThree ) ; arr . push ( indexThreeColor ) ; const indexFour = getEl ( '.CodeMirror-code > div:nth-child(17) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(2)' ) ; const indexFourColor = getColor ( indexFour ) ; arr . push ( indexFourColor ) ; const indexFive = getEl ( '.CodeMirror-code > div:nth-child(7) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(3)' ) ; const indexFiveColor = getColor ( indexFive ) ; arr . push ( indexFiveColor ) ; const indexSix = getEl ( '.CodeMirror-code > div:nth-child(12) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(2)' ) ; const indexSixColor = getColor ( indexSix ) ; arr . push ( indexSixColor ) ; const indexSeven = getEl ( '.CodeMirror-code > div:nth-child(13) > pre:nth-child(2) > span:nth-child(1) > span:nth-child(1)' ) ; const indexSevenColor = getColor ( indexSeven ) ; arr . push ( indexSevenColor ) ; const indexEight = getEl ( '.cm-number' ) ; const indexEightColor = getColor ( indexEight ) ; arr . push ( indexEightColor ) ; const tmTheme = makeTheme ( themeName , bgColor , arr , imgurLink , isChecked ) ; const metaJSON = pkgJSON ( themeName , bgColor ) ; const colorJSON = themeJSON ( themeName , bgColor , arr ) ; const shouldISend = ( editorParam , payload ) => { if ( editorParam === 'VS Code' ) { return payload ; } else { return null ; } } ; axios . post ( `generate/theme/${ editor }` , { tmTheme : tmTheme , colorJSON : shouldISend ( editor , colorJSON ) , metaJSON : shouldISend ( editor , metaJSON ) , readMe : makeReadMe ( themeName , imgurLink , isChecked ) , name : themeName } , { responseType : 'blob' } ) . then ( res => fileDownload ( res . data , `${ themeName } (${ editor } PicTheme).zip` ) ) ; } ;