diff --git a/README.md b/README.md index 574b2f2..d461851 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ You can save palettes from either the Global presets section or from the Documen #### Loading Palettes -Running the "Load Palette..." command in the plugin menu will allow you to choose a .sketchpalette file containg the presets you like to import. You can load palettes into either the Global presets section or into the Document presets section of the color picker. You can also select which of the available fill types you'd like to load. Fill presets will then be appended to the corresponding preset sections. +Running the "Load Palette..." or "Load Palette from URL..." command in the plugin menu will allow you to choose a .sketchpalette file containg the presets you like to import. Running the "Load Palette from URL..." command in the plugin menu will allow you to scan colors used in a website (ex: https://www.sketch.com) or consume from an API or a Design System. You can load palettes into either the Global presets section or into the Document presets section of the color picker. You can also select which of the available fill types you'd like to load. Fill presets will then be appended to the corresponding preset sections. #### Removing Palettes diff --git a/Sketch Palettes.sketchplugin/Contents/Sketch/manifest.json b/Sketch Palettes.sketchplugin/Contents/Sketch/manifest.json index 99c0926..0fd0d53 100644 --- a/Sketch Palettes.sketchplugin/Contents/Sketch/manifest.json +++ b/Sketch Palettes.sketchplugin/Contents/Sketch/manifest.json @@ -16,6 +16,13 @@ "script": "sketchPalettes.js", "handler": "loadPalette" }, + { + "name": "Load Palette From URL...", + "identifier": "loadPaletteUrl", + "shortcut": "", + "script": "sketchPalettes.js", + "handler": "loadPaletteUrl" + }, { "name": "Save Palette...", "identifier": "savePalette", @@ -34,6 +41,7 @@ "menu": { "items": [ "loadPalette", + "loadPaletteUrl", "savePalette", "clearPalette" ] diff --git a/Sketch Palettes.sketchplugin/Contents/Sketch/sketchPalettes.js b/Sketch Palettes.sketchplugin/Contents/Sketch/sketchPalettes.js index bf19908..f35b23e 100644 --- a/Sketch Palettes.sketchplugin/Contents/Sketch/sketchPalettes.js +++ b/Sketch Palettes.sketchplugin/Contents/Sketch/sketchPalettes.js @@ -1,7 +1,6 @@ @import "util.js"; - //------------------------------------------------------------------------------------------------------------- // Save palette //------------------------------------------------------------------------------------------------------------- @@ -207,9 +206,6 @@ function savePalette(context) { function loadPalette(context) { - - var app = NSApp.delegate(); - var doc = context.document; var version = context.plugin.version().UTF8String(); var fileTypes = ["sketchpalette"]; @@ -311,9 +307,14 @@ function loadPalette(context) { } } - } + addColors(context, colorPalette, gradientPalette, imagePalette, colorAssets, gradientAssets, images); +} + +function addColors(context, colorPalette, gradientPalette, imagePalette, colorAssets, gradientAssets, images) { + var doc = context.document; + var app = NSApp.delegate(); // Create dialog var dialog = NSAlert.alloc().init(); dialog.setMessageText("Load Palette"); @@ -364,9 +365,68 @@ function loadPalette(context) { doc.inspectorController().reload(); app.refreshCurrentDocument(); - } +//------------------------------------------------------------------------------------------------------------- +// Load palette URL +//------------------------------------------------------------------------------------------------------------- + +function loadPaletteUrl(context) { + // Create dialog + var dialog = NSAlert.alloc().init(); + dialog.setMessageText("Load URL"); + dialog.addButtonWithTitle("Load"); + dialog.addButtonWithTitle("Cancel"); + + // Create view to hold custom fields + var customView = NSView.alloc().initWithFrame(NSMakeRect(0, 0, 200, 180)); + + var labelSource = createLabel(NSMakeRect(0, 150, 200, 25), 12, false, 'URL of website or API:'); + customView.addSubview(labelSource); + + var labelSource = createInput(NSMakeRect(0, 125, 200, 25), 'https://www.sketch.com'); + customView.addSubview(labelSource); + + // Add custom view to dialog + dialog.setAccessoryView(customView); + + // Open dialog and exit if user hits cancel. + if (dialog.runModal() != NSAlertFirstButtonReturn) return; + + const data = fetch([labelSource.stringValue()]); + + if( !data || data === '' || !data.length ) { + NSApp.displayDialog("No valid api!"); + } + + var colorList = data[0] + .match(/#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})/g) + .map(v => v.toLowerCase()) + .filter((v, i, a) => a.indexOf(v) === i); + + var colorAssets = []; + + // Colors Fills: convert rgba colors to MSColors + if (colorList.length) { + for (var i = 0; i < colorList.length; i++) { + var color = colorList[i]; + + if (color) { + var rgb = hexToRgb(color); + var mscolor = MSColor.colorWithRed_green_blue_alpha( + rgb[0] / 255, + rgb[1] / 255, + rgb[2] / 255, + 1 + ); + + colorAssets.push(MSColorAsset.alloc().initWithAsset_name(mscolor, color)); + } + } + } + + addColors(context, colorAssets, [], [], colorAssets, [], []); +} //------------------------------------------------------------------------------------------------------------- // Clear palette diff --git a/Sketch Palettes.sketchplugin/Contents/Sketch/util.js b/Sketch Palettes.sketchplugin/Contents/Sketch/util.js index 8d50782..37070f3 100644 --- a/Sketch Palettes.sketchplugin/Contents/Sketch/util.js +++ b/Sketch Palettes.sketchplugin/Contents/Sketch/util.js @@ -4,6 +4,31 @@ function rect(x,y,w,h) { return rect; } +/** + * Parses hexadecimal color into RGB format + */ +function hexToRgb (hex) { + return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i + ,(m, r, g, b) => '#' + r + r + g + g + b + b) + .substring(1).match(/.{2}/g) + .map(x => parseInt(x, 16)) +} + +/** + * Fetch JSON from a given URL + */ +function fetch(args) { + var task = NSTask.alloc().init(); + task.setLaunchPath("/usr/bin/curl"); + task.setArguments(args); + var outputPipe = [NSPipe pipe]; + [task setStandardOutput:outputPipe]; + task.launch(); + var responseData = [[outputPipe fileHandleForReading] readDataToEndOfFile]; + + return [[[NSString alloc] initWithData:responseData encoding:NSUTF8StringEncoding]]; +} + function createLabel(frame, size, bold, text) { var label = NSTextField.alloc().initWithFrame(frame); label.setStringValue(text); @@ -33,6 +58,11 @@ function createSelect(frame, items) { return select; } +function createInput(frame, placeholder) { + var input = NSTextField.alloc().initWithFrame(frame); + input.setPlaceholderString(placeholder); + return input; +} function createCheckbox(frame, name, value, onstate, enabled) { var checkbox = NSButton.alloc().initWithFrame(frame); diff --git a/palettes.png b/palettes.png index 6b53dd8..c22e73a 100644 Binary files a/palettes.png and b/palettes.png differ