コード例 #1
0
ファイル: App.js プロジェクト: wgester/peek
    _addTaskViews = function(img) {
        var taskView = new View();
        
        var subView = new View();

        var taskImage = new ImageSurface({
            content: 'img/' + img +'.png'
        });

        var taskImageModifier = new Modifier({
            size: [undefined, 0.19 * window.innerHeight]
        });
        var taskImage2 = new ImageSurface({
            content: 'img/' + img + 'Shaded.png'
        });

        this.taskImageModifier2 = new Modifier({
            opacity: 0
        });
        this.taskImageModifier2.opacityFrom(function() {
            return Math.sin(this.accordion.angle.get())
        }.bind(this));


        subView._add(taskImage);
        subView._add(this.taskImageModifier2).add(taskImage2);
        taskView._add(taskImageModifier).add(subView);
        this.tasks.push(taskView);


    };
コード例 #2
0
ファイル: example.js プロジェクト: AEtherSurfer/examples
define(function(require, exports, module) {
    var Engine    = require("famous/core/Engine");
    var View      = require("famous/core/View");
    var Surface   = require("famous/core/Surface");
    var Modifier  = require("famous/core/Modifier");
    var Transform = require("famous/core/Transform");

    var mainContext = Engine.createContext();

    var view = new View();

    var surface = new Surface({
        size: [200, 200],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center"
        }
    });
    surface.pipe(view);

    view._eventInput.on("click", function() {
        alert("Primary Surface Clicked");
    });

    var viewTwo = new View();

    var mod = new Modifier({
        transform: Transform.thenMove(Transform.rotateZ(Math.PI * 0.25),[200, 100, 1])
    });

    var surfaceTwo = new Surface({
        size: [200, 200],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center"
        }
    });
    surfaceTwo.pipe(viewTwo);

    viewTwo._eventInput.on("click", function() {
        alert("Secondary Surface Clicked");
    });

    view._add(surface);
    viewTwo._add(mod).add(surfaceTwo);

    mainContext.add(view);
    mainContext.add(viewTwo);
});
コード例 #3
0
    function _createForegroundSurface() {


        this.foregroundContainer = new ContainerSurface({
            properties:{
                overflow: 'hidden'
            }
        });

        var foregroundView = new View();

        this.foregroundSurface = new Surface({
            content: '<img height="' + window.innerHeight + '" src="' + this.options.backgroundUrl + 'Head.png"/>'
        });
        this.foregroundModifier = new Modifier({
            transform: Transform.translate(this.options.start, 0, 2)
        });

        this.foregroundContainerModifier = new Modifier({
            transform: Transform.translate(0, 0, 2)
        });

        foregroundView._add(this.foregroundModifier).add(this.foregroundSurface);
        this.foregroundContainer.add(foregroundView);

        this.foregroundSurface.pipe(this._eventOutput);
        this._add(this.foregroundContainerModifier).add(this.foregroundContainer); 
    }
コード例 #4
0
ファイル: TopicView.js プロジェクト: metamaps/metamaps_mobile
  function _createDescription() {
    var self = this;

    this.descriptionSurface = new TextareaSurface({
      name: 'textareaSurface',
      placeholder: 'Describe this topic...',
      value: '',
      properties: {
        paddingTop: '10px',
        border: '0',
        outline: '0',
        fontSize: '15px',
        resize: 'none',
        fontFamily: 'robotoregular',
        color: '#4D4D4D'
      }
    });
    this.descriptionSurface.pipe(this.listScrollview);

    this.descriptionSurface.on('keyup', function() {
      self.activeTopic.set('description', this.getValue());
    });

    var view = new View();
    var descMod = new Modifier({
      origin: [0.5, 0]
    });
    descMod.sizeFrom(function() {
      return [window.innerWidth - 32, 100];
    });

    view._add(descMod).add(this.descriptionSurface);

    this.topicSurfaces.push(view);
  }
コード例 #5
0
    function _createBackgroundImage() {
        this.container = new ContainerSurface({
            size: [this.options.width, this.options.height],
            properties:{
                overflow: 'hidden'
            }
        });

        this.surf = new Surface({
            content: '<img height="'+ this.options.height +'" src="' + this.options.image + '">'
        });

        this.mod = new Modifier({
            transform: Transform.translate(0, 0, 0)
        });

        var view = new View();
        view._add(this.mod).add(this.surf);
        this.container.add(view);

        var textSurf = new Surface({
            size: [this.options.width, window.innerHeight / 18],
            classes: ['surfaceText'],
            content: this.options.text
        });

        var textMod = new Modifier({
            origin: [0.5, 1]
        });
        this.container.add(textMod).add(textSurf);


        this._add(this.container); 
    }
