0

I am working on an enyo application where on a page I have a topBottom Arranger which should change to the next panel on swipe down.

The problem i am facing is , the panels are not taking the complete screen height and when i am on a particular panel I am able to see some segment of the previous panels. I want to get rid of this and have just one panel occupying the whole screen.

Here is a fiddle example. http://jsfiddle.net/XhZvE/

(make sure to change the arrangerType to "topBottomArranger" in the dropdown at left top corner)

Code goes like this

enyo.kind({
    name: "enyo.sample.MyGridArranger",
    kind: "GridArranger",
    colHeight: "150",
    colWidth: "150"
});

enyo.kind({
    name: "enyo.sample.PanelsSample",
    kind: "FittableRows",
    classes: "enyo-fit",
    components: [
        {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
            {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
                {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
                    {kind: "onyx.MenuDecorator", components: [
                        {content:"Arranger"},
                        {name:"arrangerPicker", kind: "onyx.Menu", maxHeight: 360, floating: true, onSelect:"arrangerSelected"}
                    ]},
                    {kind: "onyx.Button", content: "Previous", ontap: "prevPanel"},
                    {kind: "onyx.Button", content: "Next", ontap: "nextPanel"},
                    {kind: "onyx.InputDecorator", style: "width: 60px;", components: [
                        {kind: "onyx.Input", value: 0, onchange: "gotoPanel"}
                    ]},
                    {kind: "onyx.Button", content: "Go", ontap: "gotoPanel"},
                    {kind: "onyx.Button", content: "Add", ontap: "addPanel"},
                    {kind: "onyx.Button", content: "Delete", ontap: "deletePanel"}
                ]}
            ]}
        ]},
        {kind: "Panels", name:"samplePanels", fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [
            {content:0, style:"background:red;"},
            {content:1, style:"background:orange;"},
            {content:2, style:"background:yellow;"},
            {content:3, style:"background:green;"},
            {content:4, style:"background:blue;"},
            {content:5, style:"background:indigo;"},
            {content:6, style:"background:violet;"}
        ]}
    ],
    panelArrangers: [
        {name: "CardArranger", arrangerKind: "CardArranger"},
        {name: "CardSlideInArranger", arrangerKind: "CardSlideInArranger"},
        {name: "CarouselArranger", arrangerKind: "CarouselArranger", classes: "panels-sample-wide"},
        {name: "CollapsingArranger", arrangerKind: "CollapsingArranger", classes: "panels-sample-collapsible"},
        {name: "LeftRightArranger", arrangerKind: "LeftRightArranger"},
        {name: "TopBottomArranger", arrangerKind: "TopBottomArranger", classes: "panels-sample-topbottom"},
        {name: "SpiralArranger", arrangerKind: "SpiralArranger", classes: "panels-sample-spiral"},
        {name: "GridArranger", arrangerKind: "enyo.sample.MyGridArranger", classes: "panels-sample-grid"},
        {name: "DockRightArranger", arrangerKind: "DockRightArranger", classes: "panels-sample-collapsible"}
    ],
    bgcolors: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    create: function() {
        this.inherited(arguments);
        for (var i=0; i<this.panelArrangers.length; i++) {
            this.$.arrangerPicker.createComponent({content:this.panelArrangers[i].name});
        }
        this.panelCount=this.$.samplePanels.getPanels().length;
    },
    rendered: function() {
        this.inherited(arguments);
    },
    arrangerSelected: function(inSender, inEvent) {
        var sp = this.$.samplePanels;
        var p = this.panelArrangers[inEvent.originator.indexInContainer()-1];
        if (this.currentClass) {
            sp.removeClass(this.currentClass);
        }
        if (p.classes) {
            sp.addClass(p.classes);
            this.currentClass = p.classes;
        }
        sp.setArrangerKind(p.arrangerKind);
        if (enyo.Panels.isScreenNarrow()) {
            this.setIndex(1);
        }
    },
    // panels
    prevPanel: function() {
        this.$.samplePanels.previous();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    nextPanel: function() {
        this.$.samplePanels.next();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    gotoPanel: function() {
        this.$.samplePanels.setIndex(this.$.input.getValue());
    },
    panelCount: 0,
    addPanel: function() {
        var sp = this.$.samplePanels;
        var i = this.panelCount++;
        var p = sp.createComponent({
            style:"background:" + this.bgcolors[i % this.bgcolors.length],
            content:i
        });
        p.render();
        sp.reflow();
        sp.setIndex(i);
    },
    deletePanel: function() {
        var p = this.$.samplePanels.getActive();
        if (p) {
            p.destroy();
        }
    }
});

TIA

2
  • You never saved your fiddle so the link doesn't work!
    – Pre101
    Feb 18, 2014 at 5:45
  • Here is the updated fiddle link jsfiddle.net/XhZvE
    – A-D
    Feb 18, 2014 at 10:05

1 Answer 1

1

The margin property of TopBottomArranger needs to be set to 0 instead of the default 40 it is inheriting from LeftRightArranger. I added a custom arranger that implements this to the end of the Arranger list in the fiddle: http://jsfiddle.net/aarontam/XhZvE/1/

2
  • Thanks for the reply, that works well in the fiddle. I will try to integrate it with my app. Thanks :)
    – A-D
    Feb 19, 2014 at 4:13
  • That worked fine in my app too :) thanks. One quick question, can we convert the sliding panels here (jsfiddle.net/qD3bJ) to a vertical one?
    – A-D
    Feb 20, 2014 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.