コード例 #1
0
montageDefine("6607c26","ui/main.reel/main",{dependencies:["montage/ui/component","montage/core/range-controller","core/todo","montage/core/serialization"],factory:function(require,exports,module){var Component = require('montage/ui/component').Component;
var RangeController = require('montage/core/range-controller').RangeController;
var Todo = require('core/todo').Todo;
var Serializer = require('montage/core/serialization').Serializer;
var Deserializer = require('montage/core/serialization').Deserializer;
var LOCAL_STORAGE_KEY = 'todos-montage';

exports.Main = Component.specialize({

	_newTodoForm: {
		value: null
	},

	_newTodoInput: {
		value: null
	},

	todoListController: {
		value: null
	},

	constructor: {
		value: function Main() {
			this.todoListController = new RangeController();
			this.addPathChangeListener('todos.every{completed}', this, 'handleTodosCompletedChanged');

			this.defineBindings({
				'todos': {'<-': 'todoListController.organizedContent'},
				'todosLeft': {'<-': 'todos.filter{!completed}'},
				'todosCompleted': {'<-': 'todos.filter{completed}'}
			});
		}
	},

	templateDidLoad: {
		value: function () {
			this.load();
		}
	},

	load: {
		value: function () {
			if (localStorage) {
				var todoSerialization = localStorage.getItem(LOCAL_STORAGE_KEY);

				if (todoSerialization) {
					var deserializer = new Deserializer(),
						self = this;

					deserializer.init(todoSerialization, require)
					.deserializeObject()
					.then(function (todos) {
						self.todoListController.content = todos;
					}).fail(function (error) {
						console.error('Could not load saved tasks.');
						console.debug('Could not deserialize', todoSerialization);
						console.log(error.stack);
					});
				}
			}
		}
	},

	save: {
		value: function () {
			if (localStorage) {
				var todos = this.todoListController.content,
					serializer = new Serializer().initWithRequire(require);

				localStorage.setItem(LOCAL_STORAGE_KEY, serializer.serializeObject(todos));
			}
		}
	},

	enterDocument: {
		value: function (firstTime) {
			if (firstTime) {
				this._newTodoForm.identifier = 'newTodoForm';
				this._newTodoForm.addEventListener('submit', this, false);

				this.addEventListener('destroyTodo', this, true);

				window.addEventListener('beforeunload', this, true);
			}
		}
	},

	captureDestroyTodo: {
		value: function (evt) {
			this.destroyTodo(evt.detail.todo);
		}
	},

	createTodo: {
		value: function (title) {
			var todo = new Todo().initWithTitle(title);
			this.todoListController.add(todo);
			return todo;
		}
	},

	destroyTodo: {
		value: function (todo) {
			this.todoListController.delete(todo);
			return todo;
		}
	},

	_allCompleted: {
		value: null
	},

	allCompleted: {
		get: function () {
			return this._allCompleted;
		},
		set: function (value) {
			this._allCompleted = value;
			this.todoListController.organizedContent.forEach(function (member) {
				member.completed = value;
			});
		}
	},

	todos: {
		value: null
	},

	todosLeft: {
		value: null
	},

	todosCompleted: {
		value: null
	},

	// Handlers

	handleNewTodoFormSubmit: {
		value: function (evt) {
			evt.preventDefault();

			var title = this._newTodoInput.value.trim();

			if (title === '') {
				return;
			}

			this.createTodo(title);
			this._newTodoInput.value = null;
		}
	},

	handleTodosCompletedChanged: {
		value: function (value) {
			this._allCompleted = value;
			this.dispatchOwnPropertyChange('allCompleted', value);
		}
	},

	handleClearCompletedButtonAction: {
		value: function () {
			var completedTodos = this.todoListController.organizedContent.filter(function (todo) {
				return todo.completed;
			});

			if (completedTodos.length > 0) {
				this.todoListController.deleteEach(completedTodos);
			}
		}
	},

	captureBeforeunload: {
		value: function () {
			this.save();
		}
	}
});

}})
コード例 #2
0
ファイル: field-text.js プロジェクト: mactanxin/gui
/**
 * @module ui/field-text.reel
 */
var Component = require("montage/ui/component").Component;

/**
 * @class FieldText
 * @extends Component
 */
exports.FieldText = Component.specialize();
コード例 #3
0
ファイル: table-row-settings.js プロジェクト: mactanxin/gui
/**
 * @module ui/table-row-settings.reel
 */
var Component = require("montage/ui/component").Component;

/**
 * @class TableRowSettings
 * @extends Component
 */
exports.TableRowSettings = Component.specialize();
コード例 #4
0
ファイル: shipping-info.js プロジェクト: asolove/checkout
/**
 * @module ./shipping-info.reel
 * @requires montage/ui/component
 */
var Component = require("montage/ui/component").Component;

/**
 * @class ShippingInfo
 * @extends Component
 */
exports.ShippingInfo = Component.specialize(/** @lends ShippingInfo# */ {
    constructor: {
        value: function ShippingInfo() {
            this.super();
        }
    }
});
コード例 #5
0
ファイル: task-object.js プロジェクト: abwaters/gui
/**
 * @module ui/task-object.reel
 */
var Component = require("montage/ui/component").Component;

/**
 * @class TaskObject
 * @extends Component
 */
exports.TaskObject = Component.specialize(/** @lends TaskObject# */ {
    enterDocument: {
        value: function () {
            this.classList.add('type-' + this.object.name);
        }
    }
});
コード例 #6
0
ファイル: list.js プロジェクト: 3on/test-test
exports.List = Component.specialize(/** @lends module:"matte/ui/list.reel".List# */ {

    constructor: {
        value: function List () {
            this.super();

            this.defineBinding("_repetition.content", {"<-": "content"});

            // Only use a contentController if content is not defined
            this.defineBinding("content.defined() ? null : _repetition.contentController", {
                "<-": "contentController"
            });

        }
    },

    /**
      Description TODO
      @private
    */
    _repetition: {
        value: null
    },
    /**
        Description TODO
        @type {Property}
        @default null
    */
    delegate: {
        value: null
    },

    content: {value: null},

    contentController: {value: null},

    axis: {
        value: null
    },

/**
  Description TODO
  @private
*/
    isSelectionEnabled: {
        value: null
    },

    // Initialization

    // TODO we should probably support the programmatic initialization of a list; forwarding the childComponents
    // along to the repetition
    // I want to say that if somebody knows enough to do that they know enough to append the child components' elements
    // into the repetition, not the list

    observeProperty: {
        value: function (key, emit, source, parameters, beforeChange) {
            if (key === "objectAtCurrentIteration" || key === "currentIteration") {
                if (this._repetition) {
                    return this._repetition.observeProperty(key, emit, source, parameters, beforeChange);
                }
            } else {
                return observeProperty(this, key, emit, source, parameters, beforeChange);
            }
        }
    }

});
コード例 #7
0
ファイル: video-control.js プロジェクト: marchant/test-7-19
exports.VideoControl = Component.specialize( /** @lends module:"ui/video-control.reel".VideoControl# */ {

    // Lifecycle

    /**
     * @private
     */
    constructor: {
        value: function VideoControl() {
            this.super();

            this.defineBinding("time", {"<-": "videoController.position"});
            this.addPathChangeListener("videoController.status", this, "handleControllerStatusChange");
        }
    },

    // Properties
    videoController: {
        value: null
    },

    _time: {
        value: 0
    },

    time: {
        set: function (time) {
            if (!isNaN(time)) {
                var timeNumber = +time;

                if (timeNumber >= 0 && timeNumber !== this._time) {
                    this._time = timeNumber;
                    this.formattedTime = this._prettyTime(timeNumber, this.videoController.duration);
                }
            }
        },
        get: function () {
            return this._time;
        }
    },

    formattedTime: {
        value: null
    },

    // Event Handlers

    handlePlayAction: {
        value: function (e) {
            if (this.videoController.status === this.videoController.PLAYING) {
                this.videoController.pause();
            } else if (this.videoController.status === this.videoController.PAUSED) {
                this.videoController.unpause();
            } else {
                this.videoController.play();
            }
        }
    },


    handleFullScreenAction: {
        value: function (e) {
            this.video.toggleFullScreen();
        }
    },


    // Machinery

    handleControllerStatusChange: {
        value: function (newValue, path, myObject) {
            if (this.videoController) {
                if (newValue === this.videoController.PLAYING) {
                    this.classList.add("digit-VideoControl--playing");
                } else {
                    this.classList.remove("digit-VideoControl--playing");
                }
            }
        }
    },

    _prettyTime: {
        value: function(time, duration) {
            var shouldDisplayHours, sec, min, hour;

            time = (0.5 + time) << 0; /* jshint ignore:line */
            shouldDisplayHours = ~~(duration / 3600) > 0;  /* jshint ignore:line */

            if (time === 0) {
                return shouldDisplayHours ? "00:00:00" : "00:00";
            }

            sec = time % 60;
            min = ~~(time / 60) % 60;  /* jshint ignore:line */
            hour = ~~(time / 3600);  /* jshint ignore:line */

            return (hour === 0 ? shouldDisplayHours ? "00:" : "" : hour < 10 ? "0" + hour + ":" : hour + ":") +
                (min < 10 ? "0" + min : min) + ":" +
                (sec < 10 ? "0" + sec : sec);
        }
    }

});
コード例 #8
0
ファイル: topology.js プロジェクト: abwaters/gui
var Topology = exports.Topology = Component.specialize(/** @lends Topology# */ {

    _object: {
        value: null
    },

    object: {
        set: function (object) {
            if (this._object !== object) {
                this._object = object;
                this._topologyProxy = null;
                this._populateTopologyProxyWithTopology(object);
            }
        },
        get: function () {
            return this._object;
        }
    },

    _topologyProxy: {
        value: null
    },

    topologyProxy: {
        get: function () {
            if (!this._topologyProxy) {
                var self = this;

                this._topologyProxy = Promise.all([
                    Model.populateObjectPrototypeForType(Model.ZfsTopology),
                    Model.populateObjectPrototypeForType(Model.ZfsVdev)
                ]).then(function () {
                    self._topologyProxy = self._getNewTopologyProxy();
                });
            }

            return this._topologyProxy;
        }
    },

    exitDocument: {
        value: function () {
            this._clearDisk();
            this._freeTopologyProxy();
        }
    },

    _freeTopologyProxy: {
        value: function () {
            if (this._topologyProxy) {
                var topologyKeys = this.constructor.TOPOLOGY_KEYS;

                for (var i = 0, l = topologyKeys.length; i < l; i++) {
                    this._topologyProxy[topologyKeys[i]].clear();
                }
            }
        }
    },

    _populateTopologyProxyWithTopology: {
        value: function (topology) {
            if (this.topologyProxy && topology) {
                if (Promise.is(this.topologyProxy)) {
                    var self = this;

                    this.topologyProxy.then(function () {
                        self.__populateTopologyProxyWithTopology(topology);
                    });
                } else {
                    this.__populateTopologyProxyWithTopology(topology);
                }
            }
        }
    },

    __populateTopologyProxyWithTopology: {
        value: function (topology) {
            this._mapTopologyToTopologyProxy(topology, this._topologyProxy);
            this.dispatchOwnPropertyChange("topologyProxy", this._topologyProxy);
        }
    },

    _mapTopologyToTopologyProxy: {
        value: function (topology, topologyProxy) {
            var topologyKeys = this.constructor.TOPOLOGY_KEYS;

            for (var i = 0, l = topologyKeys.length; i < l; i++) {
                this.addVDevsToTopologyProxyVDevs(topology[topologyKeys[i]], topologyProxy[topologyKeys[i]]);
            }
        }
    },

    _getNewTopologyProxy: {
        value: function () {
            var topologyProxy = this.application.dataService.getDataObject(Model.ZfsTopology),
                topologyKeys = this.constructor.TOPOLOGY_KEYS;

            for (var i = 0, l = topologyKeys.length; i < l; i++) {
                topologyProxy[topologyKeys[i]] = [];
            }

            return topologyProxy;
        }
    },

    addVDevsToTopologyProxyVDevs: {
        value: function (vDevs, targetProxyVDevs) {
            var proxyVDev, proxyVDevDisk, vDev, vDevChildren, i, ii , l, ll;

            for (i = 0, l = vDevs.length; i < l; i++) {
                proxyVDev = this._mapVDevToProxyVDev((vDev = vDevs[i]));
                proxyVDev.children = [];
                vDevChildren = vDev.children;
                proxyVDev.isExistingVDev = true;

                if (!vDevChildren || vDevChildren.length === 0) {
                    proxyVDev.children.push(vDev);
                } else {
                    for (ii = 0, ll = vDevChildren.length; ii < ll; ii++) {
                        proxyVDevDisk = this._mapVDevToProxyVDev(vDevChildren[ii]);
                        proxyVDev.children.push(proxyVDevDisk);
                    }
                }

                targetProxyVDevs.push(proxyVDev);
            }
        }
    },

    _mapVDevToProxyVDev: {
        value: function (vDev) {
            var propertyBlueprints = Model.ZfsVdev.objectPrototype.blueprint.propertyBlueprints,
                proxyVDev = this.application.dataService.getDataObject(Model.ZfsVdev),
                key;

            for (var i = 0, length = propertyBlueprints.length; i < length; i++) {
                key = propertyBlueprints[i].name;

                if (key !== "children") {
                    proxyVDev[key] = vDev[key];
                }
            }

            return proxyVDev;
        }
    },

    revert: {
        value: function () {
            this._clearDisk();
            this._freeTopologyProxy();
            this._populateTopologyProxyWithTopology(this.object);
        }
    },

    _clearDisk: {
        value: function () {
            var disks = this.availableDisks,
                disk;

            if (disks) {
                for (var i = 0, length = disks.length; i < length; i++) {
                    disk = disks[i];

                    if (disk.volume === '/TEMP/') {
                        disk.volume = null;
                    }
                }
            }
        }
    },

    _updateTopologyProxyAfterSaving: {
        value: function () {
            var topologyKeys = this.constructor.TOPOLOGY_KEYS;

            for (var i = 0, l = topologyKeys.length; i < l; i++) {
                this._cleanupVdevs(this.topologyProxy[topologyKeys[i]]);
            }
        }
    },

    save: {
        value: function () {
            var previousContextCascadingList = CascadingList.findPreviousContextWithComponent(this);

            if (previousContextCascadingList) {
                var volume = previousContextCascadingList.object,
                    topologyKeys = this.constructor.TOPOLOGY_KEYS,
                    previousTopology = this.object,
                    self = this;

                for (var i = 0, l = topologyKeys.length; i < l; i++) {
                    this._cleanupVdevs(this.topologyProxy[topologyKeys[i]]);
                }

                volume._topology = this.topologyProxy;

                // FIXME: Remove once the middleware stops sending erroneous data
                if (!volume.providers_presence) {
                    volume.providers_presence = 'NONE';
                }

                this.isLocked = true;
                return this.application.dataService.saveDataObject(volume).then(function () {
                    return new Promise(function (resolve, reject) {
                        var _cancelChangeListener = volume.addPathChangeListener("topology", function (topologyUpdated) {
                            //get the last updated topology object from the middleware.
                            if (_cancelChangeListener) {
                                _cancelChangeListener();
                                return void 0;
                            }

                            if (self._inDocument) {
                                var context = CascadingList.findCascadingListItemContextWithComponent(self);

                                if (context) {
                                    if (Promise.is(topologyUpdated)) {
                                        return topologyUpdated.then(function () {
                                            context.object = context.data.object = volume.topology;
                                            resolve(volume.topology);
                                        });
                                    } else {
                                        context.object = context.data.object = volume.topology;
                                    }
                                }
                            }

                            resolve(volume.topology)
                        });
                    });
                }, function () {
                    volume.topology = previousTopology;
                });
            }
        }
    }


}, {

    TOPOLOGY_KEYS: {
        value: ["data", "cache", "log", "spare"]
    }

});
コード例 #9
0
ファイル: loading-message.js プロジェクト: mactanxin/gui
/**
 * @module ui/loading-message.reel
 */
