|||
|-|-|-|
| 
| 摘要 | 在编辑器中添加一个按钮，用于创建可拖动的交互式图像比较滑块。
| 
|代码库| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| 
|安装指南|如何安装主题或主题组件|
| 
|首次使用 Discourse 主题？| Discourse 主题使用入门指南|
安装此主题组件
此组件在编辑器中添加了一个按钮，用于创建可拖动的图像比较滑块。滑块设置（如方向或按钮图标）可以从管理员设置中自定义。
这是我第一次涉足 Discourse 开发，如果我犯了任何错误，敬请谅解。
什么是 WIP？（现在有 20 个字符了吗？）
WIP 是在制品。
太棒了！感谢您的贡献 
您有什么样的更新计划？
主要是我需要清理代码，使其更符合 Discourse 的风格。目前它有点粗糙，因为我当时正在积极学习如何制作一个主题组件 
我还计划添加一种方法来在编辑器中更改滑块方向——目前，方向取决于管理员设置，我想让用户可以控制它。（编辑：已添加！）
我还想为滑块手柄/分隔符样式添加更多控制，但遗憾的是，这并不真正可行。处理滑块的 JavaScript 会在任何 CSS 更改之前构建滑块，并且在 CSS 更改时不会重建滑块。
很棒！
感谢您的贡献 
用户可以选择垂直或水平滑块，使用 data-direction-horizontal 或 data-direction-vertical 属性。如果用户未指定方向，将使用管理员设置中选择的默认设置。
这很酷。做得好。
很难说是什么原因造成的，我这边无法重现 :/\n\n在这些错误中，只有一个可能来自这个组件，因为我没有使用 tooltipContainer 或 ResizeObserver 循环，但同样，我也不确定。\n\n您是否已更新到最新版本？我昨天做了一些更改，这可能会解决这个问题。
谢谢 Joseph，我使用的是最新版本。很奇怪，我无法再次显示此消息，也看不到任何问题，所以也许只是个巧合？
另外，图标无法更改。我当然已经将其添加到 SVG 图标子集中。我也尝试过我网站上已在使用的不同图标，但它仍然显示为闪电图标。我正试图将其更改为 arrows-alt-h。
这是我的错，我刚刚提交了一个会修复这个问题的更改。感谢你发现这个问题！
太棒了，我遇到了一些问题：
在我的论坛中，我们切换到了 en_GB 区域设置，因此当我将鼠标悬停在上面时，我会看到：
该插件似乎窃取了所有鼠标按下事件，阻止我选择页面上的任何文本进行复制/粘贴/引用等。在 meta.discourse 上这不是问题……我很乐意提供有关我的配置/主题的更多详细信息（主要是 Sam 的简单主题，外加一些额外的组件，如 gallery 和 gifs）。它消失了……我爱科技。
3.1.0.beta4
(f0bdb2ee9a)
我发布了一个说明帖子来使用该功能，有些人说他们什么也没看到。（由于我没有收到任何真正的错误报告，因此反馈不是非常有帮助）。
嗯……这很奇怪，我在 Firefox 上测试过，没有任何问题。我看看能不能重现这个问题。真是爱死这些随机的 bug 了 
我正在使用的库在 GitHub 仓库中针对 Firefox 没有任何问题，无论是打开还是关闭，这使得修复 bug 更加困难。
地区设置——我不确定提供地区设置文件的过程是怎样的，我可以添加一个 en.GB，因为我会说这种语言，但这已经是我的全部专业知识了。有其他主题组件作者知道地区设置文件的翻译应该如何进行吗？我应该直接用谷歌翻译来翻译文本吗？
我唯一能看出你的和已知正常工作的组件（giphy）的区别是缩进……
也许是因为所有的 yml 优点都在同一缩进级别，解析器什么的。
基本上……我只是个菜鸟，根本不知道自己在做什么。
我明白你的感受 我会去看看的，我正在使用 VS Studio 的 YML 解析器，但它可能不完全符合标准。我会在记事本里尝试一些老式的手动缩进。
@Frully 我已修复Firefox问题-现在可以在所有浏览器上运行（我已测试Chrome、Firefox、Safari和移动版本，均无问题）。如果您更新此内容，您的Firefox用户将可以使用
你好
这个主题组件非常酷，谢谢你，我刚刚安装了它
按钮文本和占位符文本存在问题
我也有这个主题组件
安装后，我有：
奇怪，不是吗？
Stéphane
我没考虑到那个问题。感谢 @Stephane_Roy 指出！
问题是两个主题组件都使用了相同的翻译变量。其他 TC 可能也有同样的问题。修复方法是更新/更改下面位置的 button_text 和 add_images_prompt 的名称。我也会更新 Masonry Image Gallery。
translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;
api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,""].join(‘’),
", "**add_images_prompt**", { multiline: false } ) });
"
