tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update Class Manager

pull/14/head
Artur Arseniev 10 years ago
parent
9b03663209
commit
26927819e6
8 changed files with 111 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 24
      dist/grapes.min.js
  3. 9
      src/class_manager/config/config.js
  4. 16
      src/class_manager/template/classTags.html
  5. 26
      src/class_manager/view/ClassTagsView.js
  6. 48
      styles/css/main.css
  7. 19
      styles/scss/main.scss
  8. 14
      test/specs/class_manager/view/ClassTagsView.js

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

24
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

9
src/class_manager/config/config.js
View File

@ -11,9 +11,14 @@ define(function () {
label: 'Classes',
// Label for states
statesLabel: 'State',
statesLabel: '- State -',
states: ['hover', 'active'/*click*/, 'nth-of-type(2n)'/*even*/]
// States
states: [
{ name: 'hover', label: 'Hover' },
{ name: 'active', label: 'Click' },
{ name: 'nth-of-type(2n)', label: 'Even/Odd' }
],
};
});

16
src/class_manager/template/classTags.html
View File

@ -1,8 +1,20 @@
<div id="<%= pfx %>up">
<div id="<%= pfx %>label"><%= label %></div>
<div id="<%= pfx %>status-c">
<%= statesLabel %>
<span id="<%= pfx %>input-c"></span>
<!--
<span id="<%= pfx %>input-c">
<div class="<%= pfx %>field <%= pfx %>select">
<span id="<%= pfx %>input-holder">
<select id="<%= pfx %>states">
<option value=""><%= statesLabel %></option>
</select>
</span>
<div class="<%= pfx %>sel-arrow">
<div class="<%= pfx %>d-s-arrow"></div>
</div>
</div>
</span>
-->
</div>
</div>
<div id="<%= pfx %>tags-field">

26
src/class_manager/view/ClassTagsView.js
View File

