// ========================================================================== // Project: Showcase // Copyright: ©2012 7x7 Software, Inc. // License: Licensed under MIT license // ========================================================================== /*globals Showcase */ sc_require('system/views_item_content.js'); sc_require('views/views_list_view.js');
/**
This pre-configured view demonstrates SC.ScrollView.
*/ Showcase.scrollViews = SC
.ScrollView.design({
contentView: Showcase.ViewsListView.design({ content: [ Showcase.ViewsItemContent.create({ title: 'Regular', example: "SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { centerX: 0, centerY: 0, height: 220, width: 220 }, contentView: SC.LabelView.extend({ classNames:['green-sample-view'], layout: { width: 500, height: 500 }, value: 'Green View' }) })" }), Showcase.ViewsItemContent.create({ title: 'Disabling Scrollers', example: "SC.View.extend({ childViews: ['left', 'middle', 'right'], left: SC.ScrollView.extend({ classNames: ['my-scroll-view'], hasHorizontalScroller: NO, layout: { width: 220, height: 220, centerX: -230, centerY: 0 }, contentView: SC.LabelView.extend({ classNames:['green-sample-view'], layout: { width: 500, height: 500 }, value: 'Green View' }) }), middle: SC.ScrollView.extend({ classNames: ['my-scroll-view'], hasHorizontalScroller: NO, hasVerticalScroller: NO, layout: { width: 220, height: 220, centerX: 0, centerY: 0 }, contentView: SC.LabelView.extend({ classNames:['green-sample-view'], layout: { width: 500, height: 500 }, value: 'Green View' }) }), right: SC.ScrollView.extend({ classNames: ['my-scroll-view'], hasVerticalScroller: NO, layout: { width: 220, height: 220, centerX: 230, centerY: 0 }, contentView: SC.LabelView.extend({ classNames:['green-sample-view'], layout: { width: 500, height: 500 }, value: 'Green View' }) }) })" }) // Turn these on when alignment works. // Showcase.ViewsItemContent.create({ // title: 'Top Alignments', // example: "SC.View.extend({ childViews: ['left', 'middle', 'right'], left: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: -230, centerY: 0 }, verticalAlign: SC.ALIGN_TOP, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), middle: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 0, centerY: 0 }, horizontalAlign: SC.ALIGN_CENTER, verticalAlign: SC.ALIGN_TOP, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), right: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 230, centerY: 0 }, horizontalAlign: SC.ALIGN_RIGHT, verticalAlign: SC.ALIGN_TOP, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }) })" // }), // Showcase.ViewsItemContent.create({ // title: 'Middle Alignments', // example: "SC.View.extend({ childViews: ['left', 'middle', 'right'], left: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: -230, centerY: 0 }, verticalAlign: SC.ALIGN_MIDDLE, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), middle: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 0, centerY: 0 }, horizontalAlign: SC.ALIGN_CENTER, verticalAlign: SC.ALIGN_MIDDLE, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), right: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 230, centerY: 0 }, horizontalAlign: SC.ALIGN_RIGHT, verticalAlign: SC.ALIGN_MIDDLE, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }) })" // }), // Showcase.ViewsItemContent.create({ // title: 'Bottom Alignments', // example: "SC.View.extend({ childViews: ['left', 'middle', 'right'], left: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: -230, centerY: 0 }, verticalAlign: SC.ALIGN_BOTTOM, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), middle: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 0, centerY: 0 }, horizontalAlign: SC.ALIGN_CENTER, verticalAlign: SC.ALIGN_BOTTOM, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }), right: SC.ScrollView.extend({ classNames: ['my-scroll-view'], layout: { width: 220, height: 220, centerX: 230, centerY: 0 }, horizontalAlign: SC.ALIGN_RIGHT, verticalAlign: SC.ALIGN_BOTTOM, contentView: SC.LabelView.extend({ classNames:['pink-sample-view'], layout: { width: 110, height: 110 }, value: 'Pink View' }) }) })" // }) ], exampleHeight: 256 })
});