var Component = require("montage/ui/component").Component;

/**
 * @class LoadingMessage
 * @extends Component
 */
exports.LoadingMessage = Component.specialize();
コード例 #10
0
ファイル: share.js プロジェクト: vshilman/Montage-App
exports.Share = Component.specialize({
    EMPTY_STRING: {
        value: ''
    },

    LINE_START: {
        value: '^'
    },

    _filesystemService: {
        value: null
    },

    _volumeService: {
        value: null
    },


    _loadingPromise: {
        value: null
    },

    _folders: {
        value: null
    },

    folder: {
        get: function() {
            return this._folders;
        },
        set: function(folders) {
            if (this._folders != folders) {
                this._folders = folders;
            }
        }
    },

    _targetPath: {
        value: null
    },

    targetPath: {
        get: function() {
            return this._targetPath;
        },
        set: function(targetPath) {
            var self = this;
            if (this._targetPath != targetPath) {
                if (targetPath) {
                    self._targetPath = targetPath;
                    self.getPathNode(targetPath).then(function(node) {
                        if (node) {
                            node.isDataset = self._isPathADataset(targetPath);
                        } else {
                            node = {
                                name: self._filesystemService.dirname(targetPath),
                                path: targetPath,
                                isDataset: true
                            };
                        }
                        self.targetPathNode = node;
                    });
                }

            }
        }
    },

    _targetPathNode: {
        value: null
    },

    targetPathNode: {
        get: function() {
            return this._targetPathNode;
        },
        set: function(targetPathNode) {
            if (this._targetPathNode != targetPathNode) {
                this._targetPathNode = targetPathNode;
                if (targetPathNode && targetPathNode.path) {
                    if (!this._targetType) {
                        this.targetType = this.object.target_type || targetPathNode.isDataset ? 'DATASET' : 'DIRECTORY';
                    }
                    this.listChildren();
                }
            }
        }
    },

    _targetType: {
        value: null
    },

    targetType: {
        get: function() {
            return this._targetType;
        },
        set: function(targetType) {
            if (this._targetType != targetType) {
                this._targetType = targetType;
                if (targetType == 'DATASET' && this._targetPathNode && !this._targetPathNode.isDataset) {
                    this._targetPath = this.datasetToPathConverter.convert(this.object.volume.id)
                }
            }
        }
    },

    users: {
        value: []
    },

    groups: {
        value: []
    },

    pathConverter: {
        value: null
    },

    _service: {
        value: null
    },

    service: {
        get: function() {
            return this._service;
        },
        set: function(service) {
            if (this._service != service) {
                this._service = service;
            }
            this.isServiceStarted = this._isServiceRunning();
        }
    },

    _isServiceStarted: {
        value: null
    },

    isServiceStarted: {
        get: function() {
            return this._isServiceStarted;
        },
        set: function(isServiceStarted) {
            if (this._isServiceStarted !== isServiceStarted) {
                if (isServiceStarted && !this._isServiceRunning()) {
                    this._startService();
                } else if (!isServiceStarted && this._isServiceRunning()) {
                    this._stopService();
                }
                this._isServiceStarted = isServiceStarted;
            }
        }
    },

    _object: {
        value: null
    },

    object: {
        get: function() {
            return this._object;
        },
        set: function(object) {
            var self = this;
            this._loadUsers();
            this._loadGroups();
            if (this._object != object) {
                if (object) {
                    this._getService(object).then(function (service) {
                        self.service = service;
                        self.isServiceStarted = service.state == 'RUNNING';
                    });
                    if (this._filesystemService) {
                        if (object.target_path && object.target_type === 'DIRECTORY') {
                            this.targetPath = object.target_path
                        } else {
                            this.targetPath = this.datasetToPathConverter.convert(object.target_path ? object.target_path : object.volume.id);
                        }
                    }
                    if (!object.target_type) {
                        object.target_type = 'DATASET';
                    }
                    this.targetType = object.target_type;
                }
                this._object = object
            }
        }
    },

    enterDocument: {
        value: function(isFirsttime) {
            var self = this;
            this._loadUsers();
            this._loadGroups();
            if (isFirsttime) {
                this._filesystemService = this.application.filesystemService;
                this._loadingPromise = this._loadVolumeService().then(function() {
                    self._loadPathConverter();
                });
            }
            this._loadingPromise.then(function() {
                if (self.object.target_path && self.object.target_type === 'DIRECTORY') {
                    self.targetPath = self.object.target_path
                } else {
                    self.targetPath = self.datasetToPathConverter.convert(self.object.target_path ? self.object.target_path : self.object.volume.id);
                }
                self.targetType = self.object.target_type;
            });
        }
    },

    exitDocument: {
        value: function() {
            this.targetPath = null;
        }
    },

    save: {
        value: function() {
            var self = this;

            this._setTargetPathOnObject();
            this.object.target_type = this._targetType;

            return self.application.dataService.saveDataObject(self.object).then(function() {
                self.isServiceStarted = true;
            });
        }
    },

    _loadUsers: {
        value: function() {
            var self = this;
            if (!this.users || this.users.length == 0) {
                this.application.dataService.fetchData(Model.User).then(function(users) {
                    self.users = users;
                });
            }
        }
    },

    _loadGroups: {
        value: function() {
            var self = this;
            if (!this.groups || this.groups.length == 0) {
                this.application.dataService.fetchData(Model.Group).then(function(groups) {
                    self.groups = groups;
                });
            }
        }
    },

    _setTargetPathOnObject: {
        value: function() {
            var path = this._targetPath;
            if (this._targetType == 'DATASET') {
                if (this.object._isNewObject) {
                    path += '/' + this.object.name;
                }
                path = this.datasetToPathConverter.revert(path);
            }
            this.object.target_path = path;
        }
    },

    _addTargetTypeToObject: {
        value: function() {
            var self = this,
                targetPath = this._targetPath || this.pathConverter.revert(this.object.name),
                basename = this._filesystemService.basename(targetPath),
                isDatasetPromise;

            if (!this.object.target_type) {
                return this._filesystemService.listDir(this._filesystemService.dirname(targetPath)).then(function(children) {
                    if (children.filter(function(x) { return x.name == basename }).length > 0) {
                        isDatasetPromise = self._volumeService.decodePath(targetPath).then(function(pathComponents) {
                            return pathComponents[2].length == 0;
                        });
                    } else {
                        isDatasetPromise = Promise.resolve(true)
                    }
                    return isDatasetPromise;
                }).then(function(isDataset) {
                    if (isDataset) {
                        return self._volumeService.decodePath(targetPath).then(function(pathComponents) {
                            self.object.target_type = 'DATASET';
                            self.object.target_path = self._filesystemService.join(pathComponents[1], pathComponents[2]);
                        });
                    } else {
                        self.object.target_type = 'DIRECTORY';
                        self.object.target_path = targetPath;
                        return null;
                    }
                });
            } else {
                return Promise.resolve();
            }
        }
    },

    _loadVolumeService: {
        value: function() {
            var self = this;
            return Model.populateObjectPrototypeForType(Model.Volume).then(function(Volume) {
                self._volumeService = Volume.constructor;
            });
        }
    },

    _loadPathConverter: {
        value: function() {
            var self = this;
            return this._volumeService.getDatasetPath(this.object.volume.id).then(function(datasetPath) {
                var volumeIdRegExp = new RegExp(self.LINE_START+self.object.volume.id),
                    volumePathRegExp = new RegExp(self.LINE_START+datasetPath);
                self.pathConverter = {
                    convert: function(value) {
                        var result = value.replace(volumePathRegExp, self.EMPTY_STRING).replace(volumeIdRegExp, self.EMPTY_STRING);
                        if (self.object.target_type) {
                            result = '/' + result;
                        }
                        return result.replace('//', '/');
                    },
                    revert: function(value) {
                        return [datasetPath, value].join('/').replace('//', '/');
                    }
                };
                self.targetPath = self.targetPath+'';
            });
        }
    },

    getPathNode: {
        value: function(path) {
            return this._filesystemService.stat(path).then(function(stat) {
                return stat;
            }, function() {
                return {
                    path: path
                };
            });
        }
    },

    _isPathADataset: {
        value: function (path) {
            return this.datasetsPath.indexOf(path) != -1;
        }
    },

    listChildren: {
        value: function() {
            var self = this;
            return this._filesystemService.listDir(this._targetPath).then(function(children) {
                self.folders = children.filter(function(x) {
                    return x.type === 'DIRECTORY'
                }).map(function(x) {
                    x.isDataset = self._isPathADataset(self._filesystemService.join(self._targetPath, x.name));
                    return x;
                });
            });
        }
    },

    _getService: {
        value: function(object) {
            var serviceName = 'service-' + object.type;
            return this.application.dataService.fetchData(Model.Service).then(function(services) {
                return services.filter(function (x) { return x.config && x.config.type == serviceName; })[0];
            });
        }
    },

    _isServiceRunning: {
        value: function() {
            return this.service && this.service.state == 'RUNNING';
        }
    },

    _startService: {
        value: function() {
            var self = this;
            if (this.service && !this._isServiceRunning()) {
                this.service.manage(this.service.id, 'start');
            }
        }
    },

    _stopService: {
        value: function() {
            var self = this;
            if (this.service && this._isServiceRunning()) {
                this.service.manage(this.service.id, 'stop');
            }
        }
    }
});
コード例 #11
0
ファイル: calendar-widget.js プロジェクト: Cbrdiv/gui
exports.CalendarWidget = Component.specialize({

    constructor: {
        value: function () {
            this.super();
            this._updateCalendar();
        }
    },

    _months: {
        value: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ]
    },

    months: {
        get: function () {
            return this._months;
        },
        set: function (value) {
            this._months = value;
            this.needsDraw = true;
        }
    },

    _selectedTimestamp: {
        value: null
    },

    _daysOfTheWeek: {
        value: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    },

    daysOfTheWeek: {
        get: function () {
            return this._daysOfTheWeek;
        },
        set: function (value) {
            this._daysOfTheWeek = value;
            this.needsDraw = true;
        }
    },

    _firstDayOfTheWeek: {
        value: "Sunday"
    },

    firstDayOfTheWeek: {
        get: function () {
            return this._firstDayOfTheWeek;
        },
        set: function (value) {
            if (value === "Monday") {
                this._firstDayOfTheWeek = value;
            } else {
                this._firstDayOfTheWeek = "Sunday";
            }
            this.needsDraw = true;
        }
    },

    _daysInMonth: {
        value: function (year, month) {
            return new Date(year, month + 1, 0).getDate();
        }
    },

    _updateCalendar: {
        value: function () {
            var timestamp = this._selectedTimestamp ? this._selectedTimestamp : Date.now(),
                date = new Date(timestamp),
                month = date.getMonth(),
                daysInMonth,
                weeks = [],
                dayDate,
                today = new Date(),
                week,
                i, j;

            this._month = this._months[month];
            this._year = date.getFullYear();
            daysInMonth = this._daysInMonth(this._year, month);
            if (this._firstDayOfTheWeek === "Monday") {
                this.daysOfTheWeekContentForRepetition = this.daysOfTheWeek.slice(1);
                this.daysOfTheWeekContentForRepetition.push(this.daysOfTheWeek[0]);
                i = (8 - new Date(this._year, month, 1).getDay()) % 7;
            } else {
                this.daysOfTheWeekContentForRepetition = this.daysOfTheWeek;
                i = 7 - new Date(this._year, month, 1).getDay();
            }
            if (i) {
                i -= 7;
            }
            while (i < daysInMonth) {
                week = [];
                for (j = 1; j <= 7; j++) {
                    dayDate = new Date(this._year, month, i + j);
                    week.push({
                        year: dayDate.getFullYear(),
                        month: dayDate.getMonth(),
                        date: dayDate.getDate(),
                        day: dayDate.getDay(),
                        isCurrentMonth: dayDate.getMonth() === month,
                        isToday:
                            (dayDate.getDate() === today.getDate()) &&
                            (dayDate.getFullYear() === today.getFullYear()) &&
                            (dayDate.getMonth() === today.getMonth())
                    });
                }
                weeks.push(week);
                i += 7;
            }
            this._weeks = weeks;
        }
    },

    willDraw: {
        value: function () {
            this._updateCalendar();
        }
    },

    handlePreviousMonthAction: {
        value: function () {
            var timestamp = this._selectedTimestamp ? this._selectedTimestamp : Date.now(),
                date = new Date(timestamp),
                year = date.getFullYear(),
                month = date.getMonth();

            this._selectedTimestamp = new Date(year, month - 1, 1);
            this.needsDraw = true;
        }
    },

    handleTodayAction: {
        value: function () {
            this._selectedTimestamp = new Date();
            this.needsDraw = true;
        }
    },

    handleNextMonthAction: {
        value: function () {
            var timestamp = this._selectedTimestamp ? this._selectedTimestamp : Date.now(),
                date = new Date(timestamp),
                year = date.getFullYear(),
                month = date.getMonth();

            this._selectedTimestamp = new Date(year, month + 1, 1);
            this.needsDraw = true;
        }
    }

});
コード例 #12
0
ファイル: cron-rules.js プロジェクト: abwaters/gui
exports.CronRules = Component.specialize(/** @lends CronRules# */ {

    _scheduleObject: {
        value: null
    },

    scheduleObject: {
        set: function (scheduleObject) {
            if (this._scheduleObject !== scheduleObject) {
                this._scheduleObject = scheduleObject;

                if (scheduleObject) {
                    this._initRulesIfNeeded();
                    this._mapRulesWithScheduleObject(scheduleObject);
                } else {
                    this._resetRules();
                }
            }
        },
        get: function () {
            return this._scheduleObject;
        }
    },

    rules: {
        value: null
    },

    enterDocument: {
        value: function () {
            this._initRulesIfNeeded();
        }
    },

    _initRulesIfNeeded: {
        value: function () {
            if (!this.rules) {
                this.rules = [];
            }

            if (!this.rules.length) {
                var cronFields = Rule.CRON_FIELDS,
                    cronFieldKeys = Object.keys(cronFields),
                    rule;

                for (var i = 0, length = cronFieldKeys.length; i < length; i++) {
                    rule = new Rule();
                    rule.field = cronFields[cronFieldKeys[i]];
                    this.rules.push(rule);
                }
            }
        }
    },

    _mapRulesWithScheduleObject: {
        value: function (scheduleObject) {
            if (this.rules) {
                var cronFields = Rule.CRON_FIELDS,
                    cronFieldKeys = Object.keys(cronFields),
                    cronField, rawData, values, mapValues,
                    parsedValues, rule, i, l, ii, ll;

                for (i = 0, l = cronFieldKeys.length; i < l; i++) {
                    cronField = cronFields[cronFieldKeys[i]];
                    rule = this.rules[cronField.index];
                    rawData = scheduleObject[cronField.mapKey];//need to be parsed.

                    rule.values.clear();

                    if (rawData) {
                        var parsedString = Rule.ParseString(rawData, cronField);
                        rule.type = parsedString.type;

                        if (rule.type === Rule.TYPES.EVERY) {
                            rule.values = parsedString.values;
                        } else {
                            values = Rule.FIELD_VALUES[cronField.index];
                            parsedValues = parsedString.values;
                            mapValues = [];

                            for (ii = 0, ll = parsedValues.length; ii < ll; ii++) {
                                mapValues.push(values[parsedValues[ii]]);
                            }

                            rule.values = mapValues;
                        }
                    }
                }
            }
        }
    },

    _resetRules: {
        value: function () {
            if (this.rules) {
                var rule;

                for (var i = 0, l = this.rules.length; i < length; i++) {
                    rule = this.rules[i];
                    rule.values.clear();
                    rule.type = Rule.TYPES.EVERY;
                }
            }
        }
    }

});
コード例 #13
0
ファイル: foo.js プロジェクト: aadsmdec/bar
/**
 * @module ./foo.reel
 * @requires montage/ui/component
 */
