Skip to content

Commit

Permalink
Merge pull request #3 from nolastan/sheets-api
Browse files Browse the repository at this point in the history
Support color palettes
  • Loading branch information
Stan committed Nov 25, 2015
2 parents cfcca6f + f89f6f7 commit a2b3a72
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 17 deletions.
13 changes: 13 additions & 0 deletions Contents/Sketch/colors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
var applyColors = function (newColors, docData) {
var app = NSApplication.sharedApplication();
var appController = app.delegate();
var colors = [];
for(var i=0; i<newColors.length; i++) {
var color = MSColor.colorWithSVGString("#" + newColors[i].Rgb);
color.alpha = newColors[i] .Opacity;
colors.push(color);
}
colors = MSArray.dataArrayWithArray(colors);
appController.globalAssets().setPrimitiveColors(colors);
appController.globalAssets().objectDidChange();
}
2 changes: 1 addition & 1 deletion Contents/Sketch/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
],
},
"identifier" : "com.github.nolastan.sync",
"version" : "1.0",
"version" : "1.1",
"description" : "Sync styles and symbols",
"authorEmail" : "nolastan@gmail.com",
"name" : "Sync"
Expand Down
59 changes: 49 additions & 10 deletions Contents/Sketch/script.cocoascript
Original file line number Diff line number Diff line change
@@ -1,20 +1,40 @@
@import 'typography.js';
@import 'colors.js';

var onRun = function(context) {
var doc = context.document;
var dict = NSThread.mainThread().threadDictionary();

showOptions();

var styles = getSheetsu(dict['syncSource']);

loadTypography(styles, doc.documentData().layerTextStyles());
loadFromURL(dict['syncSource']);

doc.showMessage('Sync complete!');

updatePanelHack();

function getSheetsu(queryURL) {
function loadFromURL(queryURL) {
var data;
if(queryURL.indexOf("google.com") > -1) {
var sheetID=queryURL.substring(queryURL.lastIndexOf("/d/")+3,queryURL.lastIndexOf("/"));
for(var i = 1; true; i++) {
queryURL = "https://spreadsheets.google.com/feeds/list/" + sheetID + "/" + i + "/public/values?alt=json";
data = request(queryURL);
if(data == "Invalid query parameter value for grid_id.") {
break;
}
data = JSON.parse(data);
if(data.feed.title.$t == 'Typography') {
applyTypography(parseSheetsData(data), doc.documentData().layerTextStyles());
} else if (data.feed.title.$t == 'Colors') {
applyColors(parseSheetsData(data), doc.documentData());
}
}
} else {
applyTypography(request(queryURL).result, doc.documentData().layerTextStyles());
}
}

function request(queryURL) {
var request = NSMutableURLRequest.new();
[request setHTTPMethod:@"GET"];
[request setURL:[NSURL URLWithString:queryURL]];
Expand All @@ -26,10 +46,24 @@ var onRun = function(context) {

var dataString = [[NSString alloc] initWithData:oResponseData encoding:NSUTF8StringEncoding];

return dataString;
}

var data = JSON.parse(dataString);

return data.result;
function parseSheetsData(data) {
var result = [];
var items = data.feed.entry;
for(var i=0; i<items.length; i++) {
var item = items[i];
var resultItem = {}
for(var key in item) {
var attr = key.split('gsx$')[1];
if(!attr) { continue; }
attr = capitalize(attr);
resultItem[attr] = item[key]['$t'];
}
result.push(resultItem);
}
return result;
}

function showOptions() {
Expand All @@ -39,8 +73,8 @@ var onRun = function(context) {
otherButton:nil
informativeTextWithFormat:"Enter the URL where your styles live."];

var input = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, 300, 24)];
input.setStringValue(dict['syncSource'] || "https://sheetsu.com/apis/a49fa7c8");
var input = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, 300, 54)];
input.setStringValue(dict['syncSource'] || "https://docs.google.com/spreadsheets/d/1LunoLOZbmcyGORV5mCe6qKPdN0NVuosm7lNeSo98-tQ/pubhtml");
alert.setAccessoryView(input);
var button = alert.runModal();
input.validateEditing();
Expand All @@ -54,4 +88,9 @@ var onRun = function(context) {
selection[i].setIsSelected(true);
}
}

function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

}
2 changes: 1 addition & 1 deletion Contents/Sketch/typography.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var loadTypography = function (newStyles, sharedStyles) {
var applyTypography = function (newStyles, sharedStyles) {

var alignmentHash = {
'left': 0,
Expand Down
15 changes: 10 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,27 @@ Install from [Sketch Toolbox](http://sketchtoolbox.com/) (recommended) or [downl

1. Create a Google Sheet from [this template](https://drive.google.com/previewtemplate?id=17q6GOMM1X6kkvgeL3LeGkRr4C2vOhpM_JiQUWxbBtew&mode=public) (click the "Use this template" button).

2. Visit [Sheetsu](http://sheetsu.com/) and generate an API for your new sheet.
2. Select *File > Publish to web…* and then click the *Publish* button.

3. Run the Sync command from the plugin menu and paste your Sheetsu URL into the prompt.
3. Copy the link to your sheet. (See below if you are using Google Apps at work)

All your text styles should now be synced with your spreadsheet. Run the plugin again any time to update. Share your Sheetsu URL with your team to stay in sync.
4. Run the Sync command from the plugin menu and paste your URL into the prompt.

Your text styles and color palette should now be synced with your spreadsheet. Run the plugin again any time to update. Share your published sheet URL with your team to stay in sync.

## Using Google Apps at work?
Some companies prevent employees from publishing sheets. If the *Published content & settings* drill-down in the *Publish to the web* modal says that people at your company must log in to view, then Sync will not be able to access your sheet. Don't worry – you can still use Sync for typography. Just visit [Sheetsu](http://sheetsu.com/) to generate an API for your new sheet. Use your new Sheetsu URL and continue to step 4.

**Need help?** [View the screencast](https://dl.dropboxusercontent.com/s/f4ubqenqz8n5wne/68D4E91B-173A-4AA0-964C-AA7F9EA77AC8-5233-000032842DD067F4.gif?dl=0), [create an issue](https://github.com/nolastan/sync.sketchplugin/issues/new) or [tweet @stan](https://twitter.com/stan).

**Find it useful?** Please [like Sync on Dribbble](https://dribbble.com/shots/2367116-Sync-Sketch-Plugin).

# Pattern Libraries
[Share your pattern library](https://github.com/nolastan/sync.sketchplugin/issues/new?title=Add%20library&body=I%27d%20like%20to%20add%20this%20library%20I%20created:%20) with the Sync community.
* [Material Design](https://sheetsu.com/apis/592bd16f) ([Download Roboto](https://www.google.com/fonts/specimen/Roboto))
* [Material Design](https://docs.google.com/spreadsheets/d/1UkS9KRWmjvDu_DpCnB3KZ0mcYdmgyZmuWu-lkpfgjMw/pubhtml) ([Download Roboto](https://www.google.com/fonts/specimen/Roboto))

# Custom API
As an alternative to Google Sheets, you can create a custom JSON api with the following structure:
As an alternative to Google Sheets, you can create a custom JSON api with the following structure. Currently this method only supports typography.
```
{
Expand Down

0 comments on commit a2b3a72

Please sign in to comment.