bob
March 2, 2024, 3:49pm
1
This code enables PopClip to showcase two icon graphics, each capable of triggering distinct functions. The question is, how can you utilize the ‘identifier’ property in Config.json to determine whether to display one or both icons?
Config.json
{
"name": "translate",
"icon": "translate.svg",
"identifier": "bboo.popclip.extension.translate",
"popclipVersion": 4069,
"module": "translate.js",
"entitlements": ["network"],
"options": [
{
"identifier": "appid",
"label": "APP ID",
"type": "string"
},
{
"identifier:": "key",
"label": "key",
"type": "password"
},
{
"identifier": "icon",
"label": "2 icon",
"type": "boolean",
"default value": false
}
]
}
translate.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.actions = void 0;
const axios_1 = require("axios");
const mainAction = async (input, options) => {
const appid = options.appid;
const key = options.key;
// ...
};
const toCamelCase = async (input) => {
// ...
};
exports.actions = [{
title: "translate",
code: mainAction,
icon: "translate.svg"
}, {
title: "CamelCase",
code: toCamelCase,
icon: "coding_cases.svg"
}];
Thank you for PopClip, and Thank you for your time.
bob
March 4, 2024, 8:57am
4
I came up with an idea to create two extensions by modifying the “identifier” in Config.json.
But this approach isn’t elegant because there’s a lot of repetitive content in the JavaScript code. I haven’t figured out how Coding Cases controls the number of icons through Config.json.
nick
March 4, 2024, 11:32am
5
Two possible ways:
Using population function
This allows for more complex logic.
Instead of exporting actions as a static array, export a function instead. The function whould return the array of actions.
You’d need to add the dynamic
entitlemeent.
Example: see population function
Using requirements field
A simpler way is to just use e.g. option-icon=1
in the requirements
exports.actions = [{
title: "translate",
requirements: ["option-icon=1"],
code: mainAction,
icon: "translate.svg"
}, {
title: "CamelCase",
requirements: ["option-icon=0"]
code: toCamelCase,
icon: "coding_cases.svg"
}];
1 Like
nick
March 4, 2024, 11:34am
6
it doesn’t use config.json, it uses a population funciton. Here’s the code for that extension:
import 'core-js/es/string/match-all' // temporary until next popclip version
import * as ca from 'case-anything'
const config = [
{ icon: 'camel-case.svg', method: 'camelCase', title: 'camelCase' },
{ icon: 'pascal-case.svg', method: 'upperCamelCase', title: 'UpperCamelCase' },
{ icon: 'kebab-case.svg', method: 'kebabCase', title: 'kebab-case' },
{ icon: 'snake-case.svg', method: 'snakeCase', title: 'snake_case' },
{ icon: 'const-case.svg', method: 'constantCase', title: 'CONSTANT_CASE' }
]
const actions = config.map(config => {
const action: Action = {
code: input => ca[config.method](input.text),
requirements: ['text', `option-${config.method}=1`],
title: config.title,
icon: config.icon,
after: 'paste-result'
}
return action
This file has been truncated. show original
1 Like
bob
March 4, 2024, 1:37pm
7
Thanks a bunch for taking the time to clear up my confusion, even on some basic stuff. (Sorry, I didn’t really dive into the developer docs – it’s a bit challenging for a newbie like me.)
The simpler approach you suggested works like a charm, and it’s exactly what I needed.
Thanks again!