コード例 #6
0
ファイル: index.js プロジェクト: aknip/university01
    // Creates manually computed grid based on option parameters
    function _createGrid() {
        // Set height of background ScrollArea to calculated size
        this.backSurface.size[1] = this.options.scrollAreaSize[1];
        this.backgroundView.options.size[1] = this.options.scrollAreaSize[1];

        // Init array of navModifiers, will be used later for animation
        this.navModifiers = [];
        this.navCells = [];
        var xCount = 0;
        var yCount = 0;

        for (var i = 0; i < this.options.cellCount; i++) {
            // calculates x position and y postion during the loop
            xCount = i % this.numberOfcellsX;
            yCount = Math.floor(i * 1.0 / this.numberOfcellsX);

            // create cells: view and surface (view is used for future enhancements)
            var navView = new View();
            var contentSurface = new Surface({
                content: "PANEL " + (i + 1),
                size: [this.options.cellCalculatedSize[0], this.options.cellCalculatedSize[1]],
                properties: {
                    backgroundColor: "hsl(" + (i * 360 / 8) + ", 60%, 50%)",
                    fontFamily: "Roboto",
                    fontWeight: 300,
                    color: "white",
                    textAlign: "center",
                    lineHeight: "100px"
                }
            });
            navView._add(contentSurface);

            // calculate position of cell, based on x/y/offset/gutter
            var xOffset = this.options.cellOffset[0] + (this.options.cellCalculatedSize[0] + this.options.cellGutter[0]) * xCount;
            var yOffset = this.options.cellOffset[1] + (this.options.cellCalculatedSize[1] + this.options.cellGutter[1]) * yCount;
            // Transform.translate(..., ..., 1) transforms
            // z-axis by 1 and ensures that the cells
            // always stay on top of the background
            var navModifier = new Modifier({
                transform: Transform.translate(xOffset, yOffset, 1)
            });

            // store default position in object (will be used later for animations)
            navModifier.cellDefaultPosition = [xOffset, yOffset];

            // IMPORTANT! Pipe surface events to Scrollview,
            // otherwise you can't scroll!
            contentSurface.pipe(this.scrollview);

            // add each item to the view and store navModifier in array
            this.navModifiers.push(navModifier);
            this.navCells.push(contentSurface);
            this.backgroundView.add(navModifier).add(navView);
        }

    }
コード例 #7
0
ファイル: TopicView.js プロジェクト: metamaps/metamaps_mobile
  function _createTitle() {
    var self = this;

    this.titleSurface = new TextareaSurface({
      rows: 1,
      cols: 44,
      name: 'textareaSurface',
      placeholder: 'Add a title...',
      value: '',
      properties: {
        padding: '10px 0',
        border: '0',
        outline: '0',
        fontSize: '20px',
        lineHeight: '22px',
        resize: 'none',
        textAlign: 'center',
        fontFamily: 'robotoregular',
        color: '#4D4D4D'
      }
    });
    this.titleSurface.pipe(this.listScrollview);

    this.currentLineCount = 1;

    this.titleSurface.on('keyup', function() {
      self.activeTopic.set('title', this.getValue());

      /*if (this.getValue().lineCount() != self.currentLineCount) {
        self.updateTitleLineCount(this.getValue().lineCount());
      }*/
    });

    var view = new View();
    var titleMod = new Modifier({
      origin: [0.5, 0]
    });
    titleMod.sizeFrom(function() {
      return [window.innerWidth - 32, 40];
    })

    view._add(titleMod).add(this.titleSurface);

    this.topicSurfaces.push(view);
  }
コード例 #8
0
ファイル: TopicView.js プロジェクト: metamaps/metamaps_mobile
  function _createMetacode() {
    var self = this;

    this.metacodeSurface = new Surface({
      size: [96, 96],
      content: '',
      properties: {
        padding: '22px 0'
      }
    });
    this.metacodeSurface.pipe(this.listScrollview);

    var view = new View();
    var metacodeMod = new Modifier({
      size: [96, 140],
      origin: [0.5, 0]
    });
    view._add(metacodeMod).add(this.metacodeSurface);

    this.topicSurfaces.push(view);
  }
