From a3c60ca050fe8f14e07ac43915b0b66eca2237a4 Mon Sep 17 00:00:00 2001 From: Kerem Sevencan Date: Thu, 5 Nov 2015 19:39:14 +0200 Subject: [PATCH] new fixes and its stable version for the latest version of sketch --- .../Contents/Sketch/add_icon.cocoascript | 75 ++++++++------- .../Contents/Sketch/add_icon_grid.cocoascript | 94 ++++++++----------- .../Sketch/learn_icon_name.cocoascript | 2 +- .../Contents/Sketch/library.cocoascript | 70 +++----------- .../Contents/Sketch/manifest.json | 59 ++++-------- 5 files changed, 112 insertions(+), 188 deletions(-) diff --git a/iconfont.sketchplugin/Contents/Sketch/add_icon.cocoascript b/iconfont.sketchplugin/Contents/Sketch/add_icon.cocoascript index 7e268a6..03989a5 100755 --- a/iconfont.sketchplugin/Contents/Sketch/add_icon.cocoascript +++ b/iconfont.sketchplugin/Contents/Sketch/add_icon.cocoascript @@ -1,45 +1,32 @@ @import "library.cocoascript"; -var onFontawesome = function(context) { - // onRun function with context, json file path, title and font name. - onRun(context,"fontawesome.json","Font Awesome","FontAwesome"); -} - -var onMaterial = function(context) { - // onRun function with context, json file path, title and font name. - onRun(context,"material.json","Material Icons","Material Icons"); -} - -var onIon = function(context) { - // onRun function with context, json file path, title and font name. - onRun(context,"ion.json","Ion Icons","Ionicons"); -} - -var onRun = function(context,icon_path,title,fontname) { +var onRun = function(context) { var doc = context.document // the current document (MSDocument) var plugin = context.plugin // the plugin (MSPluginBundle) var page = [doc currentPage] // the current page (MSPage) var artboard = [page currentArtboard] || page - var icon_source = [plugin urlForResourceNamed:icon_path] - - // call getIcons function from library file. - var icons = Library.getIcons(icon_source) - var icon_list = Library.iconValues(icons,fontname) // create a wrapper window - var mainwindow = Library.components.window(title + " - Add an icon with its name", "Write an icon name") + var mainwindow = Library.components.window("Add an icon with its name", "Select icon font") var wrapper = mainwindow[0] var content = mainwindow[1] + var font_list = ["FontAwesome", "Material", "Ion"] - var selectedItemIndex = selectedItemIndex || 0 + // create combobox + var selectbox = [[NSComboBox alloc] initWithFrame:NSMakeRect(40,175,150,24)] + [selectbox addItemsWithObjectValues:font_list] + [selectbox selectItemAtIndex:0] + [selectbox setEditable:false]; + [content addSubview:selectbox] - var searchbox = [[NSTextField alloc] initWithFrame:NSMakeRect(40,175,150,24)] + var searchbox = [[NSTextField alloc] initWithFrame:NSMakeRect(200,175,150,24)] [searchbox setBackgroundColor: [NSColor clearColor]]; + [searchbox setPlaceholderString: "Write an icon name here"] [content addSubview:searchbox] // copy button for icon name - submitButton = Library.components.submit("Submit",NSMakeRect(250, 150, 200, 50)) + submitButton = Library.components.submit("Submit",NSMakeRect(390, 150, 200, 50)) submitButton.setWantsLayer(true) // submit button layer @@ -50,23 +37,47 @@ var onRun = function(context,icon_path,title,fontname) { // [buttonlayer setFont:[NSFont boldSystemFontOfSize:12]] buttonlayer.contentsScale = [[NSScreen mainScreen] backingScaleFactor]; - buttonlayer.string = "+ Add/Change Icon" + buttonlayer.string = "+ Add Icon" [submitButton setLayer:buttonlayer] [submitButton setCOSJSTargetFunction:function(sender) { [wrapper orderOut:nil] [NSApp stopModalWithCode:NSOKButton] + [submitButton setCOSJSTargetFunction:nil] }]; [content addSubview:submitButton] - [NSApp activateIgnoringOtherApps:true] var response = [NSApp runModalForWindow:wrapper]; - var input_value = [searchbox stringValue]; - var finded_icon = Library.searchAlias([input_value lowercaseString],icons) // if is the response is ok, add icon to the layer if (response == NSOKButton) { - if (finded_icon.unicode != undefined) { - var icon_name = finded_icon.alias + var selected_font = [selectbox objectValueOfSelectedItem] + var fontname = ""; + var icon_path = ""; + if (selected_font == "FontAwesome") { + icon_path = "fontawesome.json"; + fontname = "FontAwesome"; + } else if (selected_font == "Material") { + icon_path = "material.json"; + fontname = "Material Icons"; + } else { + icon_path = "ion.json"; + fontname = "IonIcons"; + } + + var icon_source = [plugin urlForResourceNamed:icon_path] + // call getIcons function from library file. + var icons = Library.getIcons(icon_source) + // commended icon_list because we don't need icon values. + // var icon_list = Library.iconValues(icons,"a") + // get input value + var input_value = [searchbox stringValue]; + // find icon in the json file + var finded_icon = Library.searchAlias([input_value lowercaseString],icons) + + if (finded_icon.alias != undefined) { + // get the name of the icon from the finded_icon object + var icon_name = finded_icon.alias + ' - ' + fontname + // escape the unicode of the icon var get_selected_icon = Library.escapeUnicode('\\u' + finded_icon.unicode) // select the text layer var textLayer = page.selectedLayers().firstObject() @@ -80,7 +91,7 @@ var onRun = function(context,icon_path,title,fontname) { textLayer = Library.addTextLayer(doc, artboard, {"text": get_selected_icon, "name": icon_name}); } // set icon font - [textLayer setFontPostscriptName:fontname]; + [textLayer setFont:[NSFont fontWithName:@""+fontname size:20.0]] } else { // give an error to write an icon Library.components.alert('You need to write a correct icon name','Please try again that.') diff --git a/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript b/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript index b6d1abe..115867e 100644 --- a/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript +++ b/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript @@ -17,88 +17,71 @@ var onIon = function(context) { var onRun = function(context,icon_path,title,fontname) { - var doc = context.document // the current document (MSDocument) - var plugin = context.plugin // the plugin (MSPluginBundle) - var page = [doc currentPage] // the current page (MSPage) - var artboard = [page currentArtboard] || page - var icon_source = [plugin urlForResourceNamed:icon_path] + var doc = context.document // the current document (MSDocument) + var plugin = context.plugin // the plugin (MSPluginBundle) + var page = [doc currentPage] // the current page (MSPage) + var artboard = [page currentArtboard] || page + var icon_source = [plugin urlForResourceNamed:icon_path] // call getIcons function from library file. - var icons = Library.getIcons(icon_source) - var icon_list = Library.iconValues(icons,fontname) - var icon_count = icon_list[0].length; + var icons = Library.getIcons(icon_source) + var icon_list = Library.iconValues(icons,fontname) + var icon_count = icon_list[0].length; // row count and height calculate - var list_width = 545; - var col_size = Math.ceil(list_width / 50); - var row_size = Math.ceil(icon_count / col_size); - var list_height = Math.ceil(row_size * 50); + var list_width = 545; + var col_size = Math.ceil(list_width / 50); + var row_size = Math.ceil(icon_count / col_size); + var list_height = Math.ceil(row_size * 50); // create a wrapper window - var mainwindow = Library.components.window(title + " - Add an icon", "Choose an icon") - var wrapper = mainwindow[0] - var content = mainwindow[1] - - var selectedItemIndex = selectedItemIndex || 0 - - var listContainer = [[NSScrollView alloc] initWithFrame:NSMakeRect(25,25,554,260)] - - var prototype = [[NSButtonCell alloc] init]; + var mainwindow = Library.components.window(title + " - Add an icon", "Choose an icon") + var wrapper = mainwindow[0] + var content = mainwindow[1] + var listContainer = [[NSScrollView alloc] initWithFrame:NSMakeRect(25,25,554,320)] + var prototype = [[NSButtonCell alloc] init]; [prototype setButtonType:NSToggleButton]; [prototype setTitle:"-"]; [prototype setBezeled:true] [prototype setBezelStyle:NSThickSquareBezelStyle] - var iconMatrix = [[NSMatrix alloc] initWithFrame:NSMakeRect(0, 45, list_width, list_height) + var iconMatrix = [[NSMatrix alloc] initWithFrame:NSMakeRect(0, 45, list_width, list_height) mode:NSRadioModeMatrix prototype:prototype numberOfRows:row_size numberOfColumns:col_size]; - var cellArray = [iconMatrix cells]; + var cellArray = [iconMatrix cells]; [iconMatrix setFont:[NSFont fontWithName:@""+fontname size:20.0]] [iconMatrix setCellSize:NSMakeSize(47, 47)]; [iconMatrix setIntercellSpacing:NSMakeSize(2, 2)]; + for (var k=0; k < icon_count; k++) { + // tooltip for every cell + [iconMatrix setToolTip:@""+icon_list[1][k] forCell:[cellArray objectAtIndex:k]]; + // title for every cell [[cellArray objectAtIndex:k] setTitle:icon_list[0][k]]; - [[cellArray objectAtIndex:k] setAlternateTitle:""+k]; - // [[cellArray objectAtIndex:k] setTarget:self]; - // [[cellArray objectAtIndex:k] setCOSJSTargetFunction:function(sender) { - // [wrapper orderOut:nil] - // [[NSApplication sharedApplication] stopModalWithCode:NSOKButton] - // [cellArray setCOSJSTargetFunction:nil] - // }]; - // [[cellArray objectAtIndex:k] setAction:"callAction:"] + // set index into tag variable for every cell + [[cellArray objectAtIndex:k] setTag:k]; + // set target itself because we need to click everycell + [[cellArray objectAtIndex:k] setTarget:self]; + [[cellArray objectAtIndex:k] setCOSJSTargetFunction:function(sender) { + [wrapper orderOut:nil] + [[NSApplication sharedApplication] stopModalWithCode:NSOKButton] + [cellArray setCOSJSTargetFunction:nil] + }]; + [[cellArray objectAtIndex:k] setAction:"callAction:"] } [listContainer setDocumentView:iconMatrix]; [listContainer setHasVerticalScroller:true]; [content addSubview:listContainer] - // copy button for icon name - submitButton = Library.components.submit("Submit",NSMakeRect(440, 274, 200, 50)) - submitButton.setWantsLayer(true) - // submit button layer - var buttonlayer = [CATextLayer layer] - [buttonlayer setBackgroundColor:[NSColor blackColor]] - [buttonlayer setForegroundColor:CGColorCreateGenericRGB(215/255, 159/255, 0/255, 1.0)] - [buttonlayer setFontSize:16] - buttonlayer.contentsScale = [[NSScreen mainScreen] backingScaleFactor]; - buttonlayer.string = "+ Add/Change Icon" - [submitButton setLayer:buttonlayer] - [submitButton setCOSJSTargetFunction:function(sender) { - [wrapper orderOut:nil] - [NSApp stopModalWithCode:NSOKButton] - [submitButton setCOSJSTargetFunction:nil] - }]; - [content addSubview:submitButton] - - var response = [NSApp runModalForWindow:wrapper]; - var selected_icon = [[iconMatrix selectedCell] alternateTitle] - var icon_name = icon_list[1][selected_icon] - var get_selected_icon = [[iconMatrix selectedCell] title]; + var response = [NSApp runModalForWindow:wrapper]; + var selected_icon = [[iconMatrix selectedCell] tag] + var icon_name = icon_list[1][selected_icon] + var get_selected_icon = [[iconMatrix selectedCell] title]; // if is the response is ok, add icon to the layer if (response == NSOKButton) { // select the text layer - var textLayer = page.selectedLayers().firstObject() - + var textLayer = page.selectedLayers().firstObject(); // if is it a text layer run it. if it is not give an error. if (textLayer && textLayer.isKindOfClass(MSTextLayer)) { // set selected icon as the layer's value @@ -108,7 +91,6 @@ var onRun = function(context,icon_path,title,fontname) { } else { textLayer = Library.addTextLayer(doc, artboard, {"text": get_selected_icon, "name": icon_name}); } - // set icon font [textLayer setFontPostscriptName:fontname]; } diff --git a/iconfont.sketchplugin/Contents/Sketch/learn_icon_name.cocoascript b/iconfont.sketchplugin/Contents/Sketch/learn_icon_name.cocoascript index 89a9cdb..1acf495 100755 --- a/iconfont.sketchplugin/Contents/Sketch/learn_icon_name.cocoascript +++ b/iconfont.sketchplugin/Contents/Sketch/learn_icon_name.cocoascript @@ -55,7 +55,7 @@ var onRun = function(context) { var content = mainwindow[1] // copy button for icon name - copybutton1 = Library.components.copy(icon_name,NSMakeRect(400, 290, 100, 30)) + copybutton1 = Library.components.copy(icon_name,NSMakeRect(20, 290, 100, 30)) [content addSubview:copybutton1] // copy button for html wrapper icon diff --git a/iconfont.sketchplugin/Contents/Sketch/library.cocoascript b/iconfont.sketchplugin/Contents/Sketch/library.cocoascript index 94a14bd..30df3b2 100755 --- a/iconfont.sketchplugin/Contents/Sketch/library.cocoascript +++ b/iconfont.sketchplugin/Contents/Sketch/library.cocoascript @@ -72,18 +72,17 @@ var Library = { return result; }, // + // Search Alias in Icon List + // valid types for alias is 'text' + // valid types for icon_list is 'JSON' // - // - // - // - "searchAlias": function(alias,icon_list) { + "searchAlias": function(name,icon_list) { var result = [[NSObject alloc] init]; var list = [icon_list objectForKey:@"icons"]; for (var i=0 ; i < [list count]; i++) { - if (list[i].id == alias) { - log(2) + if (list[i]["id"] == @""+name) { result.alias = list[i]["id"]; result.unicode = list[i]["unicode"]; } @@ -155,45 +154,24 @@ var Library = { "window": function (title, subtitle) { // create a wrapper window var wrapper = [[NSWindow alloc] init] - [wrapper setToolbar:nil] - [wrapper makeKeyWindow] - [wrapper becomeKeyWindow] - // [wrapper setAnimationBehavior:NSWindowAnimationBehaviorNone] - // I had problems with NSBorderlessWindowMask and setIsVisible solution. - // [wrapper setIsVisible:true] - // [wrapper becomeFirstResponder:true] - // [wrapper orderFront:nil]; - // [wrapper makeKeyAndOrderFront:self]; - // [wrapper setStyleMask:NSBorderlessWindowMask] - [wrapper setFrame:[[NSScreen mainScreen] frame] display: true] - [wrapper setHasShadow:false] - [wrapper setOpaque:false] - [wrapper setBackgroundColor:NSColor.clearColor()] - - var x = ([[NSScreen mainScreen] frame].size.width / 2) - 320; - var y = ([[NSScreen mainScreen] frame].size.height / 2) - 200; + [wrapper setFrame:NSMakeRect(0, 0, 600, 420) display:false] + [wrapper setBackgroundColor:NSColor.whiteColor()] + [wrapper setTitle:@""+title]; + var x = 0; + var y = 0; // create a body - var body = [[NSView alloc] initWithFrame:NSMakeRect(500, 0, 640, 480)] + var body = [[NSView alloc] initWithFrame:NSMakeRect(0, 0, 600, 480)] body.setWantsLayer(true) // create a header - var header = [[NSView alloc] initWithFrame:NSMakeRect(x, y+352, 600, 48)] + var header = [[NSView alloc] initWithFrame:NSMakeRect(x, 350, 600, 48)] header.setWantsLayer(true) - // header fixer - var headerfixer = [[NSView alloc] initWithFrame:NSMakeRect(0, 352, 600, 20)] - headerfixer.setWantsLayer(true) - var fixbg = [CALayer layer] - [fixbg setBackgroundColor:CGColorCreateGenericRGB(255/255, 189/255, 0/255, 1.0)] - [headerfixer setLayer:fixbg] - // create a content area - var content = [[NSView alloc] initWithFrame:NSMakeRect(x, y, 600, 400)] + var content = [[NSView alloc] initWithFrame:NSMakeRect(x, y, 600, 440)] content.setWantsLayer(true) - [content addSubview:headerfixer] - // create a layer to content var contentLayer = [CALayer layer] [contentLayer setBackgroundColor:CGColorCreateGenericRGB(255/255, 255/255, 255/255, 1.0)] //RGB plus Alpha Channel @@ -201,34 +179,14 @@ var Library = { [contentLayer setCornerRadius: 6.0] [content setLayer:contentLayer] - // // content area shadow - dropShadow = [[NSShadow alloc] init]; - [dropShadow setShadowColor:[NSColor colorWithCalibratedWhite:0.0 alpha:0.4]]; - [dropShadow setShadowBlurRadius:8]; - [dropShadow setShadowOffset:NSMakeSize(0,0)]; - [content setShadow: dropShadow]; - // content append to body [body addSubview:content] // set body as content view of wrapper [wrapper setContentView:body]; - // title add to header - var titleField = Library.components.title(title,14,[NSColor blackColor],NSMakeRect(16, 5, 400, 30)); - [titleField setAlphaValue:0.6] - [header addSubview:titleField] - - // set background to header - var headerBG = [CALayer layer] - [headerBG setBackgroundColor:CGColorCreateGenericRGB(255/255, 189/255, 0/255, 1.0)] //RGB plus Alpha Channel - [headerBG setMasksToBounds:true] - [headerBG setCornerRadius:6.0] - [header setClipsToBounds:true] - [header setLayer:headerBG] - // subtitle in window - var subTitleField = Library.components.title(subtitle,22,[NSColor blackColor],NSMakeRect(x+25, y+300, 300, 30)); + var subTitleField = Library.components.title(subtitle,22,[NSColor blackColor],NSMakeRect(x+25, 355, 300, 30)); [[wrapper contentView] addSubview:subTitleField] // create a cancel button diff --git a/iconfont.sketchplugin/Contents/Sketch/manifest.json b/iconfont.sketchplugin/Contents/Sketch/manifest.json index d5be200..3259097 100755 --- a/iconfont.sketchplugin/Contents/Sketch/manifest.json +++ b/iconfont.sketchplugin/Contents/Sketch/manifest.json @@ -1,7 +1,7 @@ { - "name" : "Development - Icon Fonts", + "name" : "Icon Fonts", "description" : "Its a nice plugin to use icon fonts in Sketch for developers and designers.", - "version" : "0.4.4", + "version" : "1.0.0", "commands" : [ { "script" : "learn_icon_name.cocoascript", @@ -12,76 +12,49 @@ }, { "script" : "add_icon.cocoascript", - "handler" : "onFontawesome", + "handler" : "onRun", "shortcut" : "cmd ctrl i", "name" : "Add an icon with name", - "identifier" : "awesome_add_icon" + "identifier" : "add_icon" }, { "script" : "add_icon_grid.cocoascript", "handler" : "onFontawesome", - "shortcut" : "cmd ctrl l", - "name" : "Add an icon with grid", + "shortcut" : "cmd ctrl alt f", + "name" : "Font Awesome", "identifier" : "awesome_add_icon_radiolist" }, - { - "script" : "add_icon.cocoascript", - "handler" : "onMaterial", - "shortcut" : "cmd alt i", - "name" : "Add an icon with name", - "identifier" : "material_add_icon" - }, { "script" : "add_icon_grid.cocoascript", "handler" : "onMaterial", - "shortcut" : "cmd alt l", - "name" : "Add an icon with grid", + "shortcut" : "cmd ctrl alt m", + "name" : "Material", "identifier" : "material_add_icon_radiolist" }, - { - "script" : "add_icon.cocoascript", - "handler" : "onIon", - "shortcut" : "cmd alt i", - "name" : "Add an icon with name", - "identifier" : "ion_add_icon" - }, { "script" : "add_icon_grid.cocoascript", "handler" : "onIon", - "shortcut" : "cmd alt l", - "name" : "Add an icon with grid", + "shortcut" : "cmd ctrl alt i", + "name" : "Ion Icons", "identifier" : "ion_add_icon_radiolist" }, ], "menu": { - "title" : "Development - November - Icon Fonts", + "title" : "Icon Fonts", "items": [ "learn_icon_name", + "add_icon", { - "title" : "Fontawesome", - "items" : [ - - "awesome_add_icon", - "awesome_add_icon_radiolist" - ] - }, - { - "title" : "Material", - "items" : [ - "material_add_icon", - "material_add_icon_radiolist" - ] - }, - { - "title" : "Ion Icons", + "title" : "Add an icon with grid", "items" : [ - "ion_add_icon", + "awesome_add_icon_radiolist", + "material_add_icon_radiolist", "ion_add_icon_radiolist" ] }, ], }, - "identifier" : "com.keremciu.sketch.development", + "identifier" : "com.keremciu.sketch.iconfont", "author" : "Kerem Sevencan", "authorEmail" : "info@kerem.ws", }