var Component = require("montage/ui/component").Component;

/**
 * @class Foo
 * @extends Component
 */
exports.Foo = Component.specialize(/** @lends Foo# */ {
    constructor: {
        value: function Foo() {
            this.super();
        }
    }
});
コード例 #14
0
ファイル: nis-service.js プロジェクト: Cbrdiv/gui
var Component = require("montage/ui/component").Component;

/**
 * @class NisService
 * @extends Component
 */
exports.NisService = Component.specialize();
コード例 #15
0
ファイル: main.js プロジェクト: mactanxin/gui
/**
 * @module ui/main.reel
 */
var Component = require("montage/ui/component").Component;

/**
 * @class Main
 * @extends Component
 */
exports.Main = Component.specialize(/** @lends Main# */ {

    handleTriggerAction: {
        value: function() {
            this.modal.isShown = true;
        }
    }
});
コード例 #16
0
exports.Topologizer = Component.specialize({

    prepareForActivationEvents: {
        value: function () {
            this.triangleElement.addEventListener("mousedown", this, false);
        }
    },

    _computeBarycentricValues: {
        value: function (x, y) {
            if (this._width && this._height) {
                return [
                    1 - ((x * Math.sin(Math.PI / 3) - (y - this._height) * Math.cos(Math.PI / 3)) / this._height),
                    1 - (y / this._height),
                    1- (((this._width - x) * Math.sin(Math.PI / 3) - (y - this._height) * Math.cos(Math.PI / 3)) / this._height)
                ];
            } else {
                return [1/3, 1/3, 1/3];
            }
        }
    },

    _handlePosition: {
        value: null
    },

    _valuesInRange: {
        value: function (barycentricValues) {
            return (barycentricValues[0] >= 0 &&
                    barycentricValues[0] <= 1 &&
                    barycentricValues[1] >= 0 &&
                    barycentricValues[1] <= 1 &&
                    barycentricValues[2] >= 0 &&
                    barycentricValues[2] <= 1);
        }
    },

    handlePosition: {
        get: function () {
            return this._handlePosition;
        },
        set: function (value) {
            var barycentricValues,
                x, y, best;

            if (value) {
                barycentricValues = this._computeBarycentricValues(value.x, value.y);
                if (this._valuesInRange(barycentricValues)) {
                    this._handlePosition = value;
                } else {
                    best = {x: 0, distance: Infinity};
                    y = value.y;
                    if (y < 1) {
                        y = 1;
                    }
                    if (y >= this._height) {
                        y = this._height - 1;
                    }

                    // TODO: This should be optimised by line/line intersection

                    for (x = 0; x < this._width; x++) {
                        if (this._valuesInRange(this._computeBarycentricValues(x, y))) {
                            squaredDistance = (x - value.x) * (x - value.x);
                            if (squaredDistance < best.distance) {
                                best.distance = squaredDistance;
                                best.x = x;
                            }
                        }
                    }
                    this._handlePosition = {x: best.x, y: y};
                    barycentricValues = this._computeBarycentricValues(
                        this._handlePosition.x,
                        this._handlePosition.y
                    );
                }
                this.application.preventAnimation = true;
                this.topology.createTopology(
                    this.topology._calculatePreferences(
                        barycentricValues[0], barycentricValues[1], barycentricValues[2]
                    )
                );
                this.needsDraw = true;
            }
        }
    },

    handleMousedown: {
        value: function (event) {
            this._targePosition = {
                x: event.layerX,
                y: event.layerY
            };
            this.handlePosition = this._targePosition;
            this._pointerPosition = {
                x: event.pageX,
                y: event.pageY
            };
            document.addEventListener("mousemove", this, false);
            document.addEventListener("mouseup", this, false);
            event.preventDefault();
        }
    },

    handleMousemove: {
        value: function (event) {
            this._targePosition.x += event.pageX - this._pointerPosition.x;
            this._targePosition.y += event.pageY - this._pointerPosition.y;
            this.handlePosition = this._targePosition;
            this._pointerPosition = {
                x: event.pageX,
                y: event.pageY
            };
        }
    },

    handleMouseup: {
        value: function (event) {
            document.removeEventListener("mousemove", this, false);
            document.removeEventListener("mouseup", this, false);
        }
    },

    willDraw: {
        value: function () {
            this._width = this.triangleElement.clientWidth;
            this._height = this.triangleElement.clientHeight;
        }
    },

    draw: {
        value: function () {
            if (this._handlePosition) {
                this.handleElement.style.left = this._handlePosition.x + "px";
                this.handleElement.style.top = this._handlePosition.y + "px";
            }
        }
    },

    didDraw: {
        value: function () {
            this.application.preventAnimation = false;
        }
    }

});
コード例 #17
0
ファイル: list.js プロジェクト: montagejs/matte
exports.List = Component.specialize(/** @lends module:"matte/ui/list.reel".List# */ {

    constructor: {
        value: function List () {
            this.super();

            this.defineBinding("_repetition.content", {"<-": "content"});

            // Only use a contentController if content is not defined
            this.defineBinding("content.defined() ? null : _repetition.contentController", {
                "<-": "contentController"
            });

        }
    },

    templateDidLoad: {
        value: function() {
            this._scroller.addOwnPropertyChangeListener("scrollY", this);
            this._scroller.addOwnPropertyChangeListener("_maxTranslateY", this);
        }
    },


    /**
      Description TODO
      @private
    */
    _repetition: {
        value: null
    },

    _scroller: {
        value: null
    },

    /**
        Description TODO
        @type {Property}
        @default null
    */
    delegate: {
        value: null
    },

    content: {value: null},

    contentController: {value: null},

    axis: {
        value: null
    },

/**
  Description TODO
  @private
*/
    isSelectionEnabled: {
        value: null
    },

    /**
     * Threshold at which the list will fire a "listEnd" event. This is the ratio of
     */
    listEndEventThreshold: {
        value: 1
    },

    // Initialization

    // TODO we should probably support the programmatic initialization of a list; forwarding the childComponents
    // along to the repetition
    // I want to say that if somebody knows enough to do that they know enough to append the child components' elements
    // into the repetition, not the list

    observeProperty: {
        value: function (key, emit, source, parameters, beforeChange) {
            if (key === "objectAtCurrentIteration" || key === "currentIteration") {
                deprecationWarning(key,":iteration.object");
                if (this._repetition) {
                    return this._repetition.makePropertyObservable(key, emit, source, parameters, beforeChange);
                }
            } else {
                return observeProperty(this, key, emit, source, parameters, beforeChange);
            }
        }
    },

    _fireEndEvent: {
        value: function() {
            this.dispatchEventNamed("listEnd");
        }
    },

    handlePropertyChange: {
        value: function(changeValue, key, object) {
            if (key === "scrollY" || key === "_maxTranslateY") {
                if (this._scroller && object === this._scroller) {
                    if (this._scroller.scrollY >= (this._scroller._maxTranslateY * this.listEndEventThreshold) && this._scroller._maxTranslateY > 0) {
                        this._fireEndEvent();
                    }
                }
            }
        }
    }

});
コード例 #18
0
ファイル: status-bar.js プロジェクト: aadsmdec/skype
/**
 * @module ui/status-bar.reel
 * @requires montage/ui/component
 */
