{"id":13714869,"url":"https://github.com/ajimix/WatchKit-Framer","last_synced_at":"2025-05-07T03:30:57.618Z","repository":{"id":215215584,"uuid":"33924151","full_name":"ajimix/WatchKit-Framer","owner":"ajimix","description":"Apple Watch Kit for Framer JS","archived":false,"fork":false,"pushed_at":"2015-05-28T17:22:15.000Z","size":1014,"stargazers_count":55,"open_issues_count":1,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-05T18:04:54.927Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajimix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-04-14T09:56:25.000Z","updated_at":"2017-12-07T23:26:00.000Z","dependencies_parsed_at":"2024-01-03T07:00:27.153Z","dependency_job_id":"34116e3b-38ad-4815-a040-37b07eae2060","html_url":"https://github.com/ajimix/WatchKit-Framer","commit_stats":null,"previous_names":["ajimix/watchkit-framer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FWatchKit-Framer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FWatchKit-Framer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FWatchKit-Framer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FWatchKit-Framer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajimix","download_url":"https://codeload.github.com/ajimix/WatchKit-Framer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806407,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:51.284Z","updated_at":"2025-05-07T03:30:57.582Z","avatar_url":"https://github.com/ajimix.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# WatchKit-Framer\nApple Watch Kit for FramerJS to help you easily create Apple Watch interfaces in Framer.\n\n## Add it in your Framer Studio project\n\n- Download the project from github.\n- Copy `watchkit.coffee` into `modules/` folder.\n- Import it in Framer Studio by writing: `WatchKit = require \"watchkit\"`.\n\n**Note:** Components are prepared to be used with 42mm Apple Watch.  \n**Note:** You need the San Francisco font [provided by Apple](https://developer.apple.com/watchkit/).\n\n## Components\n\n### Status Bar\n\nCreates an Apple Watch status bar.\n\n![Apple Watch Status Bar](img/status-bar.jpg)\n\n```coffeescript\nstatusBar = new WatchKit.StatusBar\n\ttitle: \"Some title\"\n\tback: true # Display or not the back button\n\ttime: true # Display or not the time\n```\n\n### Buttons\n\nButtons should have the Y position where you want to place them in the screen.  \nButtons perform an animation when the user clicks them.\n\n##### Button for actions\n\n![Apple Watch Action Button](img/action-button.jpg)\n\n```coffeescript\nactionButton = new WatchKit.ActionButton \"Button title\", y: 50\n```\n\n##### Button for dismiss\n\n![Apple Watch Dismiss Button](img/dismiss-button.jpg)\n\n```coffeescript\ndismissButton = new WatchKit.DismissButton y: 140\n```\n\n##### Button with image\n\nAdds an image on the left side of the button.\n\n![Apple Watch Image Button](img/image-button.jpg)\n\n```coffeescript\nimageButton = new WatchKit.ActionButton image: \"images/some-icon.jpg\", y: 140\n```\n\n##### Disable a button\n\nButtons can be disabled using the `disabled: true`.\n\n![Apple Watch Disabled Button](img/disabled-button.jpg)\n\n### Separator\n\nCreates a default Apple separator. Specify the background color for a different color than the default one.\n\n![Apple Watch Separator](img/separator.jpg)\n\n```coffeescript\nseparator = new WatchKit.Separator y: 100, backgroundColor: \"blue\"\n```\n\n### Notification\n\nCreates a configurable notification.\n\n![Apple Watch Notification](img/notification.gif)\n\n```coffeescript\nnotification = new WatchKit.Notification\n\ttitle: \"Alert title\"\n\tappName: \"App title\"\n\timage: \"image/some-image.jpg\" # Set your app image\n\tcontentBodyLayer: someLayerToUseAsBody\n\nnotification.show() # Show the notification\n```\n\nAdditionally you can configure `appNameColor`, `contentBodyBackgroundColor` and `contentTitleBackgroundColor`.\n\n##### Using text as body\n\n`WatchKit.Notification.contentBodyFont` is exposed to be able to use the default font for the body content.\n\n```coffeescript\ncontentBodyLayer = new Layer\n\thtml: \"Lorem ipsum dolor sit amet.\"\n\tstyle: _.extend {}, WatchKit.Notification.contentBodyFont,\n\t\tpadding: \"0 14px\" # Set some padding for better display\n\t\tbackgroundColor: \"transparent\"\n\nnotification = new WatchKit.Notification\n\ttitle: \"Alert title\"\n\tappName: \"App title\"\n\tcontentBodyLayer: contentBodyLayer\n\t\nnotification.show()\n```\n\n##### Adding action buttons\n\nBy default there is only a dismiss button. You can add more buttons by using `addActionButton` or `addActionButtons` methods.\n\n```coffeescript\nactionButton1 = new WatchKit.ActionButton \"Action 1\"\nactionButton2 = new WatchKit.ActionButton \"Action 2\"\n\nnotification = new WatchKit.Notification\n\ttitle: \"Alert title\"\n\tappName: \"App title\"\n\t\nnotification.addActionButtons actionButton1, actionButton2\n\t\nnotification.show()\n```\n\t\n### Pagination\n\nCreates a framer page component with the apple watch pagination dots.  \nPagination contains a set of pages that can be swiped.\n\n![Apple Watch Pagination](img/pagination.gif)\n\n```coffeescript\npagination = new WatchKit.Pagination\n\tshowPagination: true # Display or not the pagination dots\n```\n\n#### Page\n\nThe basic page for the pagination element.  \n\n```coffeescript\npage = new WatchKit.Page\n```\n\nLayers can be added inside a page by using the `addLayer` method.\n\n```coffeescript\npage = new WatchKit.Page\nlayer = new Layer\n\npage.addLayer layer\n```\n\nIn order to add pages to the pagination object, use the `addPage` or `addPages` method.\n\n```coffeescript\npage1 = new WatchKit.Page image: \"images/some_image.jpg\"\npage2 = new WatchKit.Page\nsomeLayer = new Layer\n\npage2.addLayer someLayer\n\npagination.addPages page1, page2\n```\n\n### Modal Sheet\n\nCreates a modal sheet exactly with the same behaviour as the one in the watch.  \nUse `present()` and `dismiss()` to show or hide the modal.\n\n![Apple Watch Modal Sheet](img/modal-sheet.gif)\n\n```coffeescript\nmodalSheet = new WatchKit.ModalSheet\n\tdismissTitle: \"Dismiss\" # Pass a dismiss title to enable a dismiss button\nsomeLayer = new Layer\n\nmodalSheet.addLayer someLayer\n\nmodalSheet.present()\n```\n\n## Other\n\n### Click animation curve\n\nUse this curve for click animations\n\n```coffeescript\nsomeLayer.animate\n\tcurve: WatchKit.clickAnimationCurve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajimix%2FWatchKit-Framer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajimix%2FWatchKit-Framer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajimix%2FWatchKit-Framer/lists"}