コード例 #9
0
ファイル: App.js プロジェクト: wgester/peek
    _createHeader = function() {
        var sizeModifier = new Modifier({
            size: [undefined, 0.105 * window.innerHeight]
        });

        var header = new View();

        var headerSurface = new Surface({
            content: headerTemplate(),
            classes: ['header']
        });

        function headerTemplate() {
            return '<img class="feather" style="height:' + 0.095 * window.innerHeight + 'px";width:' + 0.095 * window.innerHeight +'px" src="img/feather.png"></img>' +
            '<div class="month" style="margin-left:' + 0.3125 * window.innerWidth  + 'px">April</div>' +
            '<div class="year">2014</div>';
        };

        header._add(headerSurface);
        this._add(sizeModifier).add(header);
    };
コード例 #10
0
ファイル: App.js プロジェクト: wgester/peek
 _createWeekView = function() {
     this.layout = new SequentialLayout();
     var layoutModifier = new Modifier({
         transform: Transform.translate(0, 0.105 * window.innerHeight, 0)
     });
     for (var i = 0; i < 5; i++) {
         if (this.date > 27) {
             var differentMonth = true;
         }
         var weekView = new View();
         var week = new Week(this.date, differentMonth);
         var weekModifier = new Modifier();
         weekView._add(weekModifier).add(week);
         this.weekViews.push(weekView);
         if (this.date > 30) {
             this.date = 0;
         }
         this.date += 7;
         differentMonth = false;
     }
     this.layout.sequenceFrom(this.weekViews);
     this._add(layoutModifier).add(this.layout);
 };
コード例 #11
0
ファイル: FilterView.js プロジェクト: Mr-Wiredancer/lightapp
  function _createStrips() {

    var grid = new GridLayout({
      size: [320, 400],
      dimensions: [3, 3]
    });

    var surfaces = [];
    grid.sequenceFrom(surfaces);

    var iconContents = this.options.filterData;
    this.rowModifiers = [];
    var contentCounter = 0;

    var surface, view, availability;
    var width = this.options.width;
    var height = this.options.height;

//    var scaledWidth = 50 * height / 320;
//    var scaledHeight = 60 * height / 320;

    var scaledWidth = 88;
    var scaledHeight = 128;

    for (var row = 0; row < 3; row++) {
      for (var col = 0; col < 3; col++) {
        this.rowModifiers[(row * 3) + col] = new StateModifier({
          size: [scaledWidth, scaledHeight],
          origin: [0.5, 0.5]
        });
        //create surface from iconContents
        availability = iconContents[contentCounter].available ? 'available' : 'unavailable';

        surface = new Surface({
          size: [undefined, undefined],
          classes: ['filterIcon'],
          content: '<img class="filterIconImg" width="' + scaledWidth + '" src="' + iconContents[contentCounter].imageUrl + '"/>' +
            '<div class="filterIconText ' + availability + '">' + iconContents[contentCounter].text + '</div>'
        });

        if ((row == 0) && (col == 0)) {
          var that = this;
          surface.on('click', function () {
            console.log(that);
            that.options.leave();
            Timer.after(function () {
              that.options.c.emit('邀请详情', {
                action: 'ENTER',
                isBack: true
              });
            }, 6);
          });
        }

        //push view (modifier + surface) onto surfaces
        view = new View();
        view._add(this.rowModifiers[(row * 3) + col]).add(surface);
        surfaces.push(view);

        contentCounter++;
      }
    }

    var gridModifier = new StateModifier({
      size: [320, 400],
      origin: [0.5, 0],
      transform: Transform.translate(0, 30, 0)
    });

    this._add(gridModifier).add(grid);
//    this._add(grid);

  }
