{"action":"created","issue":{"url":"https://api.github.com/repos/frctl/mandelbrot/issues/1","repository_url":"https://api.github.com/repos/frctl/mandelbrot","labels_url":"https://api.github.com/repos/frctl/mandelbrot/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/frctl/mandelbrot/issues/1/comments","events_url":"https://api.github.com/repos/frctl/mandelbrot/issues/1/events","html_url":"https://github.com/frctl/mandelbrot/issues/1","id":138682170,"number":1,"title":"Feature: Ability to provide multiple previews, and switch between them in UI","user":{"login":"paulrobertlloyd","id":813383,"avatar_url":"https://avatars.githubusercontent.com/u/813383?v=3","gravatar_id":"","url":"https://api.github.com/users/paulrobertlloyd","html_url":"https://github.com/paulrobertlloyd","followers_url":"https://api.github.com/users/paulrobertlloyd/followers","following_url":"https://api.github.com/users/paulrobertlloyd/following{/other_user}","gists_url":"https://api.github.com/users/paulrobertlloyd/gists{/gist_id}","starred_url":"https://api.github.com/users/paulrobertlloyd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulrobertlloyd/subscriptions","organizations_url":"https://api.github.com/users/paulrobertlloyd/orgs","repos_url":"https://api.github.com/users/paulrobertlloyd/repos","events_url":"https://api.github.com/users/paulrobertlloyd/events{/privacy}","received_events_url":"https://api.github.com/users/paulrobertlloyd/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-03-05T13:56:47Z","updated_at":"2016-03-08T09:35:09Z","closed_at":null,"body":"Case one. I have a site that is internationalised. The appearance of a component may change based on the value of a `dir` attribute (i.e. `<html dir=\"ltr\">` or `<html dir=\"rtl\">`).\r\n\r\nCase two. I have a site that makes use of some theming.  The appearance of a component may change depending on which class is set on a containing element (i.e. `<body class=\"t-light\">` or `<body class=\"t-light\">`).\r\n\r\nIn each case, the component’s markup does not change but it’s appearance might, depending on global values. Both for demonstrating and testing that components work when such variables change, it would be nice if you could quickly toggle between them somehow in the UI.\r\n\r\nWhat’s the best way to achieve this? Here’s an initial thought. Currently, components can optionally be rendered within a preview template, so what if multiple preview templates can be defined? Should more than one preview be provided in a components configuration, the UI displays a toggle allowing you to swap between them.\r\n\r\n* * *\r\n\r\nExample:\r\n\r\n`_preview-ltr.hbs`:\r\n\r\n```\r\n<html dir=\"ltr\">\r\n    <head>\r\n        …\r\n    </head>\r\n\r\n    <body>\r\n        {{ yield }}\r\n    </body>\r\n</html>\r\n```\r\n\r\n`_preview-rtl.hbs`:\r\n\r\n```\r\n<html dir=\"rtl\">\r\n    <head>\r\n        …\r\n    </head>\r\n\r\n    <body>\r\n        {{ yield }}\r\n    </body>\r\n</html>\r\n```\r\n\r\n`component/component.config.yml`:\r\n\r\n```\r\npreview:\r\n  - label: \"Left to right\"\r\n    layout: '_preview-ltr.hbs'\r\n  - label: \"Right to left\"\r\n    layout: '_preview-rtl.hbs'\r\n```\r\n\r\nAm I over thinking this? Can this be achieved another way?"},"comment":{"url":"https://api.github.com/repos/frctl/mandelbrot/issues/comments/193688172","html_url":"https://github.com/frctl/mandelbrot/issues/1#issuecomment-193688172","issue_url":"https://api.github.com/repos/frctl/mandelbrot/issues/1","id":193688172,"user":{"login":"allmarkedup","id":126726,"avatar_url":"https://avatars.githubusercontent.com/u/126726?v=3","gravatar_id":"","url":"https://api.github.com/users/allmarkedup","html_url":"https://github.com/allmarkedup","followers_url":"https://api.github.com/users/allmarkedup/followers","following_url":"https://api.github.com/users/allmarkedup/following{/other_user}","gists_url":"https://api.github.com/users/allmarkedup/gists{/gist_id}","starred_url":"https://api.github.com/users/allmarkedup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/allmarkedup/subscriptions","organizations_url":"https://api.github.com/users/allmarkedup/orgs","repos_url":"https://api.github.com/users/allmarkedup/repos","events_url":"https://api.github.com/users/allmarkedup/events{/privacy}","received_events_url":"https://api.github.com/users/allmarkedup/received_events","type":"User","site_admin":false},"created_at":"2016-03-08T09:35:09Z","updated_at":"2016-03-08T09:35:09Z","body":"Only just seen this as I for some reason wasn't subscribed to notification for this repo :-)\r\n\r\nSo the best way to achieve this within what is currently possible is to define a couple of variants for the component within the component configuration file (as opposed to as seperate view files). Each variant can specify it's own preview layout and data but (unless specified otherwise) will use the same main component view template.\r\n\r\nI'm going to work on the variant documentation shortly but for until that is done the component config reference has an example of how to specify the variants together with what properties they can have set: https://github.com/frctl/fractal/blob/master/docs/components/configuration.md#example-component-configuration-file\r\n\r\nAlso, to avoid ending up with lots of very similar preview layouts, when a layout is rendered it has access to a special `_target` property that represents the item being rendered within it. So you could set a context property like 'textDirection' in the variant's context and then access it from the preview layout by using `{{ _target.context.textDirection }}`. That way you can have one preview layout that behaves differently depending on the item that it is wrapping. Some docs on the `_target` property here: https://github.com/frctl/fractal/blob/master/docs/components/layouts.md#the-_target-property\r\n"}}