Feature: Load Palette From URL

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
 

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"
 		]

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

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);