Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature request ] Number slider #41

Open
martinandersen3d opened this issue Feb 28, 2020 · 2 comments
Open

[Feature request ] Number slider #41

martinandersen3d opened this issue Feb 28, 2020 · 2 comments

Comments

@martinandersen3d
Copy link

Wow! Just Awesome extension!

Feature: Press and hold down on the title to slide the number:
slider

For some time ago i was programming a css editor, I did not had the time to finish it. But I will add the code here for the slider, as inspiration:

My Code from late 2017.. can't remember what everything does :-D

<template>
  <div>
<!-- Start -->


<span @mousedown="start" class='noSelect labelText'>
{{propsDataName}}
</span>
<span>
    <input
            v-model="componentString" 
            :class="[ componentString.length > 21 ? 'inputWide' : '' ]"
            @keyup.up.capture.prevent.stop="textfieldPressUp"
            @keyup.down.prevent="textfieldPressDown"
            :title="propsDataTooltip"
            autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
            >
</span>
<span class='dropdownSpan'>
    <select v-model="dropdownSelected" class='dropdownSelect' @change="cons">
    <option v-for="(item, index) in dropdownItems" v-bind:value="item"> <!--  todo style="background-color:blue;" -->
        {{ item.val }}
    </option>
    </select>
</span>


<!-- End -->
  </div>
</template>

<script>
 var collect = require('collect.js');
export default {
props: {
    propsData: Object
},
data(){
        return{
                propsDataName:'',
                propsDataTooltip:'',
                mouseStartX:0,
                mouseStartY:0,
                mouseMoveX:0,
                mouseMoveY:0,
                mouseMoveTotalX:0,  /* user moves mostly between -100px and +100px,  so totally around 200px   */
                componentValue:25,
                componentString:"",
                componentArr:[],
                componentArrPos:0,
                componentIsNum:false,
                componentStartValue:25,
                componentUnit:"px",
                componentMin:-1000,    /* null or integer */
                componentMax:100000,  /* null or integer */
                dropdownSelected: '',
                dropdownItems: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ],
        };
}, //data
    methods: {
        start(e){
            this.increaseDecreeseValue(0, this.componentString)
            this.componentValue = parseInt(this.componentArr[0])

            this.componentStartValue = this.componentValue
            this.mouseMoveTotalX = 0
            var x = e.pageX;
            var y = e.pageY;
            this.mouseStartX=x
            this.mouseStartY=y
            window.addEventListener('mousemove',this.move);
            window.addEventListener('mouseup',this.end);
        },
        move(e){
             var x = e.pageX;
             var y = e.pageY;
             this.mouseMoveX=x
             this.mouseMoveY=y
             this.mouseMoveTotalX = -this.mouseStartX +x
             /* if a min or max value is defined */

                // Convert negative -30 numbers to positive
                var positiveNumber = Math.abs(this.mouseMoveTotalX)
                // y = (x*0.05)^2.1
                var potensFunction = Math.pow( (positiveNumber*0.05), 2.1 )

               // if 'mouseMoveTotalX' is a negative number, we will multiply 'potensFunction' with * -1
                if( Math.sign(this.mouseMoveTotalX) === -1 ){potensFunction = potensFunction * -1}
               
                var result = this.componentStartValue + potensFunction;
                
                // check value min and max settings and crop value.
                if(  result < this.componentMin ){ result = this.componentMin}
                if(  result>this.componentMax ){ result = this.componentMax}
                this.componentValue = parseInt(result)
                this.componentArr[0] = this.componentValue
                this.componentString = this.componentArr.join('')

        },//move
        end(){
            	 window.removeEventListener('mousemove',this.move);
            	 window.removeEventListener('mouseup',this.end);
        },//end
        cons(){
            	this.componentString  = this.dropdownSelected.val;
        },//cons
        textfieldPressUp(e){
            e.preventDefault();
            	// console.log(e.path[0].selectionStart);
        },//textfieldPressUp
        
        textfieldPressDown(e){
            e.preventDefault();
            	// console.log(e);
        },//textfieldPressUp
        
        increaseDecreeseValue(cursorPositionInt, str){
                    /** 
                    @param cursorPositionInt = integer
                    @param str = string 
                    @param addSubtractString = string
                    
                    */

                    function isNum(n) {
                    if(n ==="-"){return true}
                    return !isNaN(parseFloat(n)) && isFinite(n);
                    }
                    var cursor = cursorPositionInt;
                    var arr= str.toString().split('');
                    var temp ="";
                    var resActive=null
                    var res=[];
                    for (let i = 0; i < arr.length; i++) {
                            var n = arr[i]
                            var next = (i+1 < arr.length) ? arr[i+1] : '' 
                            var next_type = isNum(next); 
                            temp+=n
                            if(isNum(n) !==  next_type){
                                res.push(temp)
                                temp = ""
                            }
                            if(i+1 === arr.length){res.push(temp)}

                            if(cursor === i){resActive = res.length}
                            if(cursor === i && isNum(n) ===false){resActive = null}
                    }
                    // if(isNum( res[resActive] )){
                    // res[resActive] = parseInt(res[resActive]) + parseInt(addSubtract)
                    // }
                    var result =res.join('')
                    if(str.length > 0 &&  isNum(res[0])){
                        this.componentIsNum = true
                        this.componentPos =0
                        this.componentArr = res
                    }
                    else{
                        this.componentIsNum = false
                    }
        },

        
    },//methods  
    mounted(){
        this.propsDataName = this.propsData.id.replace("-", " ")
        this.propsDataTooltip = this.propsData.tooltip
        var opSplit = this.propsData.options.split("|")
        var collection = collect(opSplit)
        var i = 0
        var res = collection.map(function (theKey) {
           var tmp = {val:theKey, id: i}
           i++;
           return tmp;
        });
        // console.log(res.all());
        this.dropdownItems = res.all();
    } //mounted
}
</script>

