Skip to content

Commit

Permalink
titanium module for iOS 15 bottomsheetcontroller
Browse files Browse the repository at this point in the history
initial
  • Loading branch information
mbender74 committed Sep 27, 2021
1 parent 1cd8c93 commit 1c3b1ba
Show file tree
Hide file tree
Showing 36 changed files with 2,583 additions and 1 deletion.
17 changes: 17 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.DS_Store
ios/*.zip
ios/dist
ios/build
ios/Carthage
ios/Cartfile.resolved
ios/run.command
ios/imageview-ios.xcodeproj/project.xcworkspace/xcuserdata/*.xcuserdatad
ios/imageview-ios.xcodeproj/project.xcworkspace/xcuserdata
ios/imageview-ios.xcodeproj/xcuserdata
android/dist/*.zip
android/dist/*.jar
android/build/*
android/build.properties
android/java-sources.txt
android/libs/
android/av.imageview.gradle
1 change: 1 addition & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
TODO: place your license here and we'll include it in the module distribution
107 changes: 107 additions & 0 deletions README
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
# Appcelerator Titanium Mobile Module Project

This is a skeleton Titanium Mobile Mobile module project.

## Module Naming

Choose a unique module id for your module. This ID usually follows a namespace
convention using DNS notation. For example, com.appcelerator.module.test. This
ID can only be used once by all public modules in Titanium.

## Getting Started

1. Edit the `manifest` with the appropriate details about your module.
2. Edit the `LICENSE` to add your license details.
3. Place any assets (such as PNG files) that are required anywhere in the module folder.
4. Edit the `timodule.xml` and configure desired settings.
5. Code and build.

## Documentation
-----------------------------

You should provide at least minimal documentation for your module in `documentation` folder using the Markdown syntax.

For more information on the Markdown syntax, refer to this documentation at:

<http://daringfireball.net/projects/markdown/>

## Example

The `example` directory contains a skeleton application test harness that can be
used for testing and providing an example of usage to the users of your module.

## Building

Simply run `appc run -p [ios|android] --build-only` which will compile and package your module.

## Linting

You can use `clang` to lint your code. A default Axway linting style is included inside the module main folder.
Run `clang-format -style=file -i SRC_FILE` in the module root to lint the `SRC_FILE`. You can also patterns,
like `clang-format -style=file -i Classes/*`

## Install

To use your module locally inside an app you can copy the zip file into the app root folder and compile your app.
The file will automatically be extracted and copied into the correct `modules/` folder.

If you want to use your module globally in all your apps you have to do the following:

### macOS

Copy the distribution zip file into the `~/Library/Application Support/Titanium` folder

### Linux

Copy the distribution zip file into the `~/.titanium` folder

### Windows
Copy the distribution zip file into the `C:\ProgramData\Titanium` folder

## Project Usage

Register your module with your application by editing `tiapp.xml` and adding your module.
Example:

<modules>
<module version="1.0.0">ti.popover</module>
</modules>

When you run your project, the compiler will combine your module along with its dependencies
and assets into the application.

## Example Usage

To use your module in code, you will need to require it.

### ES6+ (recommended)

```js
import MyModule from 'ti.popover';
MyModule.foo();
```

### ES5

```js
var MyModule = require('ti.popover');
MyModule.foo();
```

## Testing

To test your module with the example, use:

```js
appc run -p [ios|android]
```

This will execute the app.js in the example/ folder as a Titanium application.

## Distribution

You have a variety of choises for distributing your module
- [Gitt.io](http://gitt.io/)
- [Axway Marketplace](https://marketplace.axway.com/home)

Code strong!
196 changes: 195 additions & 1 deletion README.md
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1 +1,195 @@
ti.bottomsheetcontroller-ios
<<<<<<< HEAD
# Titanium BottomSheetController iOS Module (iOS 15+)
=======
# ti.popover (NEW)
>>>>>>> main
<img src="./demo.gif" width="293" height="634" alt="Example" />

<<<<<<< HEAD
=======
Popover for iOS (Titanium Module) + more .... see in the example (most code from Ti SDK)

min Ti SDK 9.3.2
>>>>>>> main
## Methods

### `createBottomSheet({properties}) `
### `show({animated:bool}) `
### `hide({animated:bool}) `
### `selectedDetentIdentifier` return STRING - selectedDetentIdentifier (medium,large or none)

## Events

### `opened `
### `closed `
### `dismissing `
### `detentChange ` returns {"selectedDetentIdentifier":"medium",....}


## Properties

<<<<<<< HEAD
### `detents:{large:bool,medium:bool}`
#### The object of heights where a sheet can rest.
*if not set, default to 'medium' only*

### `preferredCornerRadius:integer`
#### The corner radius that the sheet attempts to present with.
*if not set default to iOS default radius*

### `prefersEdgeAttachedInCompactHeight:bool`
#### A Boolean value that determines whether the sheet attaches to the bottom edge of the screen in a compact-height size class.

### `prefersScrollingExpandsWhenScrolledToEdge:bool`
#### A Boolean value that determines whether scrolling expands the sheet to a larger detent.

### `widthFollowsPreferredContentSizeWhenEdgeAttached:bool`
#### A Boolean value that determines whether the sheet's width matches its view controller's preferred content size.

### `prefersGrabberVisible:bool`
#### A Boolean value that determines whether the sheet shows a grabber at the top.

### `largestUndimmedDetentIdentifier:string`
#### medium or large - if not set, it is full dimmed depending on activated detents - The largest detent that doesn’t dim the view underneath the sheet.
***If not set, defaults to full dimmed***

### `contentView:TiUIView,TiUIWindow or TiUINavigationWindow`
#### View (any kind), Window or NavigationWindow



## Example

```js

var TiBottomSheetControllerModule = require("ti.bottomsheetcontroller");


var tableRows = [];

var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];

for (var j = 0; j < tableData.length; j++) {
var rowView = Ti.UI.createView({
top:1,
bottom:1,
width:Ti.UI.FILL,
height:62,
backgroundColor:'transparent'
});

var title = Ti.UI.createLabel({
color: '#000',
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
font: {
fontFamily : 'Arial',
fontSize: 22,
fontWeight: 'bold'
},
text: tableData[j].title
});
rowView.add(title);

var row = Ti.UI.createTableViewRow({
className:'test',
height:60,
backgroundColor:'transparent',
width:Ti.UI.FILL
});
row.add(rowView);
tableRows.push(row);
}


var bottomView = Ti.UI.createTableView({
top:0,
left:0,
right:0,
bottom:0,
showVerticalScrollIndicator: true,
width:Ti.UI.FILL,
height:500,
contentHeight:Ti.UI.SIZE,
minRowHeight:60,
scrollable: true,
scrollType:'vertical',
backgroundColor:'transparent'
});

bottomView.setData(tableRows,{animated:false});


var bottomSheetController = TiBottomSheetControllerModule.createBottomSheet({
detents:{large:true,medium:true}, // The object of heights where a sheet can rest.
preferredCornerRadius:20, // The corner radius that the sheet attempts to present with.
prefersEdgeAttachedInCompactHeight:false, // A Boolean value that determines whether the sheet attaches to the bottom edge of the screen in a compact-height size class.
prefersScrollingExpandsWhenScrolledToEdge:false, // A Boolean value that determines whether scrolling expands the sheet to a larger detent.
widthFollowsPreferredContentSizeWhenEdgeAttached:false, // A Boolean value that determines whether the sheet's width matches its view controller's preferred content size.
prefersGrabberVisible:true, // A Boolean value that determines whether the sheet shows a grabber at the top.
largestUndimmedDetentIdentifier:'medium', // medium or large - if not set, it is full dimmed depending on activated detents - The largest detent that doesn’t dim the view underneath the sheet.
contentView: bottomView. // View (any kind), Window or NavigationWindow
});

bottomSheetController.addEventListener('dismissing', function() {
console.log("bottomSheet dismissing");
});

bottomSheetController.addEventListener('closed', function() {
console.log("bottomSheet closed");
});

bottomSheetController.addEventListener('opened', function() {
console.log("bottomSheet opened");
});
bottomSheetController.addEventListener('detentChange', function(e) {
console.log("\n\n bottomSheet detentChange: "+JSON.stringify(e)+"\n\n");

console.log("returns the at any time you call the propery -> bottomSheetController.selectedDetentIdentifier: "+bottomSheetController.selectedDetentIdentifier);
});

bottomSheetController.show({
animated:true
});

```

## License

MIT

## Author

Marc Bender
=======
var TiPopover = require('ti.popover');

var popover = TiPopover.createPopover({
arrowDirection:TiPopover.POPOVER_ARROW_DIRECTION_DOWN,
backgroundColor:'rgba(195,198,204,0.4)',
contentView:SOME_VIEW
});


popover.show({
view: REFERENCE_VIEW,
backgroundColor: 'rgba(0,0,0,0.2)',
blurBackground: true,
blurEffect: TiPopover.BLUR_EFFECT_STYLE_LIGHT,
animated: true
});

popover.addEventListener('closed', function() {
// return nothing just the event
// this event will get fired when manually do
// popover.hide({animated:true/false});
// useful when you did some action in your contentView and do hide the popover therefore manually
});

popover.addEventListener('hide', function() {
// return nothing just the event
// this event will get fired when outside of popover clicked....
});
>>>>>>> main
7 changes: 7 additions & 0 deletions assets/README
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Place your assets like PNG files in this directory and they will be packaged
with your module.

All JavaScript files in the assets directory are IGNORED except if you create a
file named "ti.popover.js" in this directory in which case it will be
wrapped by native code, compiled, and used as your module. This allows you to
run pure JavaScript modules that are pre-compiled.
Binary file added demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions documentation/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# ti.popover Module

## Description

TODO: Enter your module description here

## Accessing the ti.popover Module

To access this module from JavaScript, you would do the following:

var ti_popover = require("ti.popover");

The ti_popover variable is a reference to the Module object.

## Reference

TODO: If your module has an API, you should document
the reference here.

### ti_popover.function

TODO: This is an example of a module function.

### ti_popover.property

TODO: This is an example of a module property.

## Usage

TODO: Enter your usage example here

## Author

TODO: Enter your author name, email and other contact
details you want to share here.

## License

TODO: Enter your license/legal information here.
Loading

0 comments on commit 1c3b1ba

Please sign in to comment.