// ========================================================================== // Project: SproutCore // Copyright: @2012 7x7 Software, Inc. // License: Licensed under MIT license (see license.js) // ========================================================================== /*globals CoreTest, module, test, equals, same*/

var pane, view1, view2, view3, view4, view5;

SC.LOG_DESIGN_MODE = true;

// Localized layout. SC.metricsFor('English', {

'Medium.left': 0.25,
'Medium.right': 0.25,

});

var largeLayout = { top: 0, bottom: 0, centerX: 0, width: 100 },

mediumLayout = { top: 0, bottom: 0, left: 0.25, right: 0.25 },
normalLayout = { top: 0, bottom: 0, left: 0, right: 0 },
smallLayout = { top: 0, bottom: 0, left: 10, right: 10 };

var DesignModeTestView = SC.View.extend({

modeAdjust: {
  s: { layout: { left: 10, right: 10 } },
  m: { layout: "Medium".locLayout() },
  l: { layout: { left: null, right: null, centerX: 0, width: 100 } }
},

init: function () {
  sc_super();

  // Stub the set method.
  this.set = CoreTest.stub('setDesignMode', {
    action: SC.View.prototype.set,
    expect: function (callCount) {
      var i, setDesignModeCount = 0;

      for (i = this.history.length - 1; i >= 0; i--) {
        if (this.history[i][1] === 'designMode') {
          setDesignModeCount++;
        }
      }

      equals(setDesignModeCount, callCount, "set('designMode', ...) should have been called %@ times.".fmt(callCount));
    }
  });
}

});

module(“SC.View/SC.Pane Design Mode Support”, {

setup: function () {

  view4 = DesignModeTestView.create({});

  view3 = DesignModeTestView.create({
    childViews: [view4],

    // Override - no large design layout.
    modeAdjust: {
      s: { layout: { left: 10, right: 10 } },
      m: { layout: "Medium".locLayout() }
    }
  });

  view2 = DesignModeTestView.create({});

  view1 = DesignModeTestView.create({
    childViews: [view2, view3]
  });

  view5 = DesignModeTestView.create({});

  pane = SC.Pane.extend({
    childViews: [view1]
  });
},

teardown: function () {
  if (pane.remove) { pane.remove(); }

  pane = view1 = view2 = view3 = view4 = view5 = null;

  SC.RootResponder.responder.set('designModes', null);
}

});

test(“When RootResponder has no designModes, it doesn't set designMode on its panes or their childViews”, function () {

pane = pane.create();

// designMode should not be set
view1.set.expect(0);
view2.set.expect(0);
view3.set.expect(0);
view4.set.expect(0);

SC.run(function () {
  pane.append();
});

// designMode should not be set
view1.set.expect(0);
view2.set.expect(0);
view3.set.expect(0);
view4.set.expect(0);

equals(view1.get('designMode'), undefined, "view1 designMode should be");
equals(view2.get('designMode'), undefined, "view2 designMode should be");
equals(view3.get('designMode'), undefined, "view3 designMode should be");
equals(view4.get('designMode'), undefined, "view4 designMode should be");

same(view1.get('layout'), normalLayout, "view1 layout should be");
same(view2.get('layout'), normalLayout, "view2 layout should be");
same(view3.get('layout'), normalLayout, "view3 layout should be");
same(view4.get('layout'), normalLayout, "view4 layout should be");

same(view1.get('classNames'), ['sc-view'], "view1 classNames should be");
same(view2.get('classNames'), ['sc-view'], "view2 classNames should be");
same(view3.get('classNames'), ['sc-view'], "view3 classNames should be");
same(view4.get('classNames'), ['sc-view'], "view4 classNames should be");

});

test(“When RootResponder has no designModes, and you add a view to a pane, it doesn't set designMode on the new view.”, function () {

pane = pane.create();

SC.run(function () {
  pane.append();
  pane.appendChild(view5);
});

// adjustDesign() shouldn't be called
view5.set.expect(0);

equals(view5.get('designMode'), undefined, "designMode should be");

same(view5.get('layout'), normalLayout, "layout should be");

same(view5.get('classNames'), ['sc-view'], "classNames should be");

});

