Skip to content

Commit

Permalink
docs(kotlin): kotlin code examples in quick start
Browse files Browse the repository at this point in the history
  • Loading branch information
sjwall committed Oct 26, 2018
1 parent ac046aa commit f69df6d
Show file tree
Hide file tree
Showing 4 changed files with 302 additions and 3 deletions.
1 change: 1 addition & 0 deletions docs/_layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,6 @@
href="{{site.github.repository_url}}/blob/master/docs/{{page.path}}">Edit this page</a>
</section>
</main>
<script src="{{ '/assets/js/tabs.js?v=' | append: site.github.build_revision | relative_url }}"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions docs/assets/css/theme.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
---
---
/*
* Copyright (C) 2018 Samuel Wall
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

$app-bar-height: 64px;
$app-bar-below: 48px;
Expand All @@ -11,6 +25,11 @@ body
color: rgba(0,0,0,.82);
}

.hidden
{
display: none;
}

h2
{
margin-top: 24px;
Expand Down Expand Up @@ -159,3 +178,33 @@ p
top: ($app-bar-height + 16px);
right: 16px;
}

.tabs-titles
{
display: flex;
}

.tabs-title
{
padding: 4px 8px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #eee;
border-bottom: 0;
cursor: pointer;
}

.tabs-title.selected
{
border-color: #bbb;
}

.tabs-content .highlighter-rouge
{
margin: 0 0 16px 0;
}

.tabs-content .highlighter-rouge pre.highlight
{
border-top-left-radius: 0;
}
100 changes: 100 additions & 0 deletions docs/assets/js/tabs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*
* Copyright (C) 2018 Samuel Wall
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* Initialise the tabs.
*/
function initTabs()
{
// Get the desired language
let url = new URL(window.location);
let language = url.searchParams.get("language");
let tabIndex = 0;
// If kolin then the index should be 1
if (language == 'kotlin')
{
tabIndex = 1;
}
selectAllTabs(tabIndex, false);
}

/**
* Changes all tab groups to show the same tab index.
*
* @param index The 0 based index for the tab in the group.
* @param pushHistory Should the page location be updated.
*/
function selectAllTabs(index, pushHistory)
{
let tabGroups = document.getElementsByClassName('tabs');
for (let i = 0, count = tabGroups.length; i < count; i++)
{
let group = tabGroups[i];
selectTab(group, index);
}
if (pushHistory)
{
history.pushState(null, document.title, window.location.pathname
+ '?language=' + tabGroups[0].getElementsByClassName('tabs-title')[index].innerHTML.trim().toLowerCase()
+ window.location.hash);
}
}

/**
* Select a tab and show its contents in a tab group.
*
* @param group The tab group to update.
* @param index The tab position in the group.
*/
function selectTab(group, index)
{
let tabContents = group.getElementsByClassName('tabs-content');
for (let i = 0, count = tabContents.length; i < count; i++)
{
let content = tabContents[i];
if (i == index)
{
content.classList.remove('hidden');
}
else
{
content.classList.add('hidden');
}
}
let titles = group.getElementsByClassName('tabs-title');
for (let i = 0, count = titles.length; i < count; i++)
{
let content = titles[i];
if (i == index)
{
content.classList.add('selected');
}
else
{
content.classList.remove('selected');
}
if (!content.classList.contains('inited'))
{
let pos = i;
content.onclick = () =>
{
selectAllTabs(pos, true);
};
content.classList.add('inited');
}
}
}

initTabs();
155 changes: 152 additions & 3 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
---
layout: home
---
<!--
~ Copyright (C) 2018 Samuel Wall
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

Follow the [quick start guide](#quick-start) below to get started.

Expand Down Expand Up @@ -31,28 +46,94 @@ Supports Android minSdkVersion 14

Tap target prompts are created with a [builder](javadocs/uk/co/samuelwall/materialtaptargetprompt/MaterialTapTargetPrompt.Builder.html) class much like the Android AlertDialog builder:

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder = new MaterialTapTargetPrompt.Builder(MainActivity.this)
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
builder = MaterialTapTargetPrompt.Builder(this@MainActivity)
```
</div>
</div>

Set the view to focus the prompt on:

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder.setTarget(R.id.target_view_id)
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
builder.target = R.id.target_view_id
```
</div>
</div>

Set the text to display on the first line:

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder.setPrimaryText("This text is displayed on the first line")
builder.setPrimaryText("This text is displayed on the first line");
```

</div>
<div class="tabs-content" markdown="1">
```kotlin
builder.primaryText = "This text is displayed on the first line"
```
</div>
</div>

Optionally set the text to display on the second line. If the primary text is not set the secondary text must be set

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder.setSecondaryText("Text to display on the second line")
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
builder.secondaryText = "Text to display on the second line"
```
</div>
</div>

To listen in to the prompt events set a PromptStateChangeListener.
Possible states are:
Expand All @@ -66,6 +147,16 @@ Possible states are:
* [STATE_FINISHING](javadocs/uk/co/samuelwall/materialtaptargetprompt/MaterialTapTargetPrompt.html#STATE_FINISHING) - Prompt finish method has been called and the prompt is being removed from view
* [STATE_FINISHED](javadocs/uk/co/samuelwall/materialtaptargetprompt/MaterialTapTargetPrompt.html#STATE_FINISHED) - Prompt has been removed from view after the prompt has been pressed in the focal area

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder.setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener()
{
Expand All @@ -79,17 +170,56 @@ builder.setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChan
}
})
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
builder.setPromptStateChangeListener { prompt, state ->
if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED)
{
// User has pressed the prompt target
}
}
```
</div>
</div>

The Builder extends abstract class [PromptOptions](javadocs/uk/co/samuelwall/materialtaptargetprompt/extras/PromptOptions.html) which contains more customisation options.

Finally show the tap target:

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
builder.show()
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
builder.show()
```
</div>
</div>

All combined together:

<div class="tabs">
<div class="tabs-titles">
<div class="tabs-title">
Java
</div>
<div class="tabs-title">
Kotlin
</div>
</div>
<div class="tabs-content" markdown="1">
```java
import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;

Expand All @@ -110,6 +240,25 @@ new MaterialTapTargetPrompt.Builder(MainActivity.this)
})
.show();
```
</div>
<div class="tabs-content" markdown="1">
```kotlin
import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;

MaterialTapTargetPrompt.Builder(this@MainActivity)
.setTarget(R.id.target_view_id)
.setPrimaryText("This text is displayed on the first line")
.setSecondaryText("Text to display on the second line")
.setPromptStateChangeListener { prompt, state ->
if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED)
{
// User has pressed the prompt target
}
}
.show()
```
</div>
</div>

### Note

Expand Down

0 comments on commit f69df6d

Please sign in to comment.