コード例 #12
0
ファイル: IconMenuView.js プロジェクト: mulyoved/learn101
    function _createStrips() {
        var _super = this;
        //create a grid for icons
        var grid = new GridLayout({
            //size:[undefined, undefined],
            dimensions: [3, 3],
            properties: {
                backgroundColor: 'orange'
            }
        });

        var surfaces = [];


        grid.sequenceFrom(surfaces);

        var iconContents = [
            {text: 'ART', imageUrl: 'img/icon-menu/art.png', available: true},
            {text: 'BARCHART', imageUrl: 'img/icon-menu/barchart.png', available: true},
            {text: 'BIKE', imageUrl: 'img/icon-menu/bike.png', available: true},

            {text: 'BLIMP', imageUrl: 'img/icon-menu/blimp.png', available: true},
            {text: 'BOLT', imageUrl: 'img/icon-menu/bolt.png', available: true},
            {text: 'BOMB', imageUrl: 'img/icon-menu/bomb.png', available: true},

            {text: 'BOOKLET', imageUrl: 'img/icon-menu/booklet.png', available: true},
            {text: 'BOOKSHELF', imageUrl: 'img/icon-menu/bookshelf.png', available: true},
            {text: 'BRIEFCASE', imageUrl: 'img/icon-menu/briefcase.png', available: true},
        ];

        this.rowModifiers = [];
        var contentCounter = 0;

        var surf, view, availability;
        var width = IconMenuView.DEFAULT_OPTIONS.width; // window.innerWidth;
        var height = IconMenuView.DEFAULT_OPTIONS.height; // window.innerHeight;

        var scaledWidth = 50*height/320;
        var scaledHeight = 60*height/320;
        for(var row = 0; row < 3; row++) {
            for(var col = 0; col < 3; col++) {
                this.rowModifiers[(row * 3) + col] = new Modifier({
                    size: [scaledWidth, scaledHeight],
                    origin: [0.5, 0.5]
                });
                //create surface from iconContents
                availability = iconContents[contentCounter].available ? 'available' : 'unavailable';

                surf = new Surface({
                    size: [undefined,undefined],
                    classes: ['filterIcon'],
                    content: '<img class="filterIconImg" width="' + scaledWidth + '" src="'+ iconContents[contentCounter].imageUrl +'"/>'+
                        '<div class="filterIconText '+ availability +'">' + iconContents[contentCounter].text +'</div>'
                });

                //var id = contentCounter;

                //Example of closure, notice id must be in the params so it will not hook to some variable
                //http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
                (function setEvent(id) {
                    surf.on('click', function () {
                        console.log("Icon  Id:" + id);

                        //Need to fire custome even here with id as a parmeter
                        //IconClick id

                        // Document closure in the right page

                        _super._eventOutput.emit('app', {id: id});
                    });
                })(contentCounter);

                //push view (modifier + surface) onto surfaces
                view = new View();
                view._add(this.rowModifiers[(row * 3) + col]).add(surf);
                surfaces.push(view);

                contentCounter++;
            }
        }

        this._add(grid);
    }
コード例 #13
0
    function _createStrips() {
        //create a grid for icons
        var grid = new GridLayout({
            size:[undefined, undefined],
            dimensions: [3, 3]
        });
        var surfaces = [];


        grid.sequenceFrom(surfaces);

        var iconContents = [
            {text: 'BAR', imageUrl: 'img/faded-drink-icon.png', available: false},
            {text: 'BOOK', imageUrl: 'img/book-icon.png', available: true},
            {text: 'FOOD', imageUrl: 'img/food-icon.png', available: true},

            {text: 'IDEA', imageUrl: 'img/idea-icon.png', available: true},
            {text: 'MOVIE', imageUrl: 'img/movie-icon.png', available: true},
            {text: 'MUSIC', imageUrl: 'img/faded-music-icon.png', available: false},
            
            {text: 'PERSON', imageUrl: 'img/person-icon.png', available: true},
            {text: 'PLACE', imageUrl: 'img/pointer-icon.png', available: true},
            {text: 'PRODUCT', imageUrl: 'img/product-icon.png', available: true},
        ];

        this.rowModifiers = [];
        var contentCounter = 0;

        var surf, view, availability;
        var width = window.innerWidth;
        var height = window.innerHeight;

        var scaledWidth = 50*height/320;
        var scaledHeight = 60*height/320;
        for(var row = 0; row < 3; row++) {
            for(var col = 0; col < 3; col++) {
                this.rowModifiers[(row * 3) + col] = new Modifier({
                    size: [scaledWidth, scaledHeight],
                    origin: [0.5, 0.5]
                });
                //create surface from iconContents
                availability = iconContents[contentCounter].available ? 'available' : 'unavailable';

                surf = new Surface({
                    size: [undefined,undefined],
                    classes: ['filterIcon'],
                    content: '<img class="filterIconImg" width="' + scaledWidth + '" src="'+ iconContents[contentCounter].imageUrl +'"/>'+
                                '<div class="filterIconText '+ availability +'">' + iconContents[contentCounter].text +'</div>'
                });

                //push view (modifier + surface) onto surfaces
                view = new View();
                view._add(this.rowModifiers[(row * 3) + col]).add(surf);
                surfaces.push(view);

                contentCounter++;
            }
        }

        var gridMod = new Modifier({
            size: [width, 360*height/568],
            origin: [0.5, 0.5],
            transform: Transform.translate(0, 30, 0)
        });

        this._add(gridMod).add(grid);
    }