test(“When RootResponder has designModes, it sets designMode on its panes and their childViews”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

pane = pane.create();

// designMode should not be set
view1.set.expect(0);
view2.set.expect(0);
view3.set.expect(0);
view4.set.expect(0);

SC.run(function () {
  pane.append();
});

// designMode should be set (for initialization)
view1.set.expect(1);
view2.set.expect(1);
view3.set.expect(1);
view4.set.expect(1);

var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view1.get('designMode'), modeName, "view1 designMode should be");
equals(view2.get('designMode'), modeName, "view2 designMode should be");
equals(view3.get('designMode'), modeName, "view3 designMode should be");
equals(view4.get('designMode'), modeName, "view4 designMode should be");

same(view1.get('layout'), largeLayout, "view1 layout should be");
same(view2.get('layout'), largeLayout, "view2 layout should be");
same(view3.get('layout'), normalLayout, "view3 layout should be");
same(view4.get('layout'), largeLayout, "view4 layout should be");

same(view1.get('classNames'), ['sc-view', 'sc-large'], "view1 classNames should be");
same(view2.get('classNames'), ['sc-view', 'sc-large'], "view2 classNames should be");
same(view3.get('classNames'), ['sc-view', 'sc-large'], "view3 classNames should be");
same(view4.get('classNames'), ['sc-view', 'sc-large'], "view4 classNames should be");

});

test(“When updateDesignMode() is called on a pane, it sets designMode properly on itself and its childViews.”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

SC.run(function () {
  pane = pane.create().append();
});

// designMode should be set (for initialization)
view1.set.expect(1);
view2.set.expect(1);
view3.set.expect(1);
view4.set.expect(1);

var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view1.get('designMode'), modeName, "Test 1 view1 designMode should be");
equals(view2.get('designMode'), modeName, "Test 1 view2 designMode should be");
equals(view3.get('designMode'), modeName, "Test 1 view3 designMode should be");
equals(view4.get('designMode'), modeName, "Test 1 view4 designMode should be");

same(view1.get('layout'), largeLayout,  "Test 1 layout of view1 should be");
same(view2.get('layout'), largeLayout,  "Test 1 layout of view2 should be");
same(view3.get('layout'), normalLayout, "Test 1 layout of view3 should be");
same(view4.get('layout'), largeLayout,  "Test 1 layout of view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-large'], "Test 1 classNames of view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-large'], "Test 1 classNames of view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-large'], "Test 1 classNames of view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-large'], "Test 1 classNames of view4 should be");

var newModeName = orientation === SC.PORTRAIT_ORIENTATION ? 's_p' : 's_l';

SC.run(function () {
  pane.updateDesignMode(modeName, newModeName);
});

// designMode should be set (crossed threshold)
view1.set.expect(2);
view2.set.expect(2);
view3.set.expect(2);
view4.set.expect(2);

equals(view1.get('designMode'), newModeName, "Test 2 view1 designMode should be");
equals(view2.get('designMode'), newModeName, "Test 2 view2 designMode should be");
equals(view3.get('designMode'), newModeName, "Test 2 view3 designMode should be");
equals(view4.get('designMode'), newModeName, "Test 2 view4 designMode should be");

same(view1.get('layout'), smallLayout, "Test 2 layout of view1 should be");
same(view2.get('layout'), smallLayout, "Test 2 layout of view2 should be");
same(view3.get('layout'), smallLayout, "Test 2 layout of view3 should be");
same(view4.get('layout'), smallLayout, "Test 2 layout of view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-small'], "Test 2 classNames of view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-small'], "Test 2 classNames of view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-small'], "Test 2 classNames of view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-small'], "Test 2 classNames of view4 should be");

});

test(“When RootResponder has designModes, and you add a view to a pane, it sets designMode on the new view.”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

SC.run(function () {
  pane = pane.create().append();
  pane.appendChild(view5);
});

// designMode should be set
view5.set.expect(1);
var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view5.get('designMode'), modeName, "designMode of view5 should be");

same(view5.get('classNames'), ['sc-view', 'sc-large'], "classNames of view5 should be");

});

