-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
titanium module for iOS 15 bottomsheetcontroller
initial
- Loading branch information
Showing
36 changed files
with
2,583 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.