Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colors #3

Merged
merged 9 commits into from
Nov 25, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions Contents/Sketch/colors.js
@@ -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
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
@@ -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
@@ -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
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