Skip to content

Instantly share code, notes, and snippets.

@chmiiller
Last active March 14, 2017 22:50

Revisions

  1. chmiiller revised this gist Sep 8, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions rating.js
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,7 @@ var coverView = Ti.UI.createView();
    var starsArray = [];
    var starsContainer = Ti.UI.createView({
    left: '18dp',
    height:40,
    bubbleParent: false
    });
    for(var i = 0; i < 5; i++) {
  2. chmiiller created this gist Sep 8, 2016.
    66 changes: 66 additions & 0 deletions rating.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    var win = Ti.UI.createWindow({
    backgroundColor:'#eeeeee'
    });

    var isAndroid = Ti.Platform.osname == "android";
    var starSelectedImage = '/images/ic_star_black.png';
    var starOriginalImage = '/images/ic_star_border_black.png';
    //icons from Google Material Design (search for the "star" icon): https://design.google.com/icons/
    var starWidth = 28;
    var coverView = Ti.UI.createView();

    var starsArray = [];
    var starsContainer = Ti.UI.createView({
    left: '18dp',
    bubbleParent: false
    });
    for(var i = 0; i < 5; i++) {
    var star = Ti.UI.createView({
    backgroundImage: starOriginalImage,
    width: starWidth,
    height: starWidth,
    left: i * (starWidth + 10),
    index: i,
    toggle: false
    });
    starsArray.push(star);
    starsContainer.add(star);
    }

    starsContainer.addEventListener('touchstart',onStar);
    starsContainer.addEventListener('touchmove',onStar);
    starsContainer.addEventListener('touchend',onStarEnd);
    starsContainer.add(coverView);
    win.add(starsContainer);

    var densityMultiplier = isAndroid ? Ti.Platform.displayCaps.logicalDensityFactor : 1;

    function onStar(touch){
    var position = (touch.x / densityMultiplier) - (starWidth * 0.4);
    for (var i = 0; i < starsArray.length; i++) {
    var item = starsArray[i];
    if(position >= item.left){
    item.setBackgroundImage(starSelectedImage);
    item.width = starWidth+3;
    item.height = starWidth+3;
    item.toggle = true;
    }else{
    item.setBackgroundImage(starOriginalImage);
    item.width = starWidth;
    item.height = starWidth;
    item.toggle = false;
    }
    }
    };

    function onStarEnd(touch){
    var ratingValue = 0;
    for (var i = 0; i < starsArray.length; i++) {
    if(starsArray[i].toggle === true){
    ratingValue = starsArray[i].index + 1;
    }
    }
    //success
    console.log(' **************** rating: ' + ratingValue);
    };
    win.open();