@ -15,9 +15,12 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.className = this.pfx + 'tags';
this.addBtnId = this.pfx + 'add-tag';
this.newInputId = this.pfx + 'new';
this.stateInputId = this.pfx + 'states';
this.states = this.config.states || [];
this.events['click #' + this.addBtnId] = 'startNewTag';
this.events['blur #' + this.newInputId] = 'endNewTag';
this.events['keyup #' + this.newInputId] = 'onInputKeyUp';
this.events['change #' + this.stateInputId] = 'stateChanged';
this.target = this.config.target;
@ -29,6 +32,18 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.delegateEvents();
},
/**
* Create select input with states
* @return {string} String of options
*/
getStateOptions: function(){
var strInput = '';
for(var i = 0; i < this.states.length; i++){
strInput += '<option value="' + this.states[i].name + '">' + this.states[i].label + '</option>';
}
return strInput;
},
/**
* Add new model
* @param {Object} model
@ -76,6 +91,15 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.compTarget = this.target.get('selectedComponent');
var models = this.compTarget ? this.compTarget.get('classes').models : [];
this.collection.reset(models);
//TODO no classes, hide states
},
/**
* Triggered when select with states is changed
* @param {Object} e
*/
stateChanged: function(e){
console.log(this.$states.val());
},
/**
@ -157,6 +181,8 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.$input = this.$el.find('input#' + this.newInputId);
this.$addBtn = this.$el.find('#' + this.addBtnId);
this.$classes = this.$el.find('#' + this.pfx + 'tags-c');
this.$states = this.$el.find('#' + this.stateInputId);
this.$states.append(this.getStateOptions());
this.renderClasses();
this.$el.attr('class', this.className);
return this;

48
styles/css/main.css
View File

@ -2967,63 +2967,63 @@ ol.example li.placeholder:before {
cursor: pointer; }
.wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
margin: 5px 5px 2px 0; }
.wte-sm-sector .wte-sm-field, .wte-clm-tags .wte-sm-field {
.wte-sm-sector .wte-sm-field, .wte-clm-tags .wte-sm-field, .wte-sm-sector .wte-clm-field, .wte-clm-tags .wte-clm-field {
width: 100%;
position: relative; }
.wte-sm-sector .wte-sm-field input, .wte-clm-tags .wte-sm-field input {
.wte-sm-sector .wte-sm-field input, .wte-clm-tags .wte-sm-field input, .wte-sm-sector .wte-clm-field input, .wte-clm-tags .wte-clm-field input {
box-sizing: border-box;
color: #d5d5d5;
background: none;
border: none;
padding: 3px 21px 3px 0;
width: 100%; }
.wte-sm-sector .wte-sm-field select, .wte-clm-tags .wte-sm-field select {
.wte-sm-sector .wte-sm-field select, .wte-clm-tags .wte-sm-field select, .wte-sm-sector .wte-clm-field select, .wte-clm-tags .wte-clm-field select {
background: none;
border: none;
color: #d5d5d5;
color: transparent;
width: 100%;
padding: 2px 0;
padding: 2px 10px 2px 0;
text-shadow: 0 0 0 #d5d5d5;
position: relative;
z-index: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.wte-sm-sector .wte-sm-field select::-ms-expand, .wte-clm-tags .wte-sm-field select::-ms-expand {
.wte-sm-sector .wte-sm-field select::-ms-expand, .wte-clm-tags .wte-sm-field select::-ms-expand, .wte-sm-sector .wte-clm-field select::-ms-expand, .wte-clm-tags .wte-clm-field select::-ms-expand {
display: none; }
.wte-sm-sector .wte-sm-field .wte-sm-unit, .wte-clm-tags .wte-sm-field .wte-sm-unit {
.wte-sm-sector .wte-sm-field .wte-sm-unit, .wte-clm-tags .wte-sm-field .wte-sm-unit, .wte-sm-sector .wte-clm-field .wte-sm-unit, .wte-clm-tags .wte-clm-field .wte-sm-unit {
position: absolute;
right: 10px;
top: 3px;
font-size: 10px;
color: #b1b1b1;
cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-clm-tags .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-clm-tags .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-clm-field .wte-sm-int-arrows, .wte-clm-tags .wte-clm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow, .wte-sm-sector .wte-clm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-clm-field .wte-sm-sel-arrow, .wte-sm-sector .wte-sm-field .wte-clm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-clm-sel-arrow, .wte-sm-sector .wte-clm-field .wte-clm-sel-arrow, .wte-clm-tags .wte-clm-field .wte-clm-sel-arrow {
height: 100%;
width: 9px;
position: absolute;
right: 0;
top: 0;
cursor: ns-resize; }
.wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow, .wte-sm-sector .wte-clm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-clm-field .wte-sm-sel-arrow {
cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-clm-field .wte-sm-u-arrow, .wte-clm-tags .wte-clm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
position: absolute;
height: 0;
width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-clm-field .wte-sm-u-arrow, .wte-clm-tags .wte-clm-field .wte-sm-u-arrow {
border-bottom: 4px solid #b1b1b1;
top: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
border-top: 4px solid #b1b1b1;
bottom: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
bottom: 7px; }
.wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
.wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
background-color: #333333;
/*353535*/
border: 1px solid #292929;
@ -3034,35 +3034,35 @@ ol.example li.placeholder:before {
border-radius: 2px;
box-sizing: border-box;
padding: 0 5px; }
.wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select {
.wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select {
padding: 0; }
.wte-sm-sector .wte-sm-field.wte-sm-select select, .wte-clm-tags .wte-sm-field.wte-sm-select select {
.wte-sm-sector .wte-sm-field.wte-sm-select select, .wte-clm-tags .wte-sm-field.wte-sm-select select, .wte-sm-sector .wte-sm-select.wte-clm-field select, .wte-clm-tags .wte-sm-select.wte-clm-field select, .wte-sm-sector .wte-clm-select select, .wte-clm-tags .wte-clm-select select {
height: 20px; }
.wte-sm-sector .wte-sm-field.wte-sm-select option, .wte-clm-tags .wte-sm-field.wte-sm-select option {
.wte-sm-sector .wte-sm-field.wte-sm-select option, .wte-clm-tags .wte-sm-field.wte-sm-select option, .wte-sm-sector .wte-sm-select.wte-clm-field option, .wte-clm-tags .wte-sm-select.wte-clm-field option, .wte-sm-sector .wte-clm-select option, .wte-clm-tags .wte-clm-select option {
margin: 5px 0; }
.wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
.wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
background-color: transparent;
border: 1px solid #333333; }
.wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list {
.wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field {
width: auto;
padding: 0;
overflow: hidden;
float: left; }
.wte-sm-sector .wte-sm-field.wte-sm-list input, .wte-clm-tags .wte-sm-field.wte-sm-list input {
.wte-sm-sector .wte-sm-field.wte-sm-list input, .wte-clm-tags .wte-sm-field.wte-sm-list input, .wte-sm-sector .wte-sm-list.wte-clm-field input, .wte-clm-tags .wte-sm-list.wte-clm-field input {
display: none; }
.wte-sm-sector .wte-sm-field.wte-sm-list label, .wte-clm-tags .wte-sm-field.wte-sm-list label {
.wte-sm-sector .wte-sm-field.wte-sm-list label, .wte-clm-tags .wte-sm-field.wte-sm-list label, .wte-sm-sector .wte-sm-list.wte-clm-field label, .wte-clm-tags .wte-sm-list.wte-clm-field label {
cursor: pointer;
padding: 5px;
display: block; }
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label {
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-sm-sector .wte-sm-list.wte-clm-field .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-list.wte-clm-field .wte-sm-radio:checked + label {
background-color: #5b5b5b;
/*5b5b5b*/ }
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-icon {
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-sm-sector .wte-sm-list.wte-clm-field .wte-sm-icon, .wte-clm-tags .wte-sm-list.wte-clm-field .wte-sm-icon {
background-repeat: no-repeat;
background-position: center;
text-shadow: none;
line-height: normal; }
.wte-sm-sector .wte-sm-field.wte-sm-integer select, .wte-clm-tags .wte-sm-field.wte-sm-integer select, .wte-clm-tags #wte-clm-tags-field select {
.wte-sm-sector .wte-sm-field.wte-sm-integer select, .wte-clm-tags .wte-sm-field.wte-sm-integer select, .wte-sm-sector .wte-sm-integer.wte-clm-field select, .wte-clm-tags .wte-sm-integer.wte-clm-field select, .wte-clm-tags #wte-clm-tags-field select {
width: auto;
padding: 0;
color: transparent; }
@ -3208,7 +3208,7 @@ ol.example li.placeholder:before {
font-size: 11px;
padding: 10px 5px; }
.wte-clm-tags #wte-clm-label {
padding-bottom: 5px;
padding: 7px 0;
float: left; }
.wte-clm-tags #wte-clm-status-c {
float: right; }

19
styles/scss/main.scss
View File

@ -478,7 +478,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
background: none; border: none;
color: $inputFontColor;
color: transparent;
width: 100%; padding: 2px 0;
width: 100%; padding: 2px 10px 2px 0;
text-shadow: 0 0 0 $inputFontColor;
position: relative;
z-index:1;
@ -495,7 +495,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
cursor:pointer;
}
.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow{
.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow, .#{$clm-prefix}sel-arrow{
height: 100%; width: 9px;
position: absolute;
right: 0; top: 0;
@ -503,7 +503,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
.#{$sm-prefix}sel-arrow{ cursor:pointer }
.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{
position: absolute;
height: 0; width: 0;
border-left: 3px solid transparent;
@ -515,11 +515,11 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border-bottom: 4px solid $arrowColor;
top: 4px;
}
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{
border-top: 4px solid $arrowColor;
bottom: 4px;
}
.#{$sm-prefix}d-s-arrow{ bottom: 7px; }
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite {
background-color: darken($mainDkColor, 2.5%);/*353535*/
@ -728,13 +728,20 @@ $addBtnBg: lighten($mainDkColor, 10%);
$paddElClm: 5px 6px;
$tagBg: #804f7b;
.#{$clm-prefix}field{
@extend .#{$sm-prefix}field
}
.#{$clm-prefix}select{
@extend .#{$sm-prefix}field.#{$sm-prefix}select;
}
.#{$clm-prefix}tags{
@extend .#{$sm-prefix}sector;
font-size: 11px;
padding: 10px 5px;
##{$clm-prefix}label{
padding-bottom: 5px;
padding: 7px 0;
float:left;
}
##{$clm-prefix}status-c{

14
test/specs/class_manager/view/ClassTagsView.js
View File

@ -124,6 +124,17 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
this.$tags.children().first().find('#tag-label').html().should.equal('test');
});
it("Output correctly state options", function() {
var view = new ClassTagsView({
config : {
target: this.target,
states: [ { name: 'testName', label: 'testLabel' } ],
},
collection: this.coll
});
view.getStateOptions().should.equal('<option value="testName">testLabel</option>');
});
describe('Should be rendered correctly', function() {
it('Has label', function() {
this.view.$el.find('#label').should.have.property(0);
@ -134,6 +145,9 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
it('Has add button', function() {
this.view.$el.find('#add-tag').should.have.property(0);
});
it('Has states input', function() {
this.view.$el.find('#states').should.have.property(0);
});
});
});

Write Preview
Loading…
Cancel
Save