BootBrander Bootstrap. less 生成器用户界面( 第 3部分/UI 细化)

分享于 

15分钟阅读

Web开发

  繁體

介绍

这已经是本系列的第 3部分。 如果你没有读取第1部分部件 2,那么应该先进行。

我们在以前的文章中将 Bootstrap 颜色选取器UI保留在工作状态。 虽然有些东西丢失了。 并非所有代表颜色的变量都被暴露给用户。

这是因为在解析 variables.less 时,我们认为每个具有" #"值的变量都是一个颜色。 这是正确的但这并不意味着所有的颜色。

如果你愿意,就来吧。 下载第二篇文章是一个很好的起点。

文章索引

其他变量类型

如果在 variables.less 中进行 poke,我们可以找到更多的变量类型。 有些不代表颜色。 有些是对其他变量的引用,有些则包含颜色函数。 让我们来看看几个例子。

只是一种颜色:

@brand-primary: #428bca;

不是颜色:

@font-family-sans-serif:"Helvetica Neue", Helvetica, Arial, sans-serif;@font-size-base: 14px;@font-size-large: ceil(@font-size-base *1.25); // ~18px

对另一个变量的引用。 它可能是一种颜色:

@link-color: @brand-primary;

颜色函数:

@gray: lighten(#000, 33.5%); // #555@link-hover-color: darken(@link-color, 15%);

最后一个显然是最糟糕的。 它既是一个函数,也是一个引用。

让我们忽略如何实际处理颜色函数。 但是我们需要创建一个能够告诉我们什么是颜色的函数。

如果变量是对另一个变量的引用,我们将得到树上的结束点。 作为颜色的原始值。 可能会有一些步骤。

@top-level-color: #ff0000;@second-color: @top-level-color;@third-color: @second-color;

当我们找到顶级变量时,它根本不是一种颜色。 那我们应该放弃它。

isColor函数

让我们创建一个函数来告诉我们变量是否为颜色。 若要解析我们的引用变量,这将是递归函数。 幸运的是,因为我们知道如果找到引用,那么目标变量应该已经在我们的模型中了。 因为 LESS 编译器不允许对还没有声明的变量的引用。

/**
 * Finds out if a value is color
 * @function isColor
 * @returns {boolean}
 */function isColor(value) {
 if(value.substr(0,1)==="#") {
 returntrue;
 }
 else {
 if(value.substr(0,1)==="@") {
 if(viewModel.variables.hasOwnProperty(value)) {
 console.log(viewModel.variables[value]);
 return isColor(viewModel.variables[value].value());
 }
 }
 }
 returnfalse;
}

这样做是为什么;首先看一下实际值是从" #"开始的,这样我们就完成了。 否则,我们需要查看值是否为引用。 如果是,我们将在变量对象中查看它,看看它是否已经添加到了 viewModel 上,如果是颜色。

更改分析器

在解析器中,我们应该改变代码行。

if(value.subtr(0,1)==="#") {

。进入。

if(isColor(value) {

但这不是我们唯一能做的。 对于这个例子,我们将坚持。 但是也许我们会在某一点上允许用户改变所有变量。 所以我们还将所有不是颜色的东西添加到 viewModel

这将不会损坏任何东西。然后我们可以轻松地在以后添加功能。 所以在我们的解析器循环中,我们将首先在 isColor if 末尾继续状态并添加它的他类型的变量 below。

整个 parseVariablesLess 函数应该类似于下面这样:

/**
 * Parses the variables.less file
 * @function parseVariablesLess
 */function parseVariablesLess(responseText) {
 var lines = responseText.split('n'),
 line,
 i,
 nameValue,
 name,
 value,
 category
 ;
 for (i = 0, j = lines.length; i <j; i++) {
 line = lines[i];
 if (line.substr(0, 4) === "//==") {
 category = line.substr(5, line.length).trim();
 viewModel.categories[category] = {
 variables: ko.observableArray()
 };
 continue;
 }
 if (line.substr(0, 1) === "@") {
 //this is a variable nameValue = line.split(":");
 name = nameValue[0].trim();
 value = nameValue[1].trim();
 //This line has change to! In the previous version we just replaced the ;//but there could be comments behind them value = value.split(";")[0];
 if (storedViewData.hasOwnProperty(name)) {
 value = storedViewData[name];
 }
 if (isColor(value)) {
 //this is colorif (value.length === 4) {
 value += value.substr(1, 3);
 }
 //add the name to the categories viewModel.categories[category].variables.push(name);
 //add the variable to the variables object viewModel.variables[name] = {
 type: ko.observable("color"),
 value: ko.observable(value)
 }
 continue;
 }
 //add the variable to the variables object//storing them for later potential use viewModel.variables[name] = {
 type: ko.observable("hidden"),
 value: ko.observable(value)
 }
 }
 }
}

处理参考颜色

如果现在启动接口,我们将看到:

如果用户单击 @component-active-bg的颜色轮并更改它,它将断开与原始颜色 @brand-primary的链接。 即使我觉得这应该是可以能的,我也希望有一种方法来'跳转'到它的他颜色。

为此,我们需要引入一个新的变量类型" color-reference",并创建一个新的knockout模板。 dailog和 viewModel 中的函数。

我们将从检测这种新类型开始。 让我们改变 isColor 周围的if

 if (isColor(value)) {
//this is color
 if (value.length === 4) {
 value += value.substr(1, 3);
 }
//add the name to the categories
 viewModel.categories[category].variables.push(name);
 if (value.substr(0, 1) ==="@") {
//add the variable to the variables object
 viewModel.variables[name] = {
 type: ko.observable("color-reference"),
 value: ko.observable(value)
 }
 }
 else {
//add the variable to the variables object
 viewModel.variables[name] = {
 type: ko.observable("color"),
 value: ko.observable(value)
 }
 }
 continue;
}
测试

运行这个网站,我们看到并非所有类别都显示出来。 控制台里有一个错误。 这是来自knockout的消息: 无法找到带有ID颜色引用的模板。

我们需要给它提供一个模板来启动。 首先复制一个颜色,然后添加一些更改:

<scripttype="text/html"id="color-reference"><divclass="row"><divclass="col-xs-9"style="padding-right: 0;"><aclass="form-control"data-bind="text: value"></a></div><divclass="col-xs-3"style="padding-left: 0;"><inputtype="color"class="form-control"data-bind="value: value"/></div></div></script>

我把输入框改成了一个链接。 如果你把鼠标放在它上面。 你会看到它用下划线装饰。 如果用户单击这里链接,我想显示一个与该颜色的UI的对话框,该颜色为 inheritence。

但是首先,我们需要一个函数来绑定到链接。 我们将添加到 viewModel,这样我们就可以将它与knockout绑定。

var viewModel = window.viewModel = {
 categories: {},
 variables: {},
 gotoReference: function (data) {
 alert(data.value());
 }
 },

然后将它绑定到链接。

<aclass="form-control"data-bind="text: value, 
click: $root.gotoReference"></a>

那是什么意思? 它表示转到 viewModel的root 并找到函数 gotoReference 并将它的绑定到 click eventhandler。

测试

在scaffolding中运行 @link-color 并单击窗体控件,它应该弹出一条提示,显示" @brand-primary"。

创建参照对话框

如果用户单击这样的链接,我想启动一个带有颜色模板的对话框。 如果引用颜色本身是另一种颜色的引用,它应该启动另一个屏幕。

创建用于 bootbox的对话框。 你可以通过NuGet软件包管理器找到这个。 安装之后,我倾向于将它添加到 BundleConfig.cs的Bootstrap 包中。

运行。

bootbox.alert("Hello world!");

。控制台应该能给你一个好的对话框。

要填充对话框,我们将使用以前制作的knockout模板。 然后,我们将创建一个到对话框的新绑定。 让我们 in !

var viewModel = {
 categories: {},
 variables: {},
 gotoReference: function (data) {
 var $dialog,
 //This will select the parent variable variableModel = viewModel.variables[data.value()]
 ;
 //Create a reference to the main viewModel variableModel.gotoReference = viewModel.gotoReference;
 $dialog = bootbox.dialog({
 title: data.value(),
 //By sending in the type, this would create a new reference modal if needed message: $("#" + variableModel.type).html(),
 buttons: {
 ok: {
 label: "Ok" }
 }
 });
 //Apply binding with our variableModel, but just for the dialog! ko.applyBindings(variableModel, $dialog.get(0));
 }
},
测试
  • 启动站点
  • 查找下拉框部分
  • 点击 @dropdown-link-active-bg的值
    • 一个dailog应该打开,然后名称 @component-active-bg 和值 @brand-primary
  • 点击 @brand-primary
    • 一个对话框应该以 @brand-primary 开头,它应该是一个实际的颜色
  • 更改颜色并关闭对话框
    • 这个变化应该通过网站来反映。

修复颜色微调器

就像你所见,这些引用变量的颜色微调器只是 black。 我们需要做一些事情。 首先,我们需要能够找到一个父颜色的真正值。 我们将通过一个函数 getColor 来实现。

/**
 * Finds out if a value is color
 * @function getColor
 * @param {string} name The name of this variable
 * @returns {string} The color
 */function getColor(name) {
 var value = viewModel.variables[name].value();
 if (value.substr(0, 1) === "@") {
 return getColor(value);
 }
 else {
 return value;
 }
}

接下来,我们需要一个返回这里颜色的ko.computed 变量,并设置 Spinner的值。 但是首先我们需要修复一些。 我将显示我们将在 color-reference 可见的情况下结束的代码。

viewModel.variables[name] = {
 type: ko.observable("color-reference"),
 value: ko.observable(value)
};
viewModel.variables[name].colorSpinnerValue=ko.computed(function () {
 return getColor(viewModel.variables[name].value());
});

我们需要在变量本身的实际创建之后设置 colorSpinnerValue。 否则,当我们试图进入它的时候,它还不存在。 但这不是问题。 这里代码将更改最后一个颜色中的所有引用字段。 最初,它将工作,但是我们在循环中进行。 因此,如果计算函数被收回,变量" name"的值将不再相同。

我们可以按 2种方式修复:

  • 创建一个名为 parseLine的函数并发送一行。 然后 name 变量将在该闭包中。
  • 在循环中创建闭合 inside。 ( 这将标志 jshint/jslint 抱怨它。)

尽管这不是正确的方法,我还是选择第二个作为简洁。

(function (name) {
 viewModel.variables[name] = {
 type: ko.observable("color-reference"),
 value: ko.observable(value)
 };
 viewModel.variables[name].colorSpinnerValue = ko.computed(function () {
 return getColor(viewModel.variables[name].value());
 });
})(name);

现在,我们仍然需要更改knockout绑定:

<divclass="col-xs-3"style="padding-left: 0;"><inputtype="color"class="form-control"data-bind="value: colorSpinnerValue"/></div>

Reperforming现在的测试应该反映所有颜色轮的变化。

结尾

我认为它需要更多的功能。 用户应该能够使用引用的变量对链接进行'中断'。 你可以通过命名变量的type() 来实现这一点,将立即将正常的颜色对话框转换为。

我们仍然需要处理变暗和淡化函数。

我也觉得没有选择的类别应该被抑制。 但我还是把这个交给你吧。

下一步是让用户能够下载文件来反映他的选择。


PAR  BOO  引导  Generator  Bootstrap  REF  
相关文章