<style scoped>

input{
    background-color: rgba(255,255,255, 0.5);
    border: 1px solid  rgba(0,0,0, 0.2);
    padding: 3px;
}

input:active,input:hover{
    background-color: white;
    border: 1px solid  rgba(0,0,0, 0.8);
    padding: 3px;
}
.inputWide{
    display: block;
    width: 250px !important;
}
.dropdownSpan{
    margin-left: -25px;
}
.dropdownSelect{
    width:21px;
    height: 24px;
    background-color:none;
}
.dropdownSelect:hover{
      border: 1px solid  rgba(0,0,0, 0.8);
}
.labelText{
    cursor: w-resize;
    font-size: 14px;
    padding: 3px;
    
    color:rgb(180,180,180);
    width:140px;
    padding-left: 16px;
    display: inline-block;
}
.labelText:hover{
    
    color:blue;
    background-color: rgba(255,255,255, 1);
}
.noSelect{
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
@martinandersen3d
Copy link
Author

More Jizz:

cssMixin.js


export const cssMixin = {

  data(){
    return{

      cssObj: [
        {   id: "background-attachment",
            group: "12Background",
            defaultText: "scroll",
            options: "scroll|fixed",
            type: "",
            tooltip: ""
          },
        {    id: "background-blend-mode",
            group: "12Background",
            defaultText: "",
            options: "normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity",
            type: "",
            tooltip: ""
          },
        {    id: "background-color",
            group: "12Background",
            defaultText: "transparent",
            options: "rgb(0,0,0)|#ffffff|red|rgba(0, 0, 0, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6)",
            type: "",
            tooltip: ""
          },
        {    id: "background-image",
            group: "12Background",
            defaultText: "none",
            options: "url('link.jpg')",
            type: "",
            tooltip: ""
          },
        {    id: "background-position",
            group: "12Background",
            defaultText: "0% 0%",
            options: "left center|left bottom|right top|right center|right bottom|center top|center center|center bottom|20% 20%|20px 20px",
            type: "",
            tooltip: "background-repeat:no-repeat;"
          },
        {    id: "background-repeat",
            group: "12Background",
            defaultText: "repeat",
            options: "repeat|repeat-x|repeat-y|no-repeat",
            type: "",
            tooltip: ""
          },
        {    id: "background-size",
            group: "12Background",
            defaultText: "",
            options: "auto|cover|contain|100px 100px|200px|50%|100% 100%",
            type: "",
            tooltip: "background-repeat:no-repeat;"
          },
        {    id: "background",
            group: "12Background",
            defaultText: "multiple values",
            options: "background-color|background-image|background-repeat|background-attachment|background-position",
            type: "",
            tooltip: ""
          },
        {    id: "border-collapse",
            group: "24Table",
            defaultText: "separate",
            options: "collapse|separate",
            type: "",
            tooltip: "table' and 'inline-table' elements"
          },
        {    id: "border-color",
            group: "15Border",
            defaultText: "multiple values",
            options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) |transparent",
            type: "",
            tooltip: ""
          },
        {    id: "border-radius",
            group: "15Border",
            defaultText: "",
            options: "3px|5px|50%",
            type: "",
            tooltip: ""
          },
        {    id: "border-spacing",
            group: "24Table",
            defaultText: "0",
            options: "0px 0px",
            type: "",
            tooltip: "table' and 'inline-table' elements"
          },
        {    id: "border-style",
            group: "15Border",
            defaultText: "",
            options: "none|hidden|dotted|dashed|solid|double |groove|ridge|inset|outset",
            type: "",
            tooltip: ""
          },
        {    id: "border-width",
            group: "15Border",
            defaultText: "multiple values",
            options: "2px|3px 3px|1px 3px 6px 9px",
            type: "",
            tooltip: ""
          },
        {    id: "border",
            group: "15Border",
            defaultText: "multiple values",
            options: "1px solid #green",
            type: "",
            tooltip: ""
          },
        {    id: "bottom",
            group: "18Position",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "box-shadow",
            group: "22Fx",
            defaultText: "",
            options: "10px 5px 5px black",
            type: "",
            tooltip: "maybe you are looking for 'text-shadow'?"
          },
        {    id: "box-sizing",
            group: "18Position",
            defaultText: "",
            options: "content-box|border-box",
            type: "",
            tooltip: ""
          },
        {    id: "caption-side",
            group: "24Table",
            defaultText: "top",
            options: "top|bottom",
            type: "",
            tooltip: ""
          },
        {    id: "clear",
            group: "18Position",
            defaultText: "none",
            options: "none|left|right|both",
            type: "",
            tooltip: ""
          },
        {    id: "clip-path",
            group: "18Position",
            defaultText: "auto",
            options: "rect(0px,50px,50px,0px)|rect(1px, 10em, 3rem, 2ch)|auto|fill-box|stroke-box|view-box|margin-box|border-box|padding-box|content-box|inset(100px 50px)|circle(50px at 0 100px)|polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)|padding-box circle(50px at 0 100px)",
            type: "",
            tooltip: "Crop a image. Note: The clip property does not work if 'overflow:visible'. Applies to absolutely positioned elements Try position: absolute;"
          },
        {    id: "color",
            group: "10Font",
            defaultText: "depends on user agent",
            options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) ",
            type: "",
            tooltip: ""
          },
        {    id: "column-count",
            group: "10Font",
            defaultText: "",
            options: "2|3|4",
            type: "",
            tooltip: ""
          },
        {    id: "column-gap",
            group: "10Font",
            defaultText: "",
            options: "20px",
            type: "",
            tooltip: ""
          },
        {    id: "content",
            group: "25Beforeafter",
            defaultText: "normal",
            options: "",
            type: "",
            tooltip: ""
          },
        {    id: "counter-increment",
            group: "10Font",
            defaultText: "none",
            options: "",
            type: "",
            tooltip: ""
          },
        {    id: "counter-reset",
            group: "10Font",
            defaultText: "none",
            options: "",
            type: "",
            tooltip: ""
          },
        {    id: "cursor",
            group: "10Font",
            defaultText: "auto",
            options: "crosshair|default|pointer|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress|url('link.jpg')",
            type: "",
            tooltip: ""
          },
        {    id: "direction",
            group: "10Font",
            defaultText: "ltr",
            options: "ltr|rtl",
            type: "",
            tooltip: "unicode-bidi: bidi-override;"
          },
        {    id: "display",
            group: "18Position",
            defaultText: "inline",
            options: "inline|block|flex|grid|list-item|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption",
            type: "",
            tooltip: ""
          },
        {    id: "empty-cells",
            group: "24Table",
            defaultText: "show",
            options: "show|hide",
            type: "",
            tooltip: ""
          },
        {    id: "float",
            group: "18Position",
            defaultText: "none",
            options: "left|right",
            type: "",
            tooltip: ""
          },
        {    id: "font-family",
            group: "10Font",
            defaultText: "depends on user agent",
            options: "",
            type: "",
            tooltip: ""
          },
        {    id: "font-size",
            group: "10Font",
            defaultText: "medium",
            options: "8px|9px|10px|11px|12px|14px|18px|24px|30px|36px|28px|60px|72px|96px|0.8em|1.6rem|120%|medium|xx-small|x-small|small|large|x-large|xx-large| smaller|larger",
            type: "",
            tooltip: ""
          },
        {    id: "font-style",
            group: "10Font",
            defaultText: "normal",
            options: "normal|italic|oblique",
            type: "",
            tooltip: ""
          },
        {    id: "font-variant",
            group: "10Font",
            defaultText: "normal",
            options: "normal|small-caps",
            type: "",
            tooltip: ""
          },
        {    id: "font-weight",
            group: "10Font",
            defaultText: "normal",
            options: "normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900",
            type: "",
            tooltip: ""
          },
        {    id: "font",
            group: "10Font",
            defaultText: "multiple values",
            options: "font-style|font-variant|font-weight|font-size|font-family|caption|icon|menu|message-box|small-caption|status-bar",
            type: "",
            tooltip: ""
          },
        {    id: "height",
            group: "17Height",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "left",
            group: "18Position",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "letter-spacing",
            group: "10Font",
            defaultText: "normal",
            options: "normal|14px",
            type: "",
            tooltip: ""
          },
        {    id: "line-height",
            group: "10Font",
            defaultText: "normal",
            options: "14px|50%",
            type: "",
            tooltip: ""
          },
        {    id: "list-style-image",
            group: "23List",
            defaultText: "none",
            options: "url('link.jpg')",
            type: "",
            tooltip: "elements with 'display: list-item'"
          },
        {    id: "list-style-position",
            group: "23List",
            defaultText: "outside",
            options: "inside|outside",
            type: "",
            tooltip: "elements with 'display: list-item'"
          },
        {    id: "list-style-type",
            group: "23List",
            defaultText: "disc",
            options: "disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha",
            type: "",
            tooltip: "elements with 'display: list-item'"
          },
        {    id: "list-style",
            group: "23List",
            defaultText: "multiple values",
            options: "list-style-type|list-style-position|list-style-image",
            type: "",
            tooltip: "elements with 'display: list-item'"
          },
        {    id: "margin",
            group: "13Margin",
            defaultText: "multiple values",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: "all elements except elements with table display types other than table-caption, table and inline-table"
          },
        {    id: "margin-left",
            group: "13Margin",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "margin-right",
            group: "13Margin",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "margin-top",
            group: "13Margin",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "margin-bottom",
            group: "13Margin",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "max-height",
            group: "17Height",
            defaultText: "none",
            options: "14px|50%",
            type: "",
            tooltip: "all elements but non-replaced inline elements, table columns, and column groups"
          },
        {    id: "max-width",
            group: "16Width",
            defaultText: "none",
            options: "14px|50%",
            type: "",
            tooltip: "all elements but non-replaced inline elements, table rows, and row groups"
          },
        {    id: "min-height",
            group: "17Height",
            defaultText: "0",
            options: "14px|50%",
            type: "",
            tooltip: "all elements but non-replaced inline elements, table columns, and column groups"
          },
        {    id: "min-width",
            group: "16Width",
            defaultText: "0",
            options: "14px|50%",
            type: "",
            tooltip: "all elements but non-replaced inline elements, table rows, and row groups"
          },
        {    id: "opacity",
            group: "10Font",
            defaultText: "",
            options: "20%",
            type: "",
            tooltip: ""
          },
        {    id: "outline-color",
            group: "22Fx",
            defaultText: "invert",
            options: "rgb(255,0,0)|#FF0000|red|rgba(201, 76, 76, 0.6)|hsl(89, 43%, 51%)|hsla(89, 43%, 51%, 0.6) |invert",
            type: "",
            tooltip: ""
          },
        {    id: "outline-style",
            group: "22Fx",
            defaultText: "none",
            options: "hidden|dotted|dashed|solid|double|groove|ridge|inset|outset",
            type: "",
            tooltip: ""
          },
        {    id: "outline-width",
            group: "22Fx",
            defaultText: "medium",
            options: "5px",
            type: "",
            tooltip: ""
          },
        {    id: "outline",
            group: "22Fx",
            defaultText: "multiple values",
            options: "outline-color|outline-style|outline-width",
            type: "",
            tooltip: ""
          },
        {    id: "overflow",
            group: "18Position",
            defaultText: "visible",
            options: "visible|hidden|scroll|auto",
            type: "",
            tooltip: ""
          },
        {    id: "padding",
            group: "14Padding",
            defaultText: "multiple values",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "padding-left",
            group: "14Padding",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "padding-right",
            group: "14Padding",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "padding-top",
            group: "14Padding",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "padding-bottom",
            group: "14Padding",
            defaultText: "",
            options: "1px|2px|3px|4px|5px|10px|16px|22px|32px|48px|72px|100px",
            type: "",
            tooltip: ""
          },
        {    id: "page-break-after",
            group: "10Font",
            defaultText: "auto",
            options: "auto|always|avoid|left|right",
            type: "",
            tooltip: ""
          },
        {    id: "page-break-before",
            group: "10Font",
            defaultText: "auto",
            options: "auto|always|avoid|left|right",
            type: "",
            tooltip: ""
          },
        {    id: "page-break-inside",
            group: "10Font",
            defaultText: "auto",
            options: "avoid|auto",
            type: "",
            tooltip: ""
          },
        {    id: "position",
            group: "18Position",
            defaultText: "static",
            options: "static|relative|absolute|fixed",
            type: "",
            tooltip: ""
          },
        {    id: "quotes",
            group: "10Font",
            defaultText: "depends on user agent",
            options: "",
            type: "",
            tooltip: ""
          },
        {    id: "resize",
            group: "18Position",
            defaultText: "",
            options: "horizontal|vertical|both",
            type: "",
            tooltip: ""
          },
        {    id: "right",
            group: "18Position",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "table-layout",
            group: "24Table",
            defaultText: "auto",
            options: "auto|fixed",
            type: "",
            tooltip: ""
          },
        {    id: "text-align",
            group: "10Font",
            defaultText: "a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'",
            options: "left|right|center|justify",
            type: "",
            tooltip: ""
          },
        {    id: "text-decoration",
            group: "10Font",
            defaultText: "none",
            options: "none|underline|overline|line-through|blink",
            type: "",
            tooltip: ""
          },
        {    id: "text-indent",
            group: "10Font",
            defaultText: "0",
            options: "14px|50%",
            type: "",
            tooltip: ""
          },
        {    id: "text-shadow",
            group: "10Font",
            defaultText: "",
            options: "5px 5px 5px #CF5C2B",
            type: "",
            tooltip: ""
          },
        {    id: "text-transform",
            group: "10Font",
            defaultText: "none",
            options: "capitalize|uppercase|lowercase",
            type: "",
            tooltip: ""
          },
        {    id: "top",
            group: "18Position",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "unicode-bidi",
            group: "10Font",
            defaultText: "normal",
            options: "normal|embed|bidi-override",
            type: "",
            tooltip: "direction: rtl;"
          },
        {    id: "vertical-align",
            group: "10Font",
            defaultText: "baseline",
            options: "baseline|sub|super|top|text-top|middle|bottom|text-bottom|50%|14px",
            type: "",
            tooltip: "inline-level and 'table-cell' elements"
          },
        {    id: "visibility",
            group: "18Position",
            defaultText: "visible",
            options: "visible|hidden|collapse",
            type: "",
            tooltip: ""
          },
        {    id: "white-space",
            group: "10Font",
            defaultText: "normal",
            options: "normal|pre|nowrap|pre-wrap|pre-line",
            type: "",
            tooltip: ""
          },
        {    id: "width",
            group: "16Width",
            defaultText: "auto",
            options: "14px|50%|auto",
            type: "",
            tooltip: ""
          },
        {    id: "word-spacing",
            group: "10Font",
            defaultText: "normal",
            options: "normal|14px",
            type: "",
            tooltip: ""
          },
        {    id: "z-index",
            group: "18Position",
            defaultText: "auto",
            options: "20",
            type: "",
            tooltip: ""
          },
        {    id: "align-content",
            group: "19Flex",
            defaultText: "stretch",
            options: "stretch|center|flex-start|flex-end|space-between|space-around",
            type: "",
            tooltip: "This property has no effect on single line flexible boxes. The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines."
          },
        {    id: "align-items",
            group: "19Flex",
            defaultText: "stretch",
            options: "stretch|center|flex-start|flex-end|baseline",
            type: "",
            tooltip: ""
          },
        {    id: "flex-basis",
            group: "19Flex",
            defaultText: "auto",
            options: "16px|24px|36px|25%|33%|50%| 66%|75%",
            type: "",
            tooltip: "Specifies the initial length of a flexible item"
          },
        {    id: "justify-content",
            group: "19Flex",
            defaultText: "flex-start",
            options: "flex-start|flex-end|center|space-between|space-around",
            type: "",
            tooltip: ""
          },
        {    id: "flex-direction",
            group: "20Flex Container",
            defaultText: "row",
            options: "row|row-reverse|column|column-reverse",
            type: "",
            tooltip: "Specifies the direction of the flexible items"
          },
        {    id: "flex-flow",
            group: "20Flex Container",
            defaultText: "row nowrap",
            options: "row nowrap|row wrap|row wrap-reverse|row-reverse nowrap|row-reverse wrap|row-reverse wrap-reverse|column nowrap|column wrap|column wrap-reverse|column-reverse nowrap|column-reverse wrap|column-reverse wrap-reverse",
            type: "",
            tooltip: "A shorthand property for the flex-direction and the flex-wrap properties"
          },
        {    id: "flex-wrap",
            group: "20Flex Container",
            defaultText: "nowrap",
            options: "nowrap|wrap|wrap-reverse",
            type: "",
            tooltip: ""
          },
        {    id: "align-self",
            group: "21Flex Item",
            defaultText: "auto",
            options: "auto|stretch|center|flex-start|flex-end|baseline",
            type: "",
            tooltip: ""
          },
        {    id: "flex",
            group: "21Flex Item",
            defaultText: "0 1 auto",
            options: "auto|2|2|10em|30px|1 30px|2 2|2 2 10%",
            type: "",
            tooltip: "The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.\nThe flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties."
          },
        {    id: "order",
            group: "21Flex Item",
            defaultText: "0",
            options: "1|2|3|4|5|6|7|8|9|10",
            type: "",
            tooltip: "number: Default value 0. Specifies the order for the flexible item"
          },
        {    id: "flex-grow",
            group: "21Flex Item",
            defaultText: "0",
            options: "1|2|3|4|5",
            type: "",
            tooltip: "The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. The flex-grow property is specified as a single number."
          },
        {    id: "flex-shrink",
            group: "21Flex Item",
            defaultText: "1",
            options: "1|2|3|4|5",
            type: "",
            tooltip: "The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container."
          }
        ]


      };//return
  }, //data
       

} //export



  /**

  var collect = require('collect.js');

  const collection = collect(cssObj);
 
  const unique = collection.map(function (item) {
    return item.group;
  }).unique().sort();
  unique.all();

  console.log(  unique.all() );

   'font',​​​​​
   'background',​​​​​
   'margin',​​​​​
   'padding',​​​​​
   'border',​​​​​
   ​​​​​'width',​​​​​
   'height',
   ​​​​​  'position',​​​​​​​​​​  
   ​​​​​  'position_flex',​​​​​
   ​​​​​  'position_flex_item' 
   ​​​​​  'position_flex_container',​​​​​
   ​​​​​  'list',​​​​​
   ​​​​​  'fx',​​​​​
   ​​​​​  'table',​​​​​
   ​​​​​  'beforeafter',​​​​​

   '11Font',​​​​​
   ​​​​​  '20Flex Container',​​​​​
   ​​​​​  '21Flex Item',​​​​​
​​​​​  '22Fx',​​​​​
​​​​​  '23List',​​​​​
​​​​​  '24Table',​​​​​
​​​​​  '25Beforeafter',​​​​​

​​​​​  '12Background',​​​​​
​​​​​  '13Margin',​​​​​
​​​​​  '14Padding',​​​​​
​​​​​  '15Border',​​​​​
​​​​​  '16Width',​​​​​
​​​​​  '17Height',​​​​​
​​​​​  '18Position',​​​​​
​​​​​  '19Flex' 
​​​​​  
​​​​​  

​​​​​  

   */