test(“When you set designModes on RootResponder, it sets designMode on its panes and their childViews.”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

SC.run(function () {
  pane = pane.create().append();
});

// designMode should not be set
view1.set.expect(0);
view2.set.expect(0);
view3.set.expect(0);
view4.set.expect(0);

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

// designMode should be set (for initialization)
view1.set.expect(1);
view2.set.expect(1);
view3.set.expect(1);
view4.set.expect(1);

var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view1.get('designMode'), modeName, "view1 designMode should be");
equals(view2.get('designMode'), modeName, "view2 designMode should be");
equals(view3.get('designMode'), modeName, "view3 designMode should be");
equals(view4.get('designMode'), modeName, "view4 designMode should be");

same(view1.get('layout'), largeLayout, "layout of view1 should be");
same(view2.get('layout'), largeLayout, "layout of view2 should be");
same(view3.get('layout'), normalLayout, "layout of view3 should be");
same(view4.get('layout'), largeLayout, "layout of view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-large'], "classNames of view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-large'], "classNames of view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-large'], "classNames of view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-large'], "classNames of view4 should be");

});

test(“When you change designModes on RootResponder, it sets designMode on the pane and its childViews if the design mode has changed.”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

SC.run(function () {
  pane = pane.create().append();
});

// designMode should be set (for initialization)
view1.set.expect(1);
view2.set.expect(1);
view3.set.expect(1);
view4.set.expect(1);

var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view1.get('designMode'), modeName, "view1 designMode should be");
equals(view2.get('designMode'), modeName, "view2 designMode should be");
equals(view3.get('designMode'), modeName, "view3 designMode should be");
equals(view4.get('designMode'), modeName, "view4 designMode should be");

same(view1.get('layout'), largeLayout, "layout for view1 should be");
same(view2.get('layout'), largeLayout, "layout for view2 should be");
same(view3.get('layout'), normalLayout, "layout for view3 should be");
same(view4.get('layout'), largeLayout, "layout for view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-large'], "classNames for view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-large'], "classNames for view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-large'], "classNames for view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-large'], "classNames for view4 should be");

// Change the small threshold
responder.set('designModes', { s: ((windowSize.width + 10) * (windowSize.height + 10)) / window.devicePixelRatio, l: Infinity });

// designMode should be set
view1.set.expect(2);
view2.set.expect(2);
view3.set.expect(2);
view4.set.expect(2);

var newModeName = orientation === SC.PORTRAIT_ORIENTATION ? 's_p' : 's_l';
equals(view1.get('designMode'), newModeName, "view1 designMode should be");
equals(view2.get('designMode'), newModeName, "view2 designMode should be");
equals(view3.get('designMode'), newModeName, "view3 designMode should be");
equals(view4.get('designMode'), newModeName, "view4 designMode should be");

same(view1.get('layout'), smallLayout, "layout for view1 should be");
same(view2.get('layout'), smallLayout, "layout for view2 should be");
same(view3.get('layout'), smallLayout, "layout for view3 should be");
same(view4.get('layout'), smallLayout, "layout for view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-small'], "classNames for view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-small'], "classNames for view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-small'], "classNames for view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-small'], "classNames for view4 should be");

// Add a medium threshold
responder.set('designModes', {
  s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio,
  m: ((windowSize.width + 10) * (windowSize.height + 10)) / window.devicePixelRatio,
  l: Infinity
});

// designMode should be set
view1.set.expect(3);
view2.set.expect(3);
view3.set.expect(3);
view4.set.expect(3);

modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'm_p' : 'm_l';
equals(view1.get('designMode'), modeName, "view1 designMode should be");
equals(view2.get('designMode'), modeName, "view2 designMode should be");
equals(view3.get('designMode'), modeName, "view3 designMode should be");
equals(view4.get('designMode'), modeName, "view4 designMode should be");

same(view1.get('layout'), mediumLayout, "layout for view1 should be");
same(view2.get('layout'), mediumLayout, "layout for view2 should be");
same(view3.get('layout'), mediumLayout, "layout for view3 should be");
same(view4.get('layout'), mediumLayout, "layout for view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-medium'], "classNames for view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-medium'], "classNames for view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-medium'], "classNames for view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-medium'], "classNames for view4 should be");

});

