Gist af897f78753e7f850cce144cb3a1ce26

100%

Gist af897f78753e7f850cce144cb3a1ce26

✓ Published0🌍 Public

Last edited Aug 24, 2019

Created on Aug 24, 2019

This example demonstrates a Sketch plugin interface with synchronized slider, input field, and stepper controls that all adjust the same numeric value. The code uses Objective-C with Apple's Cocoa and JavaScriptCore APIs, including `MOJavaScriptObject` for bridging JavaScript callbacks. It loads a user interface from a NIB file via `loadNibFile` and `NSBundle`, and shows how `sliderChange`, `inputChange`, and `stepperChange` actions keep the three widgets in sync. The `clickHello` method invokes a JavaScript function through `callFunctionWithArguments`, connecting the native UI to scripted behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

70% match

Loading thumbnail…

Loading a XIB file in a Sketch plugin

This example demonstrates how a Sketch plugin loads a XIB file to create a native interface panel. The JavaScript entry point, `script.js`, uses the `sketch` module and attempts to run the plugin, catching errors to dynamically load the `HelloSketch` framework via Mocha’s `loadFrameworkWithName:inDirectory:` method. The Objective-C class `HSMain` then loads the `HSPanel` nib using `NSBundle loadNibNamed:owner:topLevelObjects:` and exposes a `helloText` method that logs and returns a greeting string, which is displayed through `sketch.UI.message`.

KKevinGutowski

70% match

Loading thumbnail…

Gist 4da3ecb32517e64ddc52428cdb30eaab

This example demonstrates a Sketch plugin that monitors document changes and provides real-time feedback through popup messages. It shows how the plugin reacts to three types of edits: property modifications, object deletions, and object additions or moves. The code uses the Sketch JavaScript API, including `sketch.UI.message` for notifications and `sketch.fromNative` to wrap native objects for access to parent artboards. It logs the full path of each change and distinguishes between moved objects and genuine additions or deletions, with special handling for deletions that are part of a move operation.

KKevinGutowski

69% match

Loading thumbnail…

Cocoa

This example shows a custom slider control built with Cocoa’s AppKit framework, using an `NSView` subclass to render a gradient-filled, rounded rectangular track. The view applies a linear gradient via `NSGradient` and sets a corner radius using layer-backed properties (`wantsLayer`, `layer.cornerRadius`). The code also attempts to load an image from a file named `knob.png` for the slider’s thumb, though the actual drawing of that image is commented out. The gradient and angle properties are exposed, with setters that trigger redraws via `setNeedsDisplay:`. The data source is the referenced image file, while the rendering relies on `drawRect:` and `drawInRect:angle:`.

IIliaIdakiev

68% match

Loading thumbnail…

sketch

This example demonstrates a jQuery plugin called `stepper` that manages step-by-step navigation through an ordered list of items, visually highlighting the active step while dimming inactive ones. The interface shows a sequence of seven steps with Previous and Next links, allowing users to move forward or backward through the list by clicking those controls or double-clicking a specific step to activate it directly. The code uses the jQuery library to implement custom event-driven behavior, binding handlers for activation, deactivation, and navigation events. The plugin manipulates CSS classes (`active` and `inactive`) to provide visual feedback, relying on the loaded Google-hosted jQuery version rather than any data source or rendering library.

DDylanFM

64% match

Loading thumbnail…

Toggling Sketch menu items

This example demonstrates how to toggle menu items in a Sketch plugin by manipulating the application’s main menu. The code uses the Sketch JavaScript API, specifically `NSApplication.sharedApplication().mainMenu()` and `itemWithTitle` to locate the Plugins submenu, then targets the "BaseAlign" item. It disables the item with `setEnabled(false)` and sets its state to checked with `setState(true)`. The menu is accessed directly through Cocoa’s AppKit framework, showing how plugin authors can programmatically control UI elements.

KKevinGutowski

63% match

Loading thumbnail…

Triggering an action in Sketch

This example demonstrates how to trigger built-in actions in Sketch by accessing the document’s actions controller. The code uses the `actionsController()` API to invoke specific actions like `MSShowReplaceColorSheetAction` and `MSInsertSymbolAction`, passing in objects such as an `NSMenuItem` with a represented object when needed. It also includes a commented-out script that logs all available action class names to a file. The snippet illustrates direct programmatic control over Sketch’s UI, relying on Objective-C bridging through JavaScript APIs. It references `MSSymbolMasterReference` to handle symbol insertion and uses `try`/`catch` for error handling.

KKevinGutowski

60% match

Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM

60% match