var Component = require("montage/ui/component").Component;

/**
 * @class StatusBar
 * @extends Component
 */
exports.StatusBar = Component.specialize(/** @lends StatusBar# */ {
    constructor: {
        value: function StatusBar() {
            this.super();
        }
    }
});
コード例 #19
0
ファイル: scene-view.js プロジェクト: aadsmdec/app-test-4
exports.SceneView = Component.specialize( {

    /**
     * If true the viewer will automatically switch from one animated viewPoint to another
     * @type {boolean}
     * @default true
     */
    automaticallyCyclesThroughViewPoints: { value: true, writable: true },


    /**
     * If false the scene will be shown only when all resources have been loaded.
     * @type {boolean}
     * @default true
     */
    allowsProgressiveSceneLoading: { value:false, writable:true },

    /**
     * If false the scene will be shown only when all resources have been loaded.
     * @type {boolean}
     * @default true
     */
    allowsViewPointControl: { value: true, writable: true },

    /**
     * A Scene object from runtime/scene to be rendered by SceneView.
     * @type {object}
     * @default true
     */
    scene: {
        get: function() {
            return this._scene;
        },

        set: function(value) {
            if (value) {
                //FIXME:sort of a hack, only set the scene when ready
                if (value.isLoaded() === false) {
                    value.addOwnPropertyChangeListener("status", this);
                    return;
                } else {
                    this.needsDraw = true;
                }

            }

            if (this.scene != value) {
                this.sceneWillChange(value);
                this._scene = value;
                this.sceneDidChange();
            }
        }
    },

    /**
     * 
     * @type {object}
     */
    viewPoint: {
        get: function() {
            return this._viewPoint;
        },
        set: function(value) {
            var id = this._viewPoint ? this._viewPoint.id : null;
            var upcomingId = value ? value.id : null;
            if (id != upcomingId) {
                var previousViewPoint = null;
                if (this._viewPoint && value) {
                    if (this._viewPoint.scene == value.scene) {
                        previousViewPoint = this._viewPoint;
                    }
                }
                this.viewPointWillChange(previousViewPoint, value);
                this._viewPoint = value;
                var animationManager = this.getAnimationManager();
                if (animationManager)
                    animationManager.sceneTime = 0;

                if (value) {
                    if (this.scene && (this._viewPoint.scene == null)) {
                        this._viewPoint.scene = this.scene;
                    }
                }
                this.viewPointDidChange();
            }
        }
    },

    play: {
        value: function() {
            switch (this._state) {
                case this.PAUSE:
                case this.STOP:
                    this._lastTime = Date.now();
                    this._state = this.PLAY;
                    this.needsDraw = true;
                    break;
                default:
                    break;
            }

            this._state = this.PLAY;
        }
    },

    pause: {
        value: function() {
            this._state = this.PAUSE;
        }
    },


    stop: {
        value: function() {
            var animationManager = this.getAnimationManager();
            if (animationManager) {
                animationManager.sceneTime = 0;
            }
            this._state = this.STOP;
            this.needsDraw = true;
        }
    },

    loops: { value: true, writable: true},

    /* Private / Internal section
        all the following section including constants and code is private 
    */

    STOP: { value: 0, writable: true },

    PLAY: { value: 1, writable: true },

    PAUSE: { value: 2, writable: true },
 
     _internalViewPoint: { value: null, writable: true },

    _firstFrameDidRender: { value: false, writable: true },

    _sceneResourcesLoaded: { value: false, writable: true },

    _scene: { value: null, writable: true },

    _consideringPointerForPicking: { writable: true, value: false },

    _mousePosition: { writable: true, value : null },

    _showGradient: { value: false, writable: true },

    _showReflection: { value: false, writable: true },

    _showBBOX: { value: false, writable: true },

    _width: { value: null, writable: true },

    _height: { value: null, writable: true },

    _lastTime: { value: 0, writable: true },

    _state: { value: 0, writable: true },

    _viewPoint: { value: null, writable: true },

    _sceneRenderer: { value: null, writable: true },

    _disableRendering: { value: false, writable: true },

    _contextAttributes : { value: null, writable: true },

    //FIXME: figure out why the clear made by the browser isn't performed when no draw element is performed
    _shouldForceClear: { value: false, writable: true },

    _viewPointIndex: { value: 0, writable: true },

    _cameraController: { value: null, writable: true },

    _defaultViewPoint: { value: null, writable:true },

    translateComposer: { value: null, writable: true },

    scaleFactor: { value: (window.devicePixelRatio || 1), writable: true},

    selectedNode: { value: null, writable:true },

    cameraController: {
        get: function() {
            if (this._cameraController == null) {
                this._cameraController = Montage.create(CameraController);
            }
            return this._cameraController;
        }
    },

    sceneTimeWillChange: {
        value: function(animation, upcomingSceneTime) {

        }
    },

    sceneTimeDidChange: {
        value: function(animation) {

            if (this.scene == null)
                return;
            if (this.scene.glTFElement == null) {
                return;
            }

            var endTime = this.scene.glTFElement.endTime;
            if ((endTime !== -1) && (this.sceneView != null)) {
                var animationManager = this.scene.glTFElement.animationManager;
                if (animationManager.sceneTime / 1000. > endTime) {
                    if (this.automaticallyCyclesThroughViewPoints == true) {
                        var viewPointIndex = this.sceneView._viewPointIndex; //_viewPointIndex is private in view, we could actually put/access this info from scene
                        var viewPoints = SceneHelper.getViewPoints(this.scene);
                        if (viewPoints.length > 0) {
                            var nextViewPoint;
                            var checkIdx = 0;
                            do {
                                animationManager.sceneTime = 0;
                                checkIdx++;
                                viewPointIndex = ++viewPointIndex % viewPoints.length;
                                nextViewPoint = viewPoints[viewPointIndex];
                            } while ((checkIdx < viewPoints.length) && (animationManager.nodeHasAnimatedAncestor(nextViewPoint.glTFElement) == false));
                            this.sceneView.viewPoint = nextViewPoint;
                        }
                    }
                }
            }
        }
    },

    sceneWillChange: {
        value: function(value) {
            if (this.getResourceManager()) {
                this.getResourceManager().reset();
            }
            this._firstFrameDidRender = false;

            if (this.delegate) {
                if (this.delegate.sceneWillChange) {
                    this.delegate.sceneWillChange();
                }
            }

            if (this._scene) {
                this._scene.removeEventListener("cursorUpdate", this);
                this._scene.removeEventListener("materialUpdate", this);
                this._scene.removeEventListener("textureUpdate", this);
                Application.removeEventListener("sceneNodeSelected", this);
            }
        }
    },

    sceneDidChange: {
        value: function() {
            //FIXME: incoming scene should not be expected to be just non null
            if (this._scene) {
                this._sceneResourcesLoaded = false;
                this._scene.addEventListener("cursorUpdate", this);
                this._scene.addEventListener("textureUpdate", this);
                this._scene.addEventListener("materialUpdate", this);
                Application.addEventListener("sceneNodeSelected", this);
                this.applyScene();
                if (this.delegate) {
                    if (this.delegate.sceneDidChange) {
                        this.delegate.sceneDidChange();
                    }
                }
            }
        }
    },

    // Resources
    resourceAvailable: {
        value: function(resource) {
            //only issue draw once all requests finished
            if (this.allowsProgressiveSceneLoading == false) {
                var resourceManager = this.getResourceManager();
                if (resourceManager) {
                    if (resourceManager.hasPendingRequests() == false) {
                        this.needsDraw = true;
                    }
                }
            }
        }
    },

    handleTextureUpdate: {
        value: function(evt) {
            var resourceManager = this.getResourceManager();
            if (resourceManager && this.sceneRenderer) {
                if (this.sceneRenderer.webGLRenderer) {
                    var webGLContext = this.sceneRenderer.webGLRenderer.webGLContext;
                    //trigger texture load/creation
                    var texture = resourceManager.getResource(evt.detail.value, this.sceneRenderer.webGLRenderer.textureDelegate, webGLContext);
                    if (texture) {
                        this.resourceAvailable();
                    }
                }
            }
        }
    },

    handleMaterialUpdate: {
        value: function(evt) {
            this.needsDraw = true;
        }
    },

    handleCursorUpdate: {
        value: function(evt) {
            if (this.element != null) {
                this.element.style.cursor = evt.detail;            
            }
        }
    },



    // Montage

    constructor: {
        value: function View() {
            this.super();
        }
    },


    animationDidStart: {
        value: function(animation) {
            this.needsDraw = true;
            //FIXME:Work-around a cursor issue as after a camera change
            this.element.style.cursor = "default";            
        }
    },

    animationDidStop: {
        value: function(animation) {
        }
    },

    animationDidUpdate: {
        value: function(animation) {
            var step = this._viewPointAnimationStep;
            var previousViewPoint = animation.extras["previousViewPoint"];
            if (this.__matrix == null)
                this.__matrix = mat4.create();
            if (this.__transform == null)
                this.__transform = Object.create(Transform).init();

            var t1 = previousViewPoint.glTFElement.transform;
            var t2 = this.viewPoint.glTFElement.transform;

            t1.interpolateToTransform(t2, step, this.__transform);
            mat4.multiply(this.viewPoint.glTFElement.parent.worldMatrix, this.__transform.matrix, this.__matrix);
            this._internalViewPoint.transform.matrix = this.__matrix;
        }
    },

    viewPointWillChange: {
        value:function(previousViewPoint, newViewPoint) {
            if (this.sceneRenderer) {
                if (newViewPoint) {
                    if (this.scene.glTFElement) {
                        var animationManager = this.getAnimationManager();
                        //we do not animate already animated cameras
                        var hasStaticViewPoint = animationManager.nodeHasAnimatedAncestor(newViewPoint.glTFElement) == false;
                        if (hasStaticViewPoint == false && previousViewPoint != null) {
                            hasStaticViewPoint |= animationManager.nodeHasAnimatedAncestor(previousViewPoint.glTFElement) == false;
                        }
                        if (hasStaticViewPoint && (previousViewPoint != null)) {
                            /* manually add the animation to handle the camera blending */
                            var viewPointAnimationStep = Object.create(BasicAnimation).init();

                            viewPointAnimationStep.path = "_viewPointAnimationStep";
                            viewPointAnimationStep.target = this;
                            viewPointAnimationStep.delegate = this;
                            viewPointAnimationStep.from = Number(0);
                            viewPointAnimationStep.to = Number(1);
                            viewPointAnimationStep.duration = 1000;
                            viewPointAnimationStep.timingFunction = "ease-out";

                            viewPointAnimationStep.extras["previousViewPoint"] = previousViewPoint;

                            animationManager.playAnimation(viewPointAnimationStep);

                            //FIXME: This is an internal detail exposed for now
                            viewPointAnimationStep.animationWasAddedToTarget();
                        }
                    }
                }
            }
        }
    },

    viewPointDidChange: {
        value:function() {
            this.cameraController.viewPoint = this.viewPoint;

            if (this.sceneRenderer) {
                if (this._viewPoint) {
                    if (this.scene) {
                        if (this.scene.glTFElement) {
                            this.sceneRenderer.technique.rootPass.viewPoint = this._internalViewPoint;
                            this._viewPointIndex = this._getViewPointIndex(this.viewPoint);
                            this.needsDraw = true;
                        }
                    }
                }
            }
        }
    },

    viewPoint: {
        get: function() {
            return this._viewPoint;
        },
        set: function(value) {
            var id = this._viewPoint ? this._viewPoint.id : null;
            var upcomingId = value ? value.id : null;
            if (id != upcomingId) {
                var previousViewPoint = null;
                if (this._viewPoint && value) {
                    if (this._viewPoint.scene == value.scene) {
                        previousViewPoint = this._viewPoint;
                    }
                }
                this.viewPointWillChange(previousViewPoint, value);
                this._viewPoint = value;
                var animationManager = this.getAnimationManager();
                if (animationManager)
                    animationManager.sceneTime = 0;

                if (value) {
                    if (this.scene && (this._viewPoint.scene == null)) {
                        this._viewPoint.scene = this.scene;
                    }
                }
                this.viewPointDidChange();
            }
        }
    },

    canvas: {
        get: function() {
            if (this.templateObjects) {
                return this.templateObjects.canvas;
            } 
            return null;
        }
    },

    sceneRenderer: {
        get: function() {
            return this._sceneRenderer;
        },
        set: function(value) {
            if (value != this._sceneRenderer) {
                this._sceneRenderer = value;
            }
        }
    },

    handleStatusChange: {
        value: function(status, key, object) {
            if (status === "loaded") {
                this.scene = object;
                this.needsDraw = true;

                if (this.scene.glTFElement) {
                    if (this.scene.glTFElement.animationManager) {
                        if (this.scene.glTFElement.animationManager) {
                            this.scene.glTFElement.animationManager.delegate = this;
                        }
                    }
                }
            }
        }
    },

    //FIXME: cache this in the scene
    _getViewPointIndex: {
        value: function(viewPoint) {
            var viewPoints = SceneHelper.getGLTFViewPoints(viewPoint.scene);

            for (var i = 0 ; i < viewPoints.length ; i++) {
                if (viewPoints[i].baseId === viewPoint.id)
                    return i;
            }
            return 0;
        }
    },

    applyScene: {
        value:function () {
            var m3dScene = this.scene;
            var scene = m3dScene.glTFElement;
            var self = this;
            if (this.sceneRenderer) {
                if (this.sceneRenderer.technique.rootPass) {
                    if (scene) {
                        var viewPoints= SceneHelper.getViewPoints(m3dScene);
                        var hasCamera = viewPoints.length > 0;
                        // arbitry set first coming camera as the view point
                        if (hasCamera) {
                            var shouldKeepViewPoint = false;
                            if (this.viewPoint) {
                                if (this.viewPoint.scene) {
                                    shouldKeepViewPoint = (this.viewPoint.scene === this.scene); 
                                }                                   
                            }
                            if (shouldKeepViewPoint === false) {
                                this.viewPoint = viewPoints[0];
                            }
                        } else {
                            var sceneBBox =  scene.rootNode.getBoundingBox(true);
                            var bbox = Object.create(BBox).init(sceneBBox[0], sceneBBox[1]);
                            scene.rootNode.transform._updateDirtyFlag(false);
                            var glTFScene = this.scene.glTFElement;
                            var sceneBBox =  glTFScene.rootNode.getBoundingBox(true);
                            var midPoint = [
                                (sceneBBox[0][0] + sceneBBox[1][0]) / 2,
                                (sceneBBox[0][1] + sceneBBox[1][1]) / 2,
                                (sceneBBox[0][2] + sceneBBox[1][2]) / 2];
                            var viewPortDistance = midPoint[2];
                            var eye = [midPoint[0], midPoint[1], midPoint[2]];
                            eye[2] += (sceneBBox[1][0] - sceneBBox[0][0]) + (sceneBBox[1][2] - sceneBBox[0][2]);

                            this._defaultViewPoint = SceneHelper.createNodeIncludingCamera("camera01", m3dScene);
                            this._defaultViewPoint.glTFElement.cameras[0].projection.zfar = eye[2] + sceneBBox[1][2] - sceneBBox[0][2];
                            this._defaultViewPoint.glTFElement.transform.translation = eye;
                            this.viewPoint = this._defaultViewPoint;
                        }

                        this.sceneRenderer.scene = scene;
                    }

                    if (this.viewPoint) {
                        if (this.viewPoint.scene == null) {
                            this.viewPoint.scene = m3dScene;
                        }
                        if (this.sceneRenderer) {
                            this.viewPointDidChange();
                        }
                    }

                    if (this.allowsProgressiveSceneLoading === false) {
                        var renderPromise = this.scene.prepareToRender(this.sceneRenderer.webGLRenderer);
                        renderPromise.then(function () {
                            self._sceneResourcesLoaded = true;
                            self.needsDraw = true;
                        }, function (error) {
                        }, function (progress) {
                        });

                    } else {
                        this.needsDraw = true;
                    }
                }
            }
        }
    },

    getRelativePositionToCanvas: {
        value: function(event) {
            return dom.convertPointFromPageToNode(this.canvas, Point.create().init(event.pageX, event.pageY));
        }
    },

    enterDocument: {
        value: function(firstTime) {
            window.addEventListener("resize", this, true);
            var self = this;

            if (this.scene) {
                this.scene.dispatchEventNamed("enteredDocument", true, false, this);
                this.scene.loadCSSStyles();
            }

            this.element.addEventListener('wheel', function (event) {
                if ((self.allowsViewPointControl == true) && (self.scene != null)) {
                    if (self.scene.rootNode) {
                        self.cameraController.node = self.scene.rootNode;
                        self.cameraController.zoom(event);
                    }
                }
                event.stopPropagation();
                event.preventDefault();
            }, false);

            this.element.addEventListener('gesturestart', function (event) {
                event.preventDefault();
            }, false);

            this.element.addEventListener('gesturechange', function (event) {
                event.preventDefault();
            }, false);

            var composer = this.translateComposer;

            composer.addEventListener("translate", function(event) {
                if ((self.allowsViewPointControl == true) && (self.scene != null)) {
                    if (self.scene.rootNode) {
                        self.cameraController.node = self.scene.rootNode;
                        self.cameraController.translate(event);
                    }
                }
                self.needsDraw = true;
            });

            composer.addEventListener('translateStart', function (event) {
                if ((self.allowsViewPointControl == true) && (self.scene != null)) {
                    if (self.scene.rootNode) {
                        self.cameraController.node = self.scene.rootNode;
                        self.cameraController.beginTranslate(event);
                    }
                }
            }, false);

            composer.addEventListener('translateEnd', function (event) {
                if ((self.allowsViewPointControl == true) && (self.scene != null)) {
                    if (self.scene.rootNode) {
                        self.cameraController.node = self.scene.rootNode;
                        self.cameraController.endTranslate(event);
                    }
                }
            }, false);

            this.addComposerForElement(composer, this.canvas);

            /* Hack for MON-420 */
            var wheelEventName;
            if (typeof window.onwheel !== "undefined"){
                wheelEventName = "wheel";
            } else {
                wheelEventName = "mousewheel";
            }
            this.canvas.removeEventListener(wheelEventName, composer, true);
            this.canvas.removeEventListener(wheelEventName, composer, false);

            var simulateContextLoss = false;  //Very naive for now

            if (simulateContextLoss) {
                this.canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(this.canvas);
            }

            var webGLOptions = {  premultipliedAlpha: true, antialias: true, preserveDrawingBuffer: false };
            var webGLContext =  this.canvas.getContext("experimental-webgl", webGLOptions) ||
                                this.canvas.getContext("webgl", webGLOptions);

            function throwOnGLError(err, funcName, args) {
                throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName;
            };

            //webGLContext = WebGLDebugUtils.makeDebugContext(webGLContext, throwOnGLError);

            if (webGLContext == null) {
                console.log("Please check that your browser enables & supports WebGL");
                return
            }

            this._contextAttributes = webGLContext.getContextAttributes();
            var antialias = false;
            if (this._contextAttributes) {
                antialias = this._contextAttributes.antialias;
            }
            if (antialias == false) {
                console.log("WARNING: anti-aliasing is not supported/enabled")
            }

            //check from http://davidwalsh.name/detect-ipad
            if (navigator) {
                // For use within normal web clients
                var isiPad = navigator.userAgent.match(/iPad/i) != null;
                if (isiPad == false) {
                    // For use within iPad developer UIWebView
                    // Thanks to Andrew Hedges!
                    var ua = navigator.userAgent;
                    isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
                }
                if (isiPad) {
                    this._shouldForceClear = true;
                }
            }

            var webGLRenderer = Object.create(WebGLRenderer).initWithWebGLContext(webGLContext);
            webGLContext.enable(webGLContext.DEPTH_TEST);
            var options = null;
            this.sceneRenderer = Object.create(SceneRenderer);
            this.sceneRenderer.init(webGLRenderer, options);

            var resourceManager = this.getResourceManager();
            if (!resourceManager.isObserving()) {
                resourceManager.observers.push(this);
                resourceManager.startObserving();
            }

            if (this.scene)
                this.applyScene();

            this.canvas.addEventListener("webglcontextlost", function(event) {
                console.log("context was lost");
                event.preventDefault();
                self.getResourceManager.stopObserving();
                self.sceneRenderer.webGLRenderer.resourceManager.reset();
                self.needsDraw = false;
                self._disableRendering = true;
            }, false);

            this.canvas.addEventListener("webglcontextrestored", function(event) {
                console.log("context was restored");
                event.preventDefault();
                webGLContext.enable(webGLContext.DEPTH_TEST);
                self.needsDraw = true;
                self._disableRendering = false;
            }, false);

            if (simulateContextLoss) {
                setTimeout(function() {
                    self.canvas.loseContext();
                }, 5000);
            }

            //setup gradient
            var self = this;
            var techniquePromise = BuiltInAssets.assetWithName("gradient");
            techniquePromise.then(function (glTFScene_) {
                var scene = Montage.create(Scene).init(glTFScene_);
                self.gradientRenderer = Object.create(SceneRenderer);
                self.gradientRenderer.init(webGLRenderer, null);
                self.gradientRenderer.scene = scene.glTFElement;
                var viewPoints = SceneHelper.getViewPoints(scene);
                if (viewPoints) {
                    if (viewPoints.length) {
                        self.gradientRenderer.technique.rootPass.viewPoint = viewPoints[0].glTFElement;
                    }
                }
                self.needsDraw = true;
            }, function (error) {
            }, function (progress) {
            });

            this.actionDispatcher = ActionDispatcher.create().initWithScene(this.scene);

            this.needsDraw = true;

            this.canvas.addEventListener('touchstart', this.start.bind(this), true);
            this.canvas.addEventListener('touchend', this.end.bind(this), true);
            this.canvas.addEventListener('touchcancel', this.end.bind(this), true);
            this.canvas.addEventListener('touchmove', this.move.bind(this), true);
            this.canvas.addEventListener('gesturechange', this, true);
            this.canvas.addEventListener('mousedown', this.start.bind(this), true);
            this.canvas.addEventListener('mouseup', this.end.bind(this), true);
            this.canvas.addEventListener('mousemove', this.move.bind(this), true);
            this.canvas.addEventListener('wheel', this, true);
        }
    },

    exitDocument: {
        value: function() {
            window.removeEventListener("resize", this, true);
        }
    },

    captureMousewheel: {
        value: function() {
            this.needsDraw = true;
        }
    },

    captureWheel: {
        value: function() {
            this.needsDraw = true;
        }
    },

    captureGesturechange: {
        value: function() {
            this.needsDraw = true;
        }
    },

    _TOUCH_DOWN: { value: 0 },

    _TOUCH_UP: { value: 1 },

    _TOUCH_MOVE: { value: 2 },

    _eventType: { value: -1, writable: true },

    _previousEventType: { value: -1, writable: true },

    _lastHandledComponent: { value: null, writable: true },

    _previousHandledComponent: { value: null, writable: true },

    handleSelectedNode: {
        value: function(glTFElementID) {
            var glTFElement = null,
                previousGlTFElement = this._previousHandledComponent,
                previousHandledComponent3D = previousGlTFElement ? previousGlTFElement.component3D : null;

            if (this._eventType === this._TOUCH_UP) {
                if (previousGlTFElement && previousHandledComponent3D) {
                    previousHandledComponent3D.handleActionOnGlTFElement(previousGlTFElement, Component3D._TOUCH_UP);
                }

                this._eventType = -1;
            }

            if (glTFElementID) {
                glTFElement = this.scene.glTFElement.ids[glTFElementID];
            }

            //are we out of a move ?
            if (previousGlTFElement && previousHandledComponent3D && this._previousEventType === this._TOUCH_MOVE &&
                glTFElement !== previousGlTFElement) {
                previousHandledComponent3D.handleActionOnGlTFElement(previousGlTFElement, Component3D._EXIT);
            }

            if (this._eventType === this._TOUCH_MOVE && glTFElement !== previousGlTFElement) {
                if (glTFElement) {
                    this.actionDispatcher.dispatchActionOnGlTFElement(Component3D._ENTER, glTFElement);
                } else {
                    this._eventType = -1;
                }
            } else if (glTFElement && this._eventType === this._TOUCH_DOWN) {
                this.actionDispatcher.dispatchActionOnGlTFElement(Component3D._TOUCH_DOWN, glTFElement);
                this._eventType = -1;
            }

            this._previousHandledComponent = glTFElement;
            this._previousEventType = this._eventType;
        }
    },

    move: {
        value: function (event) {
            var position = this.getRelativePositionToCanvas(event);
            this._mousePosition = [position.x * this.scaleFactor,  this.height - (position.y * this.scaleFactor)];
            this._eventType = this._TOUCH_MOVE;
            this.needsDraw = true;
        }
    },

    start: {
        value: function (event) {
            event.preventDefault();
            this._consideringPointerForPicking = true;
            var position = this.getRelativePositionToCanvas(event);
            this._mousePosition = [position.x * this.scaleFactor,  this.height - (position.y * this.scaleFactor)];

            if (this._state === this.PLAY) {
                this.pause();
            }

            this._eventType = this._TOUCH_DOWN;

            this.needsDraw = true;
        }
    },

    end:{
        value: function (event) {
            if (this._consideringPointerForPicking && event.target === this.canvas) {
                event.preventDefault();
            }

            if (this._state === this.PAUSE) {
                if (this.scene && this.viewPoint) {
                    if (this.scene.glTFElement) {
                        var animationManager = this.getAnimationManager();
                        if (animationManager.nodeHasAnimatedAncestor(this.viewPoint.glTFElement)) {
                            this.play();
                        }
                    }
                }
            }

            this._consideringPointerForPicking = false;
            this._eventType = this._TOUCH_UP;
            this.handleSelectedNode(null);
            this._mousePosition = null;
        }
    },

    getWebGLRenderer: {
        value: function() {
            return this.sceneRenderer ? this.sceneRenderer.webGLRenderer : null;
        }
    },

    getWebGLContext: {
        value: function() {
            var renderer = this.getWebGLRenderer();
            return renderer ? renderer.webGLContext : null;
        }
    },

    getResourceManager: {
        value: function() {
            var renderer = this.getWebGLRenderer();
            return renderer ? renderer.resourceManager : null;
        }
    },

    getAnimationManager: {
        value: function() {
            if (this.scene) {
                if (this.scene.glTFElement) {
                    return this.scene.glTFElement.animationManager;
                }
            }
            return null;
        }
    },

    showBBOX: {
        get: function() {
            return this._showBBOX;
        },
        set: function(flag) {
            if (flag != this._showBBOX) {
                this._showBBOX = flag;
                this.needsDraw = true;
            }
        }
    },

    showGradient: {
        get: function() {
            return this._showGradient;
        },
        set: function(flag) {
            if (flag != this._showGradient) {
                this._showGradient = flag;
                this.needsDraw = true;
            }
        }
    },

    showReflection: {
        get: function() {
            return this._showReflection;
        },
        set: function(flag) {
            this._showReflection = flag;
            this.needsDraw = true;
        }
    },

    handleSceneNodeSelected: {
        value: function(event) {
            this.selectedNode = event.detail;
            this.needsDraw = true;
        }
    },

    displayBBOX: {
        value: function(glTFNode) {
            if (!this.scene)
                return;
            if (this.scene.glTFElement) {
                if (glTFNode.getBoundingBox != null) { //work-around issue with scene-tree
                    var cameraMatrix = this.sceneRenderer.technique.rootPass.scenePassRenderer._viewPointMatrix;            
                    var projectionMatrix = this.viewPoint.glTFElement.cameras[0].projection.matrix;
                    this.getWebGLRenderer().drawBBOX(glTFNode.getBoundingBox(true), cameraMatrix, mat4.identity(), projectionMatrix);
                }
            }
        }
    },

    displayAllBBOX: {
        value: function() {
            if (!this.scene)
                return;
            if (this.scene.glTFElement) {
                var cameraMatrix = this.sceneRenderer.technique.rootPass.scenePassRenderer._viewPointMatrix;            
                var ctx = mat4.identity();
                var node = this.scene.glTFElement.rootNode;
                var self = this;

                node.apply( function(node, parent, ctx) {
                    if (node.boundingBox) {
                        var projectionMatrix = self.viewPoint.glTFElement.cameras[0].projection.matrix;
                        self.getWebGLRenderer().drawBBOX(node.boundingBox, cameraMatrix, node.worldMatrix, projectionMatrix);
                    }
                    return null;
                }, true, ctx);
            }
        }
    },

    width: {
        get: function() {
            if (this._width == null) {
                var computedStyle = window.getComputedStyle(this.element, null);
                return parseInt(computedStyle["width"]) * this.scaleFactor;
            }
            return this._width;
        },
        set: function(value) {
            if (value != this._width) {
                this._width = value * this.scaleFactor;
                this.needsDraw = true;
            }
        }
    },

    height: {
        get: function() {
            if (this._height == null) {
                var computedStyle = window.getComputedStyle(this.element, null);
                return parseInt(computedStyle["height"]) * this.scaleFactor;
            }
            return this._height;
        },
        set: function(value) {
            if (value != this._height) {
                this._height = value * this.scaleFactor;
                this.needsDraw = true;
            }
        }
    },

    _forwardToNextAnimatedViewPointIfNeeded: {
        value: function() {
            var animationManager = this.getAnimationManager();
            if (animationManager) {
                if (animationManager.nodeHasAnimatedAncestor(this.viewPoint.glTFElement) == true) {
                    return;
                }
                var viewPointIndex = this._viewPointIndex; //_viewPointIndex is private in view, we could actually put/access this info from scene
                var viewPoints = SceneHelper.getViewPoints(this.scene);
                if (viewPoints.length > 1) {
                    var nextViewPoint = this.viewPoint;
                    var checkIdx = 0;
                    while ((checkIdx < viewPoints.length) && (animationManager.nodeHasAnimatedAncestor(nextViewPoint.glTFElement) == false)) {
                        viewPointIndex = ++viewPointIndex % viewPoints.length;
                        nextViewPoint = viewPoints[viewPointIndex];
                        checkIdx++;
                    }
                    this.viewPoint = nextViewPoint;
                }
            }
        }
    },

    draw: {
        value: function() {
            //Update canvas when size changed
            var webGLContext = this.getWebGLContext();
            if (webGLContext == null || this._disableRendering)
                return;
            this.sceneRenderer.technique.rootPass.viewPoint = this._internalViewPoint;

            //WebGL does it for us with preserveDrawBuffer = false
            if (this._shouldForceClear || (this._contextAttributes.preserveDrawingBuffer == null) || (this._contextAttributes.preserveDrawingBuffer == true)) {
                webGLContext.clearColor(0,0,0,0.);
                webGLContext.clear(webGLContext.DEPTH_BUFFER_BIT | webGLContext.COLOR_BUFFER_BIT);
            }

            if ((this.allowsProgressiveSceneLoading === false) && (this._sceneResourcesLoaded === false)) {
                return;
            }

            if (this._scene == null || this.viewPoint == null || this._disableRendering)
                return;

            var width = this.width;
            var height = this.height;

            //as indicated here: http://www.khronos.org/webgl/wiki/HandlingHighDPI
            //set draw buffer and canvas size
            if ((width != this.canvas.width) || (height != this.canvas.height)) {
                this.canvas.style.width = (width / this.scaleFactor) + "px";
                this.canvas.style.height = (height / this.scaleFactor) + "px";
                this.canvas.width = width;
                this.canvas.height = height;
                webGLContext.viewport(0, 0, width, height);
            }

            var viewPoint = this.viewPoint;
            var self = this;
            var time = Date.now();

            if (this.sceneRenderer && this.scene) {
                var animationManager = this.getAnimationManager();
                if (this._state == this.PLAY && animationManager) {
                    this._forwardToNextAnimatedViewPointIfNeeded();
                    animationManager.sceneTime += time - this._lastTime;
                    var endTime = this.scene.glTFElement.endTime;
                    if (animationManager.sceneTime / 1000. > endTime) {
                        if (this.loops) {
                            animationManager.sceneTime = endTime == 0 ? 0 : animationManager.sceneTime % endTime;
                        } else {
                            this.stop();
                        }
                    }
                    animationManager.updateTargetsAtTime(animationManager.sceneTime, this.getResourceManager());
                }

                if (viewPoint.glTFElement) {
                    viewPoint.glTFElement.cameras[0].projection.aspectRatio =  width / height;

                    this._internalViewPoint.transform.matrix = viewPoint.glTFElement.worldMatrix;
                    this._internalViewPoint.cameras[0] = viewPoint.glTFElement.cameras[0];
                }
                animationManager.evaluateAtTime(time, this.getResourceManager());
                if (animationManager.hasActiveAnimations()) {
                    this.needsDraw = true;
                }
            }
            this._lastTime = time;

            if (this._state == this.PLAY)
               this.needsDraw = true;

            if (this.scene) {
                var renderer = this.sceneRenderer.webGLRenderer;
                if (webGLContext) {
                    if (this.__renderOptions == null)
                        this.__renderOptions = {};

                    //FIXME: on the iPad with private function to enable webGL there was an issue with depthMask (need to re-check if that got fixed)
                    var allowsReflection = this.showReflection;
                    if(allowsReflection) {
                        /* ------------------------------------------------------------------------------------------------------------
                         Draw reflected scene
                        ------------------------------------------------------------------------------------------------------------ */
                        webGLContext.depthFunc(webGLContext.LESS);
                        webGLContext.enable(webGLContext.DEPTH_TEST);
                        webGLContext.frontFace(webGLContext.CW);
                        webGLContext.depthMask(true);
                        //should retrieve by node
                        var rootNode = this.scene.glTFElement.rootNode;
                        var nodeBBOX = rootNode.getBoundingBox(true);
                        var savedTr = mat4.create(rootNode.transform.matrix);
                        var scaleMatrix = mat4.scale(mat4.identity(), [1, 1, -1]);
                        mat4.multiply(scaleMatrix, rootNode.transform.matrix) ;
                        rootNode.transform.matrix = scaleMatrix;
                        var invVNodeBBOX = rootNode.getBoundingBox(true);
                        var mirrorMatrix = mat4.identity();
                        var translationMatrix = mat4.translate(mat4.identity(), [0, 0,  (nodeBBOX[0][2] - invVNodeBBOX[1][2])]);
                        mat4.multiply(mirrorMatrix, translationMatrix);
                        mat4.multiply(mirrorMatrix, scaleMatrix);
                        rootNode.transform.matrix = mirrorMatrix;
                        this.sceneRenderer.render(time, this.__renderOptions);
                        rootNode.transform.matrix = savedTr;
                        webGLContext.frontFace(webGLContext.CCW);
                    }

                    if (this.showGradient || allowsReflection) {
                        //FIXME:For now, just allow reflection when using default camera
                        if (this.viewPoint === this._defaultViewPoint) {
                            if (this.gradientRenderer) {
                                webGLContext.enable(webGLContext.BLEND);
                                webGLContext.disable(webGLContext.DEPTH_TEST);
                                webGLContext.disable(webGLContext.CULL_FACE);
                                webGLContext.depthMask(false);
                                this.gradientRenderer.render(time, this.__renderOptions);
                                webGLContext.depthMask(true);
                                webGLContext.enable(webGLContext.DEPTH_TEST);
                                webGLContext.enable(webGLContext.CULL_FACE);
                                webGLContext.disable(webGLContext.BLEND);
                            }
                        }
                    }

                    if (this._mousePosition) {
                        this.__renderOptions.picking = true;
                        this.__renderOptions.coords = this._mousePosition;
                        this.__renderOptions.delegate = this;
                        this.sceneRenderer.render(time, this.__renderOptions);
                    }

                    this.__renderOptions.picking = false;
                    this.__renderOptions.coords = null;
                    this.__renderOptions.delegate = null;

                    this.sceneRenderer.render(time, this.__renderOptions);

                    //FIXME: ...create an API to retrieve the actual viewPoint matrix...
                    if (this.showBBOX)
                        this.displayAllBBOX();
                    //if (this.selectedNode) {
                    //    this.displayBBOX(this.selectedNode.glTFElement);
                    //}

                    webGLContext.flush();

                    if (this._firstFrameDidRender === false) {
                        this._firstFrameDidRender = true;
                        this.dispatchEventNamed("firstFrameDidRender", true, false, this);
                    }
                    /*
                    var error = webGLContext.getError();
                    if (error != webGLContext.NO_ERROR) {
                        console.log("gl error"+webGLContext.getError());
                    }
                    */
                }
            }
        }
    },

    captureResize: {
        value: function(evt) {
            this.needsDraw = true;

            var w = this.element.offsetWidth;
            var h = this.element.offsetHeight;

            this.width = w;
            this.height = h;
            this.needsDraw = true;

        }
    },

    templateDidLoad: {
        value: function() {
            var self = this;

            var parent = this.parentComponent;
            var animationTimeout = null;
            var composer = TranslateComposer.create();
            composer.animateMomentum = true;
            composer.hasMomentum = true;
            composer.allowFloats = true;
            composer.pointerSpeedMultiplier = 0.15;
            this._internalViewPoint = SceneHelper.createGLTFNodeIncludingCamera("__internal_viewPoint__");
            this.translateComposer = composer;

            this.needsDraw = true;
        }
    }
});
コード例 #20
0
ファイル: main.js プロジェクト: marchant/montage
var Component = require("montage/ui/component").Component;    