cssView.vue

<template><div class='cssContainer'>
<!-- Start -->
    <!--  
    <div @click="this.asdsa = !this.asdsa">hey</div>
    <div v-if="this.asdsa">sdfsdfsd</div>
-->
    <div v-for="(groupItem, groupIndex) in groups" >
        <div @click="groupsShow[groupIndex] =! groupsShow[groupIndex]" class='cssTitle'>{{groupItem.substring(2)}}
        </div>

        
            <div v-for="(item, index) in sameGroup(groupItem)" v-show=" groupsShow[groupIndex] ">
               
                <labelSlider :propsData="item"></labelSlider>
            </div>   

  
    
    </div>


<!-- END -->
</div></template>

<script>

import {cssMixin} from './cssMixin.js';
import collect from 'collect.js'

export default {
  mixins: [cssMixin],
data(){
           return{
               groups:'',
               groupsShow:[true,true,true,true,true,true,true,true,true,true,true,true,true,true,true]
           };
}, //data
        methods: {
            sameGroup(str){
                const collection = collect(this.cssObj);
                const filtered = collection.filter(function (value, key) {
                    return value.group == str;
                });
                var result=filtered.all();
                return result;
            }
        },//methods  

  mounted(){
    const collection = collect(this.cssObj);
    const unique = collection.map(function (item) {
      return item.group;
    }).unique().sort();
    this.groups = unique.all();


  }
}
</script>

<style scoped>
.cssContainer{
    overflow-y: scroll;
    height: 800px;
}
.cssTitle{
    color:rgb(180,180,180);
    font-weight: bold;
    margin-top:16px;
}
</style>

@martinandersen3d
Copy link
Author

And the insane spreadsheet :D

(..from late 2017)

https://docs.google.com/spreadsheets/d/1vlOe5SVWqJ9BNt818jZ_bqJRo3-GTjOLfGY9HsdBE6A/edit?usp=sharing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@martinandersen3d