test(“When the design mode changes, overrides are reverted.”); // This is extremely complex to achieve. Left as a warning for now. // , function () { // var windowSize, // responder = SC.RootResponder.responder, // orientation = SC.device.orientation;

// windowSize = responder.get('currentWindowSize'); // responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

// SC.run(function () { // pane = pane.create().append(); // });

// same(view1.get('layout'), largeLayout, “Test 1 layout of view1 should be”); // same(view2.get('layout'), largeLayout, “Test 1 layout of view2 should be”);

// SC.run(function () { // view1.adjust('top', 10); // Original layout goes from implied top: 0 to top: 10. // view2.adjust('height', 100); // Original layout goes from implied bottom: 0 to bottom: undefined. // });

// var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l'; // var newModeName = orientation === SC.PORTRAIT_ORIENTATION ? 's_p' : 's_l';

// SC.run(function () { // pane.updateDesignMode(modeName, newModeName); // });

// var adjustedSmallLayout1 = { top: 10, bottom: 0, left: 10, right: 10 }, // adjustedSmallLayout2 = { top: 0, height: 100, left: 10, right: 10 };

// same(view1.get('layout'), adjustedSmallLayout1, “Test 2 layout for view1 should be”); // same(view2.get('layout'), adjustedSmallLayout2, “Test 2 layout for view2 should be”); // });

test(“When you unset designModes on RootResponder, it clears designMode on its panes and their childViews.”, function () {

var windowSize,
  responder = SC.RootResponder.responder,
  orientation = SC.device.orientation;

windowSize = responder.get('currentWindowSize');
responder.set('designModes', { s: ((windowSize.width - 10) * (windowSize.height - 10)) / window.devicePixelRatio, l: Infinity });

SC.run(function () {
  pane = pane.create().append();
});

// designMode should be set (for initialization)
view1.set.expect(1);
view2.set.expect(1);
view3.set.expect(1);
view4.set.expect(1);

var modeName = orientation === SC.PORTRAIT_ORIENTATION ? 'l_p' : 'l_l';
equals(view1.get('designMode'), modeName, "view1 designMode should be");
equals(view2.get('designMode'), modeName, "view2 designMode should be");
equals(view3.get('designMode'), modeName, "view3 designMode should be");
equals(view4.get('designMode'), modeName, "view4 designMode should be");

same(view1.get('layout'), largeLayout, "layout of view1 should be");
same(view2.get('layout'), largeLayout, "layout of view2 should be");
same(view3.get('layout'), normalLayout, "layout of view3 should be");
same(view4.get('layout'), largeLayout, "layout of view4 should be");

same(view1.get('classNames'), ['sc-view', 'sc-large'], "classNames of view1 should be");
same(view2.get('classNames'), ['sc-view', 'sc-large'], "classNames of view2 should be");
same(view3.get('classNames'), ['sc-view', 'sc-large'], "classNames of view3 should be");
same(view4.get('classNames'), ['sc-view', 'sc-large'], "classNames of view4 should be");

// Unset designModes
responder.set('designModes', null);

// designMode should be set
view1.set.expect(2);
view2.set.expect(2);
view3.set.expect(2);
view4.set.expect(2);

equals(view1.get('designMode'), null, "designMode of view1 should be");
equals(view2.get('designMode'), null, "designMode of view2 should be");
equals(view3.get('designMode'), null, "designMode of view3 should be");
equals(view4.get('designMode'), null, "designMode of view4 should be");

same(view1.get('layout'), normalLayout, "layout of view1 should be");
same(view2.get('layout'), normalLayout, "layout of view2 should be");
same(view3.get('layout'), normalLayout, "layout of view3 should be");
same(view4.get('layout'), normalLayout, "layout of view4 should be");

same(view1.get('classNames'), ['sc-view'], "classNames of view1 should be");
same(view2.get('classNames'), ['sc-view'], "classNames of view2 should be");
same(view3.get('classNames'), ['sc-view'], "classNames of view3 should be");
same(view4.get('classNames'), ['sc-view'], "classNames of view4 should be");

});