exports.Main = Component.specialize();
コード例 #21
0
ファイル: disk-selector.js プロジェクト: mactanxin/gui
exports.DiskSelector = Component.specialize({
    enterDocument: {
        value: function() {
            this.disks = [];
        }
    },

    addDisk: {
        value: function(disk) {
            if (!this.hasDisk(disk)) {
                this.disks.push(disk);
                disk._usedInComponent = this;
            }
        }
    },

    removeDisk: {
        value: function(disk) {
            var diskIndex = this.disks.indexOf(disk);
            if (diskIndex !== -1) {
                this.disks.splice(diskIndex, 1);
            }
        }
    },

    hasDisk: {
        value: function(disk) {
            return this.disks.indexOf(disk) !== -1;
        }
    }
});
コード例 #22
0
ファイル: ipmi.js プロジェクト: Cbrdiv/gui
var Component = require("montage/ui/component").Component;

/**
 * @class Ipmi
 * @extends Component
 */
exports.Ipmi = Component.specialize();
コード例 #23
0
ファイル: system-section.js プロジェクト: abwaters/gui
var Component = require("montage/ui/component").Component;

/**
 * @class SystemSection
 * @extends Component
 */
exports.SystemSection = Component.specialize();
コード例 #24
0
ファイル: alert-notification.js プロジェクト: abwaters/gui
exports.AlertNotification = Component.specialize(/** @lends AlertNotification# */ {

    _object: {
        value: null
    },

    object: {
        set: function (object) {
            if (this._object !== object) {
                this._object = object;
            }
        },
        get: function () {
            return this._object;
        }
    },

    UIDescriptor: {
        value: null
    },

    infoExpanded: {
        value: false
    },

    enterDocument: {
        value: function() {
            this._loadAlertService();
        }
    },

    handleDismissButtonAction: {
        value: function () {
            var self = this;
            this._loadAlertService().then(function() {
                self._alertService.dismiss(self._object.jobId);
            });
        }
    },

    _loadAlertService: {
        value: function() {
            var self = this;
            if (this._alertService) {
                return Promise.resolve(this._alertService);
            } else {
                return Model.populateObjectPrototypeForType(Model.Alert).then(function (Alert) {
                    self._alertService = Alert.constructor;
                });
            }
        }
    }

});
コード例 #25
0
var Component=require("montage/ui/component").Component;exports.Converter=Component.specialize({constructor:{value:function(){this.super()}}});
コード例 #26
0
exports.AbstractDropZoneComponent = Component.specialize( /** @lends AbstractDropZoneComponent# */ {


    _acceptDrop: {
        value: false
    },


    acceptDrop: {
        set: function (value) {
            if (typeof value === "boolean" && this._acceptDrop !== value) {
                this._acceptDrop = value;

                this.needsDraw = true;
            }
        },
        get: function () {
            return this._acceptDrop;
        }
    },


    _uid: {
        value: null
    },


    uid: {
        get: function () {
            return this._uid || (this._uid = DragDropComponentManager.constructor.generateUID());
        }
    },

    scrollThreshold: {
        value: 60
    },

    _willAcceptDrop: {
        value: false
    },


    willAcceptDrop: {
        set: function (value) {
            if (typeof value === "boolean" && this._willAcceptDrop !== value) {
                this._willAcceptDrop = value;

                this.needsDraw = true;
            }
        },
        get: function () {
            return this._willAcceptDrop;
        }
    },


    _boundingRect: {
        value: null
    },


    enterDocument: {
        value: function (firstime) {
            if (firstime) {
                this.classList.add("montage--DropZone");
            }

            DragDropComponentManager.registerDropZoneComponent(this);
        }
    },


    exitDocument: {
        value: function () {
            DragDropComponentManager.releaseDropZoneComponent(this);
        }
    },


    handleComponentDragStart: {
        value: function (draggableComponent, dragStartEvent) {
            this.willAcceptDrop = this._shouldAcceptComponent(draggableComponent, dragStartEvent);
        }
    },

    handleComponentDrop: {
        value: function (draggableComponent) {
            if (this._acceptDrop) {
                draggableComponent.hasBeenDropped = true;
                draggableComponent.dropZoneDropped = this;

                if (typeof this.didComponentDrop === "function") {
                    this.didComponentDrop(draggableComponent);
                }
            }
        }
    },


    handleComponentDragEnd: {
        value: function (draggableComponent, dragEndEvent) {
            if (this._willAcceptDrop || this._acceptDrop) {
                if (typeof this.didComponentDragEnd === "function") {
                    this.didComponentDragEnd(draggableComponent, dragEndEvent);
                }

                this.willAcceptDrop = false;
                this.acceptDrop = false;
                this._boundingRect = null;
                this._spacerElementBoundingRect = null;
            }
        }
    },


    handleFilesDragStart: {
        value: function (dragStartEvent) {
            this.willAcceptDrop = this._shouldAcceptFiles(dragStartEvent);

            if (this._willAcceptDrop) {
                this._element.addEventListener("dragover", this, false);
            }
        }
    },


    handleDragover: {
        value: function (event) {
            var dataTransfer = event.dataTransfer;

            if (!this._acceptDrop) {
                if (this._willAcceptDrop) {
                    event.preventDefault();

                    dataTransfer.dropEffect = dataTransfer.effectAllowed;
                    this.acceptDrop = true;

                    this._element.addEventListener("dragleave", this, false);
                    this._element.addEventListener("drop", this, false);
                } else {
                    dataTransfer.dropEffect = "none";
                }
            } else { // Component is already accepting drop.
                event.preventDefault();

            }
        }
    },


    handleDrop: {
        value: function (event) {
            var dataTransfer = event.dataTransfer;

            if (this._acceptDrop) {
                if (dataTransfer && dataTransfer.types && dataTransfer.types.has("Files")) {
                    event.preventDefault();

                    if (typeof this.didFilesDrop === "function") {
                        this.didFilesDrop(dataTransfer.files, event);
                    }
                }

                this.acceptDrop = false;
                this.willAcceptDrop = false;

                this._element.removeEventListener("dragover", this, false);
                this._removeFileListeners();
            }
        }
    },


    handleDragleave: {
        value: function (event) {
            if (typeof this.didDragFileLeave === "function") {
                this.didDragFileLeave(event);
            }

            this.acceptDrop = false;
            this._removeFileListeners();
        }
    },


    handleFilesDragEnd: {
        value: function (event) {
            if (this._willAcceptDrop || this._acceptDrop) {
                if (typeof this.didDragFileEnd === "function") {
                    this.didDragFileEnd(event);
                }

                this.willAcceptDrop = false;
                this.acceptDrop = false;
                this._boundingRect = null;

                this._element.removeEventListener("dragover", this, false);
            }
        }
    },


    _removeFileListeners: {
        value: function () {
            this._element.removeEventListener("dragleave", this, false);
            this._element.removeEventListener("drop", this, false);
        }
    },


    _shouldAcceptComponent: {
        value: function (component, event) {
            var shouldAcceptComponent = true;

            if (typeof this.shouldAcceptComponent === "function") {
                shouldAcceptComponent = this.shouldAcceptComponent(component, event);
            }

            return shouldAcceptComponent;
        }
    },


    _shouldAcceptFiles: {
        value: function (event) {
            var dataTransfer = event.dataTransfer,
                shouldAcceptFile = false;

            if (dataTransfer) {
                var mimeTypes = dataTransfer.types;

                if (mimeTypes && mimeTypes.has("Files") && typeof this.shouldAcceptFiles === "function") {
                    shouldAcceptFile = this.shouldAcceptFiles(event);
                }
            }

            return shouldAcceptFile;
        }
    },

    willDraw: {
        value: function () {
            if (this._willAcceptDrop && !this._boundingRect) {
                this._boundingRect = this._element.getBoundingClientRect();
            }

            if (this.acceptDrop && this.autoScrollView) {
                this._scrollviewElementBoundingRect = this.scrollView.element.getBoundingClientRect();
            }
        }
    },

    draw: {
        value: function () {
            if (this._willAcceptDrop && this._acceptDrop) {
                this._element.classList.remove("willAcceptDrop");
                this._element.classList.add("acceptDrop");

            } else if (this._willAcceptDrop) {
                this._element.classList.remove("acceptDrop");
                this._element.classList.add("willAcceptDrop");

            } else {
                this._element.classList.remove("acceptDrop");
                this._element.classList.remove("willAcceptDrop");
            }

            if (this.acceptDrop && this.scrollView) {
                var scrollViewBoundingRect = this._scrollviewElementBoundingRect,
                    scrollThreshold = this.scrollThreshold,
                    scrollViewElement = this.scrollView.element;

                if (this.autoScrollView) {
                    if(scrollViewElement.scrollHeight > scrollViewElement.offsetHeight) {
                        this.multiplierY  = 0;

                        if (scrollViewBoundingRect.top <= this.scrollViewPointerPositionY &&
                            scrollViewBoundingRect.top + scrollThreshold > this.scrollViewPointerPositionY) {
                            this.multiplierY = scrollThreshold / (this.scrollViewPointerPositionY - scrollViewBoundingRect.top);

                        } else if (scrollViewBoundingRect.bottom >= this.scrollViewPointerPositionY &&
                            this.scrollViewPointerPositionY >= scrollViewBoundingRect.bottom - scrollThreshold ) {

                            this.multiplierY = scrollThreshold / (scrollViewBoundingRect.bottom - this.scrollViewPointerPositionY);
                        }
                        // Change the algorithm for speed scrolling.
                        this.multiplierY = this.multiplierY * 2;
                    }

                    if(scrollViewElement.scrollWidth > scrollViewElement.offsetWidth) {
                        this.multiplierX = 0;

                        if (scrollViewBoundingRect.left <= this.scrollViewPointerPositionX &&
                            scrollViewBoundingRect.left + scrollThreshold > this.scrollViewPointerPositionX) {

                            this.multiplierX = scrollThreshold / (this.scrollViewPointerPositionX - scrollViewBoundingRect.left);

                        } else if (scrollViewBoundingRect.right >= this.scrollViewPointerPositionY &&
                            this.scrollViewPointerPositionX >= scrollViewBoundingRect.right - scrollThreshold ) {

                            this.multiplierX = scrollThreshold / (scrollViewBoundingRect.right - this.scrollViewPointerPositionX);
                        }

                        this.multiplierX = this.multiplierX * 2;
                    }

                    this.autoScrollView = false;
                    this.needsUpdateScrollView = !!this.multiplierY || !!this.multiplierX;
                }

                if (this.needsUpdateScrollView) {
                    if (scrollViewElement.scrollHeight > scrollViewElement.offsetHeight) {
                        this.needsUpdateScrollView = false;

                        if (scrollViewBoundingRect.top + scrollThreshold > this.scrollViewPointerPositionY) {
                            scrollViewElement.scrollTop = scrollViewElement.scrollTop - (1 * this.multiplierY);
                            this.needsUpdateScrollView = scrollViewElement.scrollTop !== 0;
                        } else if (this.scrollViewPointerPositionY >= scrollViewBoundingRect.bottom - scrollThreshold ) {
                            scrollViewElement.scrollTop = scrollViewElement.scrollTop + (1 * this.multiplierY);
                            this.needsUpdateScrollView = (scrollViewElement.scrollTop + scrollViewElement.offsetHeight) < scrollViewElement.scrollHeight;
                        }
                    }

                    if (scrollViewElement.scrollWidth > scrollViewElement.offsetWidth) {
                        this.needsUpdateScrollView = this.needsUpdateScrollView || false;

                        if (spacerElementBoundingRect.left + scrollThreshold > this.scrollViewPointerPositionX) {
                            scrollViewElement.scrollLeft = scrollViewElement.scrollLeft - (1 * multiplier);
                            this.needsUpdateScrollView = scrollViewElement.scrollLeft !== 0;
                        } else if (scrollViewElementPointerPositionX >= spacerElementBoundingRect.right - scrollThreshold ) {
                            scrollViewElement.scrollLeft = scrollViewElement.scrollLeft + (1 * multiplier);
                            this.needsUpdateScrollView = (scrollViewElement.scrollLeft + scrollViewElement.offsetWidth) < scrollViewElement.scrollWidth;
                        }
                    }
                }

                if (this.needsUpdateScrollView ) {
                    this.needsDraw = true;
                }
            }
        }
    }
});
コード例 #27
0
ファイル: smb-service.js プロジェクト: vshilman/Montage-App
exports.SmbService = Component.specialize({

    //Fixme: should probably an enum from the middleware.
    LOG_LEVELS: {
        get: function() {
            return [
                "NONE",
                "MINIMUM",
                "NORMAL",
                "FULL",
                "DEBUG"
            ];
        }
    },

    //Fixme: should probably an enum from the middleware.
    PROTOCOLS: {
        get: function() {
            return [
                "CORE",
                "COREPLUS",
                "LANMAN1",
                "LANMAN2",
                "NT1",
                "SMB2",
                "SMB2_02",
                "SMB2_10",
                "SMB2_22",
                "SMB2_24",
                "SMB3",
                "SMB3_00"
            ];
        }
    },

    //Fixme: This isn't from the middleware at all. It's a copy paste of options
    //from FreeNAS 9, because otherwise this field makes little sense. However,
    //as of the completion of Ticket #15045, this will no longer be the case.
    UNIX_CHARSETS: {
        get: function() {
            return [
                "UTF-8",
                "iso-8859-1",
                "iso-8859-15",
                "gb2312",
                "EUC-JP",
                "ASCII"
            ];
        }
    },

    //Fixme: This isn't from the middleware at all. It's a copy paste of options
    //from FreeNAS 9, because otherwise this field makes little sense. However,
    //as of the completion of Ticket #15045, this will no longer be the case.
    DOS_CHARSETS: {
        get: function() {
            return [
                "CP437",
                "CP850",
                "CP852",
                "CP866",
                "CP932",
                "CP949",
                "CP950",
                "CP1029",
                "CP1251",
                "ASCII"
            ];
        }
    },

    users: {
        value: null
    },

    _object: {
        value: null
    },

    object: {
        get: function() {
            return this._object;
        },
        set: function(object) {
            if (this._object != object) {
                this._object = object;
                if (this._object.filemask) {
                    this.filemaskModes = {
                        user: this._object.filemask.user,
                        group: this._object.filemask.group,
                        others: this._object.filemask.others
                    };
                    delete this._object.filemask.value;
                }
                if (this._object.dirmask) {
                    this.dirmaskModes = {
                        user: this._object.dirmask.user,
                        group: this._object.dirmask.group,
                        others: this._object.dirmask.others
                    };
                    delete this._object.dirmask.value;
                }
            }
        }
    },

    templateDidLoad: {
        value: function () {
            this.networkInterfacesAliases = this.application.networkInterfacesSevice.networkInterfacesAliases;
            this._fetchUsers();
        }
    },

    enterDocument: {
        value: function(isFirstTime) {
            if (this._object) {
                this.filemaskModes = {
                    user: this._object.filemask.user,
                    group: this._object.filemask.group,
                    others: this._object.filemask.others
                };
                this.dirmaskModes = {
                    user: this._object.dirmask.user,
                    group: this._object.dirmask.group,
                    others: this._object.dirmask.others
                };
            }
        }
    },

    _fetchUsers: {
        value: function () {
            var self = this;

            return this.application.dataService.fetchData(Model.User).then(function (users) {
                self.users = users;
            });
        }
    },

    shouldMultipleSelectAcceptValue: {
        value: function (multipleSelect, value) {
            var interfacesAliases = this.networkInterfacesAliases,
                response = false;

            for (var i = 0, length = interfacesAliases.length; i < length && !response; i++) {
                response = interfacesAliases[i].address === value;
            }

            return response;
        }
    }

});
コード例 #28
0
exports.BriefInspector = Component.specialize(/** @lends BriefInspector.prototype */ {
    _tabs: {
        value: []
    },

    _availableTabs: {
        value: null
    },

    _panels: {
        value: {}
    },

    availableTabs: {
        set: function (value) {
            this._availableTabs = value;
        },
        get: function () {
            return this._availableTabs || [];
        }
    },

    tabBar: {
        value: null
    },

    _briefDetails: {
        value: null
    },

    _needsToGenerateTabs: {value: false},

    briefDetails: {
        get: function () {
            return this._briefDetails;
        },
        set: function (value) {
            if (value && value !== this._briefDetails) {
                this._briefDetails = value;
                this._needsToGenerateTabs = true;
                this.needsDraw = true;
            }
        }
    },

    draw: {
        value: function () {
            if (this._needsToGenerateTabs) {
                this._needsToGenerateTabs = false;

                var tabs = this._briefDetails.brief.tabs,
                    keys = tabs.map(function (tab) {
                        return tab.name;
                    });

                this.availableTabs = this._tabs.filter(function (uiTab) {
                    var index = keys.indexOf(uiTab.key);
                    uiTab._index = index;

                    return index !== -1;
                });

                this.selectedIndex = 0;
            }
        }
    },

    situationalAwarnessResources: {
        get: function () {
            return this.getPanel(this._tabs[0]);
        }
    },

    regionalOverviewResources: {
        get: function () {
            return this.getPanel(this._tabs[1]);
        }
    },

    riskVulernabilityResources: {
        get: function () {
            return this.getPanel(this._tabs[2]);
        }
    },

    bioHealthResources: {
        get: function () {
            return this.getPanel(this._tabs[3]);
        }
    },

    historicalHazardsResources: {
        get: function () {
            return this.getPanel(this._tabs[4]);
        }
    },

    getPanel: {
        value: function (tab) {
            var self = this,
                panelName = tab.paneReference.propertyName;

            if (!this._panels[panelName]) {
                this._panels[panelName] = require.async("ui/brief/brief-inspector-details.reel").then(function (exports) {
                    var pane = new exports.BriefInspectorDetails();
                    pane.identifier = "briefInspectorDetails_" + tab.id;
                    pane.ownerComponent = self;
                    pane.tab = tab;
                    pane.defineBinding("briefDetails", {
                        "<-": "_briefDetails",
                        source: self
                    });
                    return pane;
                });
            }
            return this._panels[panelName];
        }
    }

});
コード例 #29
0
ファイル: player.js プロジェクト: 10ui/popcorn
exports.Player = Component.specialize({

    constructor: {
        value: function Player() {
            this.super();
        }
    },


    player: {
        value: null
    },

    handleCloseButtonAction: {
        value: function () {
            this.templateObjects.overlay.hide();
        }
    },

    _trailerId: {
        value: null
    },

    openTrailer: {
        value: function (id) {
            this._trailerId = id;
            this.templateObjects.overlay.show();
        }
    },

    didShowOverlay: {
        value: function (overlay) {
            if (this._trailerId) {
                this.player.src = TRAILER_URL.replace(PLACE_HOLDER, this._trailerId);
            }
            overlay.classList.add('is-shown');
        }
    },

    didHideOverlay: {
        value: function (overlay) {
            this._trailerId = null;
            overlay.classList.remove('is-shown');
        }

    }
});
コード例 #30
0
montageDefine("6364dae","ui/text.reel/text",{dependencies:["montage","ui/component"],factory:function(require,exports,module){/**
    @module montage/ui/text.reel
    @requires montage
    @requires montage/ui/component
*/
var Montage = require("montage").Montage,
    Component = require("ui/component").Component;

/**
 @class Text
 @extends Component
 */
exports.Text = Component.specialize( /** @lends Text# */ {

    constructor: {
        value: function Text() {
            this.super();
        }
    },

    hasTemplate: {
        value: false
    },

    _value: {
        value: null
    },

    /**
        Description TODO
        @type {Property}
        @default null
    */
    value: {
        get: function() {
            return this._value;
        },
        set: function(value) {
            if (this._value !== value) {
                this._value = value;
                this.needsDraw = true;
            }
        }
    },

    /**
        The Montage converted used to convert or format values displayed by this Text instance.
        @type {Property}
        @default null
    */
    converter: {
        value: null
    },

    /**
        The default string value assigned to the Text instance.
        @type {Property}
        @default {String} ""
    */
    defaultValue: {
        value: ""
    },

    _valueNode: {
        value: null
    },

    _RANGE: {
        value: document.createRange()
    },

    enterDocument: {
        value: function(firstTime) {
            if (firstTime) {
                var range = this._RANGE;
                range.selectNodeContents(this.element);
                range.deleteContents();
                this._valueNode = document.createTextNode("");
                range.insertNode(this._valueNode);
                this.element.classList.add("montage-Text");
            }
        }
    },

    draw: {
        value: function() {
            // get correct value
            var value = this._value, displayValue = (value || 0 === value ) ? value : this.defaultValue;

            if (this.converter) {
                displayValue = this.converter.convert(displayValue);
            }

            //push to DOM
            this._valueNode.data = displayValue;
        }
    }

});

}})