Search Machine Preloaded

SketchSystems.spec

Search Machine Preloaded
  Empty
    focusInput -> InputFocused
    searchByLocation -> LoadingResults
    NoLocation*
      getLocation -> HasLocation
    HasLocation
      loseLocation -> NoLocation
  InputFocused
    changeInput -> Loading
    clearInput -> InputBlank  
    loseFocusResults -> Results
    loseFocusNoResults -> Empty
    InputBlank*
    PredictionsError
    Loading
      success -> HasPredictions
      error -> PredictionsError
      blank -> InputFocused
    HasPredictions
      select -> Results
  Results
    focusInput -> InputFocused
    LoadingResults*
      success -> NoFocused
      error -> Empty
    NoFocused
      focusResult -> Focused
    Focused
      selectResult -> Selected
    Selected
      deselect -> Focused
    
         
         

SketchSystems_prototype.js

// Attach Figma frames (artboards) to states
// IDs can be found under "Share > Public Embed" in Figma 

figmaToken = '2319-e3c6f0dd-5d31-46d6-9420-331171bc2925'
projectKey = 'Gcd870Mhxn7E9XyPX8fQ6ies'

// ** Edit this: List state names and matching Figma frame/artboard IDs
let string, nodes, node_ids, figmaNodes;

this.hasImages = false

imgElement = $("img", {
	height: "100%",
    src: undefined,
    visibility: "hidden",
    background: "#fefefe",
    ref: (el) => {this.image = el}
})

figmaNodes = [
    {
		state: "NoLocation",
		id: "1:14"
	},
	{
		state: "HasLocation",
		id: "1:15"
	},
	{
		state: "InputBlank",
		id: "1:16"
	},
	{
		state: "Loading",
		id: "1:17"
	},
	{
		state: "PredictionsError",
		id: "1:18"
	},
	{
		state: "HasPredictions",
		id: "1:19"
	},
	{
		state: "LoadingResults",
		id: "1:23"
	},
	{
		state: "NoFocused",
		id: "1:22"
	},
	{
		state: "Focused",
		id: "1:21"
	},
	{
		state: "Selected",
		id: "1:20"
	}
];

function getNodeByState(state) {
	return figmaNodes.find(node => {
		return (node.state === state)
	})
}

function getNodeById(id) {
	return figmaNodes.find(node => {
		return (node.id === id)
	})
}

getImages = (stateName) => {
	if (this.hasImages) {
		this.setImage(stateName);
        return;
	}
  
    string = 'https://api.figma.com/v1/images/' + projectKey + '?ids='
    nodes_string = figmaNodes.map((node) => {
        return (node.id.replace(/:/g, '%3A'))
    }).join(',');
  
    console.log("getting images")
  
	fetch(string + nodes_string, {
		headers: {
			'X-FIGMA-TOKEN': figmaToken
		}
	}).then((res) => {
        console.log("response got");
        console.log(res);
		res.json().then((data) => {
          console.log("images got")
            
            this.image.onload = () => {
              this.image.style.opacity = "1";
            }
          
			Object.entries(data.images).forEach((entry) => {
				let node = getNodeById(entry[0])
				node.image = entry[1]
			})
			this.hasImages = true;
			this.setImage(stateName);
            this.image.visibility = "visible";
          
		})
	})
}


this.setImage = (stateName) => {
    this.image.style.opacity = "0.5";
	let image = getNodeByState(stateName).image;
	this.image.src = image;
}

function render(model) {
	getImages(model.active_states[0].name)

	return $("div", {
			style: {
				"height": "100%",
				"text-align": "center"
			}
		}, imgElement
	);
}