1
\$\begingroup\$

so, I am pretty new to this game, and am trying to understand javaScript way better than I currently do. I have this block of code, if it is too long to read, then just skip to my question at the bottom...

    function createCSSRule(selectorName, necessaryProperties){
    //add class to control all divs
    var propertyNameBases, propertyPrefixes, propertyValues, propertySuffixes;
    var cssString = selectorName + "{\n";
    for (var i9 = 0; i9 < necessaryProperties.length; ++i9){
        switch (selectorName){
            case "."+options.allPictures:
                switch(necessaryProperties[i9]){
                    case "position":
                        propertyNameBases = ["position"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["absolute"],
                        propertySuffixes    = [""];
                        break;
                    case "height":
                        propertyNameBases = ["height"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["100%"],
                        propertySuffixes    = [""];
                        break;
                    case "width":
                        propertyNameBases = ["width"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["100%"],
                        propertySuffixes    = [""];
                        break;
                    case "background":
                        propertyNameBases = ["background"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["scroll","#fff","50% 50%","no-repeat","cover"],
                        propertySuffixes    = ["-attachment","-color","-position","-repeat","-size"];
                        break;
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,options.threeDStyle,"translate3d("+options.translate3dpx+")"],
                        propertySuffixes    = ["-origin","-style",""];
                        break;
                    case "transition":
                        propertyNameBases = ["transition"],
                        propertyPrefixes    = ["", "-webkit-"],
                        propertyValues      = [options.transitionLength + "ms", options.transitionPath, "all"],
                        propertySuffixes    = ["-duration","-timing-function","-property"]; //-delay"];                 
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
        case "."+options.currentPic:
            switch(necessaryProperties[i9]){
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,"translate3d(0px, 0px, 0px)"],
                        propertySuffixes    = ["-origin",""];
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
        case "."+options.currentPic+"."+options.picAfterCurrent:
            switch(necessaryProperties[i9]){
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,"translate3d("+options.negativeTranslate3dpx+")"],
                        propertySuffixes    = ["-origin",""];
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
            default:
                console.log("wait a second");
                break;
        }
        //name the selector
        //iterate through properties
        for (i10 = 0; i10 < propertyNameBases.length; i10++){
            //iterate through suffixes and value pairs
            for (var i11 = 0; i11 < propertyValues.length; i11++){
                //iterate through prefixes
                if(propertyValues !== false){
                    for (var i12 = 0; i12 < propertyPrefixes.length; i12++){
                        cssString = cssString+" "+propertyPrefixes[i12]+propertyNameBases[i10]+propertySuffixes[i11]+": "+propertyValues[i11]+";\n"
                    }
                }
            }
        }
    }
var forAllPictures = ["position","height","width","background","transition","transform"];   
var forCurrentPic = ["transform"];
var forpicAfterCurrent = ["transform"];
createCSSRule("."+options.allPictures, forAllPictures);
createCSSRule("."+options.currentPic, forCurrentPic);
createCSSRule("."+options.currentPic+"."+options.picAfterCurrent, forpicAfterCurrent);

basically, what is going to happen is I am going to pass a string (which is in a combination of variables) to the first parameter, and an array to the second. The first parameter acts as my class name, and the second parameter acts as my array of necessary css properties. I have included the output below so you can get a simple understanding of what I am going for. Each array inside of the if statements is used by the i 's in each for loop to output a string.

Each switch statement sets a specific variable and then 3 for-loops take over concatenating a very long string, which happens to be the css below

.slideShowPics{
    position: absolute;
    height: 100%;
    width: 100%;
    background-attachment: scroll;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transition-duration: 5000ms;
    -webkit-transition-duration: 5000ms;
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-property: all;
    -webkit-transition-property: all;
    transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform-style: flat;
    -moz-transform-style: flat;
    -webkit-transform-style: flat;
    transform: translate3d(-640px, 0px, 0px);
    -moz-transform: translate3d(-640px, 0px, 0px);
    -webkit-transform: translate3d(-640px, 0px, 0px);
}
.currentSlideShowPic{
    transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.currentSlideShowPic.movingOut{
    transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform: translate3d(640px, 0px, 0px);
    -moz-transform: translate3d(640px, 0px, 0px);
    -webkit-transform: translate3d(640px, 0px, 0px);
}

I would love for someone to suggest an easier way to do this.

I do not feel like I am using this language correctly. If there is anyone out there who has a better idea than what I am currently using, I would love to hear it.

Like I said, I am still learning.

I feel like I should be able to do this with an object, I just have no idea what I am doing when it comes to objects. If anyone has any articles that are written in clean everyday vernacular, or at least some really good examples, I would appreciate that, otherwise your own examples/explainations would be most appreciated. If, of course, I am able to do this with an object...

\$\endgroup\$
2
  • \$\begingroup\$ why do you build the properties strings programmatically, though they will always be the same ? why not just store already built strings and pick the ones you need ? \$\endgroup\$
    – m_x
    Oct 22 '13 at 7:09
  • \$\begingroup\$ oh, did not see that some have parameters. \$\endgroup\$
    – m_x
    Oct 22 '13 at 7:12
6
\$\begingroup\$

It seems like you are using JavaScript to programmatically change the CSS of your images.

The better approach would be to create all the CSS classes in a CSS file and then just changing the className to that of your CSS class.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Seconded. The point of CSS is to separate the presentation aspects from the code. Theoretically, the CSS should be under the control of the web designers, not programmers. The code should just set classes on elements to activate the relevant rules. \$\endgroup\$ Oct 22 '13 at 10:02
  • \$\begingroup\$ in this case, this is exactly what I am doing. I am slowly integrating (almost) total control through the plugin input parameters. \$\endgroup\$ Oct 22 '13 at 14:32
  • 1
    \$\begingroup\$ Are you sure? Do you have one separate file for all of your css classes and another javascript file with your function? It seems to me as if you are using javascript to programmatically create and inline all of the css \$\endgroup\$
    – Max
    Oct 22 '13 at 16:28
1
\$\begingroup\$

You are setting the same sets of variables in many places of the code, so you can refactor that into an object:

function makeArray(value) {
  return typeof value == "string" ? [value] : value;
}

function Property(nameBases, prefixes, values, suffixes) {
  this.nameBases = makeArray(nameBases);
  this.prefixes = makeArray(prefixes);
  this.values = makeArray(values);
  this.suffixes = makeArray(suffixes);
}

function createCSSRule(selectorName, necessaryProperties){
  //add class to control all divs
  var property;
  var cssString = selectorName + "{\n";
  for (var i9 = 0; i9 < necessaryProperties.length; ++i9){
    switch (selectorName){
      case "."+options.allPictures:
        switch(necessaryProperties[i9]){
          case "position":
            property = new Property("position","","absolute","");
            break;
          case "height":
            property = new Property("height","","100%","");
            break;
          case "width":
            property = new Property("width","","100%","");
            break;
          case "background":
            property = new Property("background","",["scroll","#fff","50% 50%","no-repeat","cover"],["-attachment","-color","-position","-repeat","-size"]);
            break;
          case "transform":
            property = new Property("transform",["", "-moz-", "-webkit-"],[options.threeDOrigin,options.threeDStyle,"translate3d("+options.translate3dpx+")"],["-origin","-style",""]);
            break;
          case "transition":
            property = new Property("transition",["", "-webkit-"],[options.transitionLength + "ms", options.transitionPath, "all"],["-duration","-timing-function","-property"]; //-delay"]);
            break;
          default:
            console.log("missing");
            property = new Property(null,null,null,null);
            break;
        }
        break;
      case "."+options.currentPic:
        switch(necessaryProperties[i9]){
          case "transform":
            property = new Property("transform",["", "-moz-", "-webkit-"],[options.threeDOrigin,"translate3d(0px, 0px, 0px)"],["-origin",""]);
            break;
          default:
            console.log("missing");
            property = new Property(null,null,null,null);
            break;
        }
        break;
      case "."+options.currentPic+"."+options.picAfterCurrent:
        switch(necessaryProperties[i9]){
          case "transform":
            property = new Property("transform",["", "-moz-", "-webkit-"],[options.threeDOrigin,"translate3d("+options.negativeTranslate3dpx+")"],["-origin",""]);
            break;
          default:
            console.log("missing");
            property = new Property(null,null,null,null);
            break;
        }
        break;
      default:
        console.log("wait a second");
        break;
    }
    //name the selector
    //iterate through properties
    for (i10 = 0; i10 < property.NameBases.length; i10++){
      //iterate through suffixes and value pairs
      for (var i11 = 0; i11 < property.Values.length; i11++){
        //iterate through prefixes
        if(property.Values !== false){
          for (var i12 = 0; i12 < property.Prefixes.length; i12++){
            cssString += " "+property.Prefixes[i12]+property.NameBases[i10]+property.Suffixes[i11]+": "+property.Values[i11]+";\n"
          }
        }
      }
    }
  }
}

createCSSRule("."+options.allPictures, ["position","height","width","background","transition","transform"]);
createCSSRule("."+options.currentPic, ["transform"]);
createCSSRule("."+options.currentPic+"."+options.picAfterCurrent, ["transform"]);
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.