How to use the backbone/core-view.extend function in backbone

To help you get started, we’ve selected a few backbone examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github CartoDB / cartodb / lib / assets / javascripts / deep-insights / widgets / histogram / chart.js View on Github external
var DASH_WIDTH = 2;
var MOBILE_BAR_HEIGHT = 3;

var BEZIER_MARGIN_X = 0.1;
var BEZIER_MARGIN_Y = 1;

var trianglePath = function (x1, y1, x2, y2, x3, y3, yFactor) {
  // Bezier Control point y
  var cy = y3 + (yFactor * BEZIER_MARGIN_Y);
  // Bezier Control point x 1
  var cx1 = x3 + BEZIER_MARGIN_X;
  var cx2 = x3 - BEZIER_MARGIN_X;
  return 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2 + ' C ' + cx1 + ' ' + cy + ' ' + cx2 + ' ' + cy + ' ' + x1 + ' ' + y1 + ' z';
};

module.exports = CoreView.extend({
  options: {
    // render the chart once the width is set as default, provide false value for this prop to disable this behavior
    // e.g. for "mini" histogram behavior
    showOnWidthChange: true,
    chartBarColor: '#F2CC8F',
    labelsMargin: 16, // px
    hasAxisTip: false,
    minimumBarHeight: 2,
    animationSpeed: 750,
    handleWidth: 8,
    handleRadius: 3,
    divisionWidth: 80,
    animationBarDelay: function (d, i) {
      return Math.random() * (100 + (i * 10));
    },
    transitionType: 'elastic'
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / components / modals / add-analysis / analysis-option-view.js View on Github external
var _ = require('underscore');
var $ = require('jquery');
var CoreView = require('backbone/core-view');
var template = require('./analysis-option.tpl');
var Analyses = require('../../../data/analyses');

/**
 * View for an individual analysis option.
 */
module.exports = CoreView.extend({

  tagName: 'li',
  className: 'ModalBlockList-item',

  events: {
    'mouseenter': '_onMouseEnter',
    'mouseleave': '_onMouseLeave',
    'click': '_onClick'
  },

  initialize: function (opts) {
    this._simpleGeometryTypeInput = opts.simpleGeometryTypeInput; // might be undefined/null, so don't check

    this.listenTo(this.model, 'change:selected', this.render);
  },
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / editor / layers / edit-feature-content-views / edit-feature-attributes-form-view.js View on Github external
var Backbone = require('backbone');
var CoreView = require('backbone/core-view');
var template = require('./edit-feature-attributes-form.tpl');

module.exports = CoreView.extend({
  module: 'editor:layers:edit-feature-content-views:edit-feature-attributes-form-view',

  render: function () {
    this.clearSubViews();
    this.$el.html(template());

    this._generateForms();

    this.model.bind('changeSchema', this._generateForms, this);

    return this;
  },

  _generateForms: function () {
    var self = this;
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / components / onboardings / analysis / analysis-view.js View on Github external
var LocalStorage = require('../../../components/local-storage/local-storage');
var CoreView = require('backbone/core-view');
var template = require('./analysis-view.tpl');
var Analyses = require('../../../data/analyses');

var STORAGE_KEY = 'onboarding';

module.exports = CoreView.extend({
  className: 'AnalysisCompletionDetails is-opening',

  events: {
    'click .js-close': '_close',
    'click .js-style': '_onStyle'
  },

  initialize: function (opts) {
    if (!opts.modalModel) throw new Error('modalModel is required');
    if (!opts.userModel) throw new Error('userModel is required');
    if (!opts.editorModel) throw new Error('editorModel is required');

    this._modalModel = opts.modalModel;
    this._userModel = opts.userModel;
    this._editorModel = opts.editorModel;
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / components / onboardings / builder / builder-view.js View on Github external
var CoreView = require('backbone/core-view');
var template = require('./builder-view.tpl');
var checkAndBuildOpts = require('../../../helpers/required-opts');

var BUILDER_KEY = 'onboarding';

var LEFT_KEY_CODE = 37;
var RIGHT_KEY_CODE = 39;

var REQUIRED_OPTS = [
  'userModel',
  'onboardingNotification',
  'editorModel'
];

module.exports = CoreView.extend({
  className: 'BuilderOnboarding is-step0 is-opening',

  events: {
    'click .js-start': '_onClickNext',
    'click .js-next': '_onClickNext',
    'click .js-close': '_close'
  },

  initialize: function (opts) {
    checkAndBuildOpts(opts, REQUIRED_OPTS, this);

    this._initModels();
    this._initBinds();
  },

  render: function () {
github CartoDB / cartodb / lib / assets / javascripts / cartodb3 / components / form-components / editors / fill / input-number / input-number-value-content-view.js View on Github external
var StackLayoutView = require('cartodb3/components/stack-layout/stack-layout-view');
var ColumnListView = require('cartodb3/components/form-components/editors/fill/column-list-view');
var quantificationMethodItemTemplate = require('./quantification-method-item.tpl');
var InputNumberContentView = require('./input-number-content-view');
var DefaultFillSettings = require('cartodb3/components/form-components/editors/fill/default-fill-settings.json');

/**
 * add the number of classes
 * change the max depending on the min
 * smaller values on top
 */
var COLUMN_PANE_INDEX = 0;
var MAIN_PAIN_INDEX = 1;
var QUANTIFICATION_PANE_INDEX = 2;

module.exports = CoreView.extend({
  events: {
    'click .js-back': '_onClickBack'
  },

  initialize: function (opts) {
    if (!opts.columns) throw new Error('columns param is required');
    this._columns = opts.columns;

    this._settings = DefaultFillSettings.number;

    this._setupModel();
  },

  render: function () {
    this.clearSubViews();
    this.$el.empty();
github CartoDB / cartodb / lib / assets / javascripts / cartodb3 / editor / widgets / widget-view.js View on Github external
var templateConfirmation = require('./delete-widget-confirmation.tpl');
var ConfirmationView = require('../../components/modals/confirmation/modal-confirmation-view');
var InlineEditorView = require('../../components/inline-editor/inline-editor-view');
var templateInlineEditor = require('./inline-editor.tpl');

var widgetIconTemplateMap = {
  category: require('./widget-icon-layer-category.tpl'),
  histogram: require('./widget-icon-layer-histogram.tpl'),
  formula: require('./widget-icon-layer-formula.tpl'),
  'time-series': require('./widget-icon-layer-timeSeries.tpl')
};

/**
 * View for an individual widget definition model.
 */
module.exports = CoreView.extend({

  tagName: 'li',

  className: 'BlockList-item js-widgetItem',

  initialize: function (opts) {
    if (!opts.layer) throw new Error('layer is required');
    if (!opts.modals) throw new Error('modals is required');
    if (!opts.userActions) throw new Error('userActions is required');

    this.layer = opts.layer;
    this._modals = opts.modals;
    this._userActions = opts.userActions;
    this.stackLayoutModel = opts.stackLayoutModel;

    this.listenTo(this.model, 'change', this.render);
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / editor / style / style-form / style-properties-form / style-shape-properties-form-view.js View on Github external
var Backbone = require('backbone');
var CoreView = require('backbone/core-view');
require('../../../../components/form-components/index');
var StyleShapeFormModel = require('./style-shape-properties-form-model');
var checkAndBuildOpts = require('../../../../helpers/required-opts');

var REQUIRED_OPTS = [
  'configModel',
  'modals',
  'queryGeometryModel',
  'querySchemaModel',
  'styleModel',
  'userModel'
];

module.exports = CoreView.extend({

  className: 'u-tSpace--m',

  initialize: function (opts) {
    checkAndBuildOpts(opts, REQUIRED_OPTS, this);

    this._queryGeometryModel = opts.queryGeometryModel;
    this._querySchemaModel = opts.querySchemaModel;
    this._styleModel = opts.styleModel;
    this._configModel = opts.configModel;
    this._userModel = opts.userModel;
    this._modals = opts.modals;
    this._initBinds();
  },

  render: function () {
github CartoDB / cartodb / lib / assets / javascripts / builder / components / input-color / input-color-picker / input-color-picker-header.js View on Github external
var $ = require('jquery');
var _ = require('underscore');
var CoreView = require('backbone/core-view');
var ImageLoaderView = require('builder/components/img-loader-view');
var template = require('./input-color-picker-header.tpl');
var MAX = 1;

module.exports = CoreView.extend({
  events: {
    'click .js-color': '_onClickColor',
    'click .js-assetPicker': '_onClickAssetPicker',
    'keyup .js-a': '_onChangeOpacity'
  },

  initialize: function (opts) {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function (model, options) {
    if (model && model.changed && typeof model.changed.opacity !== 'undefined') {
      this._reRenderOpacity();
      return this;
    }
github CartoDB / cartodb / lib / assets / javascripts / builder / editor / layers / layer-header-view.js View on Github external
var checkAndBuildOpts = require('builder/helpers/required-opts');

var REQUIRED_OPTS = [
  'modals',
  'userActions',
  'layerDefinitionModel',
  'layerDefinitionsCollection',
  'configModel',
  'stateDefinitionModel',
  'editorModel',
  'userModel',
  'visDefinitionModel',
  'widgetDefinitionsCollection'
];

module.exports = CoreView.extend({
  className: 'js-editorPanelHeader',

  events: {
    'click .js-toggle-menu': '_onToggleContextMenuClicked',
    'click .js-zoom': '_onZoomClicked',
    'blur .js-input': '_hideRenameInput',
    'keyup .js-input': '_onKeyUpInput'
  },

  initialize: function (opts) {
    checkAndBuildOpts(opts, REQUIRED_OPTS, this);

    this._tableNodeModel = opts.tableNodeModel;
    this._sourceNode = this._getSourceNode(this._getNodeModel());
    this._topQueryGeometryModel = null;