Lessons resources

commit_hash:39fa333110b40aaf54822cd059ba234934e82055
This commit is contained in:
the-leo
2025-03-18 21:33:11 +03:00
parent 8e48782f25
commit b320b41834
43 changed files with 3613 additions and 0 deletions
+38
View File
@@ -12272,12 +12272,17 @@
"client/android/sample/src/main/AndroidManifest.xml":"divkit/public/client/android/sample/src/main/AndroidManifest.xml",
"client/android/sample/src/main/assets/sample.json":"divkit/public/client/android/sample/src/main/assets/sample.json",
"client/android/sample/src/main/ic_launcher-playstore.png":"divkit/public/client/android/sample/src/main/ic_launcher-playstore.png",
"client/android/sample/src/main/java/com/yandex/divkit/sample/ArtikaTypefaceProvider.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/ArtikaTypefaceProvider.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/AssetReader.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/AssetReader.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/DivViewFactory.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/DivViewFactory.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/MainPageActivity.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/MainPageActivity.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/MultiTypefaceProvider.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/MultiTypefaceProvider.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/SampleDivActionHandler.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/SampleDivActionHandler.kt",
"client/android/sample/src/main/java/com/yandex/divkit/sample/SuperTriviaTypefaceProvider.kt":"divkit/public/client/android/sample/src/main/java/com/yandex/divkit/sample/SuperTriviaTypefaceProvider.kt",
"client/android/sample/src/main/res/drawable/ic_launcher_background.xml":"divkit/public/client/android/sample/src/main/res/drawable/ic_launcher_background.xml",
"client/android/sample/src/main/res/drawable/ic_launcher_foreground.xml":"divkit/public/client/android/sample/src/main/res/drawable/ic_launcher_foreground.xml",
"client/android/sample/src/main/res/font/artika.ttf":"divkit/public/client/android/sample/src/main/res/font/artika.ttf",
"client/android/sample/src/main/res/font/super_trivia.ttf":"divkit/public/client/android/sample/src/main/res/font/super_trivia.ttf",
"client/android/sample/src/main/res/layout/activity_main_page.xml":"divkit/public/client/android/sample/src/main/res/layout/activity_main_page.xml",
"client/android/sample/src/main/res/mipmap-anydpi-v26/ic_launcher.xml":"divkit/public/client/android/sample/src/main/res/mipmap-anydpi-v26/ic_launcher.xml",
"client/android/sample/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml":"divkit/public/client/android/sample/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml",
@@ -20000,6 +20005,39 @@
"json-builder/typescript/test/tsconfig.json":"divkit/public/json-builder/typescript/test/tsconfig.json",
"json-builder/typescript/tsconfig.eslint.json":"divkit/public/json-builder/typescript/tsconfig.eslint.json",
"json-builder/typescript/tsconfig.json":"divkit/public/json-builder/typescript/tsconfig.json",
"lessons_resources/06. Typed Actions/mixed_actions.json":"divkit/public/lessons_resources/06. Typed Actions/mixed_actions.json",
"lessons_resources/06. Typed Actions/only_typed_actions.json":"divkit/public/lessons_resources/06. Typed Actions/only_typed_actions.json",
"lessons_resources/07. DSL/layout_application/build.gradle":"divkit/public/lessons_resources/07. DSL/layout_application/build.gradle",
"lessons_resources/07. DSL/layout_application/gradle/wrapper/gradle-wrapper.properties":"divkit/public/lessons_resources/07. DSL/layout_application/gradle/wrapper/gradle-wrapper.properties",
"lessons_resources/07. DSL/layout_application/gradlew":"divkit/public/lessons_resources/07. DSL/layout_application/gradlew",
"lessons_resources/07. DSL/layout_application/gradlew.bat":"divkit/public/lessons_resources/07. DSL/layout_application/gradlew.bat",
"lessons_resources/07. DSL/layout_application/settings.gradle":"divkit/public/lessons_resources/07. DSL/layout_application/settings.gradle",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/Application.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/Application.kt",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/CardTemplate.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/CardTemplate.kt",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/LayoutRenderer.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/LayoutRenderer.kt",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/data/PostData.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/data/PostData.kt",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/data/Utils.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/data/Utils.kt",
"lessons_resources/07. DSL/layout_application/src/main/kotlin/data/Variables.kt":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/kotlin/data/Variables.kt",
"lessons_resources/07. DSL/layout_application/src/main/resources/output/div.json":"divkit/public/lessons_resources/07. DSL/layout_application/src/main/resources/output/div.json",
"lessons_resources/08. Text/text_with_decoration.json":"divkit/public/lessons_resources/08. Text/text_with_decoration.json",
"lessons_resources/08. Text/text_without_decoration.json":"divkit/public/lessons_resources/08. Text/text_without_decoration.json",
"lessons_resources/09. Containers/container/constrained.json":"divkit/public/lessons_resources/09. Containers/container/constrained.json",
"lessons_resources/09. Containers/container/overlap.json":"divkit/public/lessons_resources/09. Containers/container/overlap.json",
"lessons_resources/09. Containers/container/separator.json":"divkit/public/lessons_resources/09. Containers/container/separator.json",
"lessons_resources/09. Containers/container/wrap.json":"divkit/public/lessons_resources/09. Containers/container/wrap.json",
"lessons_resources/09. Containers/gallery/gallery.json":"divkit/public/lessons_resources/09. Containers/gallery/gallery.json",
"lessons_resources/09. Containers/grid/grid.json":"divkit/public/lessons_resources/09. Containers/grid/grid.json",
"lessons_resources/09. Containers/layout_provider.json":"divkit/public/lessons_resources/09. Containers/layout_provider.json",
"lessons_resources/09. Containers/pager/infinite_scroll.json":"divkit/public/lessons_resources/09. Containers/pager/infinite_scroll.json",
"lessons_resources/09. Containers/tab/simple_tab.json":"divkit/public/lessons_resources/09. Containers/tab/simple_tab.json",
"lessons_resources/09. Containers/tab/title_animations.json":"divkit/public/lessons_resources/09. Containers/tab/title_animations.json",
"lessons_resources/10. Item builder/item_builder.json":"divkit/public/lessons_resources/10. Item builder/item_builder.json",
"lessons_resources/11. Animations/action_animation.json":"divkit/public/lessons_resources/11. Animations/action_animation.json",
"lessons_resources/11. Animations/animators.json":"divkit/public/lessons_resources/11. Animations/animators.json",
"lessons_resources/11. Animations/transition_animation.json":"divkit/public/lessons_resources/11. Animations/transition_animation.json",
"lessons_resources/11. Animations/transition_change_animation.json":"divkit/public/lessons_resources/11. Animations/transition_change_animation.json",
"lessons_resources/11. Item builder/item_builder.json":"divkit/public/lessons_resources/11. Item builder/item_builder.json",
"lessons_resources/12. User-declared functions/function.json":"divkit/public/lessons_resources/12. User-declared functions/function.json",
"readme_pictures/ads-sdk.png":"divkit/public/readme_pictures/ads-sdk.png",
"readme_pictures/alice.png":"divkit/public/readme_pictures/alice.png",
"readme_pictures/app_screen.png":"divkit/public/readme_pictures/app_screen.png",
+13
View File
@@ -1,3 +1,16 @@
# DivKit Sample app
Presents a minimalistic application showing the capabilities of the DivKit framework.
The application uses fonts free for personal and commercial use, the intellectual rights to which belong to the following authors:
Super Trivia Font:
Designed by: All Super Font https://nhfonts.etsy.com/
https://fontesk.com/super-trivia-font/
Artika Font:
Designed by: Anastasiya Davydava https://www.behance.net/anastasdavydav
https://fontesk.com/artika-font/
# DivKit Android. Quick start.
## Connect the library.
To connect the library to the project, all you have to do is add three dependencies to build.gradle:
+1
View File
@@ -39,6 +39,7 @@ dependencies {
implementation project(':div-rive')
implementation project(':utils')
implementation project(':div-pinch-to-zoom')
implementation project(':div-markdown')
implementation libs.androidx.coreKtx
implementation libs.androidx.activity
@@ -230,6 +230,7 @@
{
"type": "input",
"hint_text": "Toast your mind",
"font_family": "super_trivia",
"hint_color": "#666",
"width": {
"type": "match_parent"
@@ -281,6 +282,7 @@
{
"type": "text",
"text": "Toast!",
"font_family": "super_trivia",
"paddings": {
"top": 10,
"left": 10,
@@ -306,6 +308,28 @@
}
]
},
{
"type": "text",
"text_alignment_horizontal": "center",
"text": "**Info**: no error in code `println(\"Hello World!\")`",
"background": [
{
"type": "solid",
"color": "#fff"
}
],
"paddings": {
"top": 5,
"bottom": 5,
"left": 5,
"right": 5
},
"extensions": [
{
"id": "markdown"
}
]
},
{
"type": "divgram_card",
"likes_counter": "@{card0.likes}",
@@ -0,0 +1,26 @@
package com.yandex.divkit.sample
import android.content.Context
import android.graphics.Typeface
import androidx.core.content.res.ResourcesCompat
import com.yandex.div.core.font.DivTypefaceProvider
class ArtikaTypefaceProvider(
private val context: Context,
) : DivTypefaceProvider {
override fun getRegular(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getMedium(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getLight(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getBold(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
}
@@ -4,6 +4,7 @@ import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.yandex.div.core.Div2Context
import com.yandex.div.core.DivConfiguration
import com.yandex.div.markdown.DivMarkdownExtensionHandler
import com.yandex.div.picasso.PicassoDivImageLoader
import com.yandex.div.rive.OkHttpDivRiveNetworkDelegate
import com.yandex.div.rive.RiveCustomViewAdapter
@@ -48,8 +49,22 @@ class MainPageActivity : AppCompatActivity() {
DivPinchToZoomConfiguration.Builder(this).build()
)
)
.extension(DivMarkdownExtensionHandler(this))
.divCustomContainerViewAdapter(RiveCustomViewAdapter.Builder(this, OkHttpDivRiveNetworkDelegate(OkHttpClient.Builder().build())).build())
.visualErrorsEnabled(true)
.apply {
if (ENABLE_CUSTOM_FONTS) {
typefaceProvider(MultiTypefaceProvider(this@MainPageActivity))
}
}
.additionalTypefaceProviders(mapOf(
"artika" to ArtikaTypefaceProvider(this@MainPageActivity),
"super_trivia" to SuperTriviaTypefaceProvider(this@MainPageActivity),
))
.build()
}
companion object {
private const val ENABLE_CUSTOM_FONTS = true
}
}
@@ -0,0 +1,26 @@
package com.yandex.divkit.sample
import android.content.Context
import android.graphics.Typeface
import androidx.core.content.res.ResourcesCompat
import com.yandex.div.core.font.DivTypefaceProvider
class MultiTypefaceProvider(
private val context: Context,
) : DivTypefaceProvider {
override fun getRegular(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getMedium(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getLight(): Typeface {
return ResourcesCompat.getFont(context, R.font.artika) ?: Typeface.DEFAULT
}
override fun getBold(): Typeface {
return ResourcesCompat.getFont(context, R.font.super_trivia) ?: Typeface.DEFAULT
}
}
@@ -0,0 +1,26 @@
package com.yandex.divkit.sample
import android.content.Context
import android.graphics.Typeface
import androidx.core.content.res.ResourcesCompat
import com.yandex.div.core.font.DivTypefaceProvider
class SuperTriviaTypefaceProvider(
private val context: Context,
) : DivTypefaceProvider {
override fun getRegular(): Typeface {
return ResourcesCompat.getFont(context, R.font.super_trivia) ?: Typeface.DEFAULT
}
override fun getMedium(): Typeface {
return ResourcesCompat.getFont(context, R.font.super_trivia) ?: Typeface.DEFAULT
}
override fun getLight(): Typeface {
return ResourcesCompat.getFont(context, R.font.super_trivia) ?: Typeface.DEFAULT
}
override fun getBold(): Typeface {
return ResourcesCompat.getFont(context, R.font.super_trivia) ?: Typeface.DEFAULT
}
}
Binary file not shown.
@@ -0,0 +1,172 @@
{
"templates": {
"button": {
"type": "text",
"width": {
"type": "match_parent"
},
"height": {
"type": "wrap_content"
},
"paddings": {
"left": 16,
"top": 16,
"right": 16,
"bottom": 16
},
"margins": {
"top": 16,
"bottom": 16,
"left": 16,
"right": 16
},
"border": {
"corner_radius": 8
},
"background": [
{
"type": "solid",
"color": "#0E000000"
}
],
"font_size": 16,
"font_weight": "medium",
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000",
"alpha": 1,
"alignment_horizontal": "center",
"alignment_vertical": "center"
}
},
"card": {
"log_id": "div2_sample_card",
"variables": [
{
"name": "my_edit_text",
"type": "string",
"value": ""
},
{
"name": "in_text_state",
"type": "boolean",
"value": false
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"items": [
{
"type": "state",
"id": "data_state",
"states": [
{
"state_id": "url",
"div": {
"type": "button",
"text": "Copy url",
"actions": [
{
"typed": {
"type": "copy_to_clipboard",
"content": {
"type": "url",
"value": "https://ya.ru/"
}
},
"log_id": "copy url"
}
]
}
},
{
"state_id": "text",
"div": {
"type": "button",
"text": "Copy string",
"actions": [
{
"typed": {
"type": "copy_to_clipboard",
"content": {
"type": "text",
"value": "Copied string"
}
},
"log_id": "copy string"
}
]
}
}
]
},
{
"type": "button",
"text": "Switch content",
"actions": [
{
"log_id": "switch_to_url",
"is_enabled": "@{in_text_state}",
"url": "div-action://set_state?state_id=0/data_state/url"
},
{
"log_id": "switch_to_text",
"is_enabled": "@{!in_text_state}",
"url": "div-action://set_state?state_id=0/data_state/text"
},
{
"log_id": "remember_state",
"url": "div-action://set_variable?name=in_text_state&value=@{!in_text_state}"
}
]
},
{
"type": "input",
"width": {
"type": "match_parent"
},
"height": {
"type": "wrap_content"
},
"margins": {
"left": 16,
"top": 20,
"right": 16,
"bottom": 16
},
"paddings": {
"left": 16,
"top": 10,
"right": 16,
"bottom": 10
},
"alpha": 1,
"alignment_horizontal": "center",
"alignment_vertical": "center",
"background": [
{
"type": "solid",
"color": "#0e000000"
}
],
"border": {
"corner_radius": 8
},
"font_size": 16,
"font_weight": "medium",
"text_color": "#000000",
"hint_text": "Paste here",
"text_variable": "my_edit_text",
"line_height": 22,
"select_all_on_focus": 1,
"keyboard_type": "single_line_text"
}
]
}
}
]
}
}
@@ -0,0 +1,185 @@
{
"templates": {
"button": {
"type": "text",
"width": {
"type": "match_parent"
},
"height": {
"type": "wrap_content"
},
"paddings": {
"left": 16,
"top": 16,
"right": 16,
"bottom": 16
},
"margins": {
"top": 16,
"bottom": 16,
"left": 16,
"right": 16
},
"border": {
"corner_radius": 8
},
"background": [
{
"type": "solid",
"color": "#0E000000"
}
],
"font_size": 16,
"font_weight": "medium",
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000",
"alpha": 1,
"alignment_horizontal": "center",
"alignment_vertical": "center"
}
},
"card": {
"log_id": "div2_sample_card",
"variables": [
{
"name": "my_edit_text",
"type": "string",
"value": ""
},
{
"name": "in_text_state",
"type": "boolean",
"value": false
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"items": [
{
"type": "state",
"id": "data_state",
"states": [
{
"state_id": "url",
"div": {
"type": "button",
"text": "Copy url",
"actions": [
{
"typed": {
"type": "copy_to_clipboard",
"content": {
"type": "url",
"value": "https://ya.ru/"
}
},
"log_id": "copy url"
}
]
}
},
{
"state_id": "text",
"div": {
"type": "button",
"text": "Copy string",
"actions": [
{
"typed": {
"type": "copy_to_clipboard",
"content": {
"type": "text",
"value": "Copied string"
}
},
"log_id": "copy string"
}
]
}
}
]
},
{
"type": "button",
"text": "Switch content",
"actions": [
{
"log_id": "switch_to_url",
"is_enabled": "@{in_text_state}",
"typed": {
"type": "set_state",
"state_id": "0/data_state/url"
}
},
{
"log_id": "switch_to_text",
"is_enabled": "@{!in_text_state}",
"typed": {
"type": "set_state",
"state_id": "0/data_state/text"
}
},
{
"log_id": "remember_state",
"typed": {
"type": "set_variable",
"variable_name": "in_text_state",
"value": {
"type": "boolean",
"value": "@{!in_text_state}"
}
}
}
]
},
{
"type": "input",
"width": {
"type": "match_parent"
},
"height": {
"type": "wrap_content"
},
"margins": {
"left": 16,
"top": 20,
"right": 16,
"bottom": 16
},
"paddings": {
"left": 16,
"top": 10,
"right": 16,
"bottom": 10
},
"alpha": 1,
"alignment_horizontal": "center",
"alignment_vertical": "center",
"background": [
{
"type": "solid",
"color": "#0e000000"
}
],
"border": {
"corner_radius": 8
},
"font_size": 16,
"font_weight": "medium",
"text_color": "#000000",
"hint_text": "Paste here",
"text_variable": "my_edit_text",
"line_height": 22,
"select_all_on_focus": 1,
"keyboard_type": "single_line_text"
}
]
}
}
]
}
}
@@ -0,0 +1,23 @@
plugins {
id 'application'
id 'java'
id 'org.jetbrains.kotlin.jvm' version '1.9.0'
}
group = 'com.yandex.divkit.example.dsl'
version = '1.0.0'
repositories {
mavenCentral()
}
dependencies {
implementation "com.yandex.div:kotlin-json-builder:31.3.0"
implementation "com.fasterxml.jackson.core:jackson-core:2.18.2"
implementation "com.fasterxml.jackson.core:jackson-databind:2.18.2"
}
application {
mainClass = 'com.yandex.divkit.example.dsl.Application'
}
@@ -0,0 +1,7 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
+252
View File
@@ -0,0 +1,252 @@
#!/bin/sh
#
# Copyright © 2015-2021 the original authors.
#
# 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
#
# https://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.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
# This is normally unused
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
' "$PWD" ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
if ! command -v java >/dev/null 2>&1
then
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
org.gradle.wrapper.GradleWrapperMain \
"$@"
# Stop when "xargs" is not available.
if ! command -v xargs >/dev/null 2>&1
then
die "xargs is not available"
fi
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"
@@ -0,0 +1,94 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if %ERRORLEVEL% equ 0 goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
if %ERRORLEVEL% equ 0 goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
set EXIT_CODE=%ERRORLEVEL%
if %EXIT_CODE% equ 0 set EXIT_CODE=1
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
exit /b %EXIT_CODE%
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
@@ -0,0 +1 @@
rootProject.name = 'divkit_example_layout_generator'
@@ -0,0 +1,18 @@
package com.yandex.divkit.example.dsl
import com.fasterxml.jackson.databind.ObjectMapper
import java.io.File
class Application {
companion object {
@JvmStatic
fun main(args: Array<String>) {
val data = LayoutRenderer().render()
val mapper = ObjectMapper().writerWithDefaultPrettyPrinter()
val jsonText = mapper.writeValueAsString(data)
File("./src/main/resources/output/div.json").writeText(jsonText)
}
}
}
@@ -0,0 +1,53 @@
package com.yandex.divkit.example.dsl
import com.yandex.divkit.example.dsl.data.Variables
import divkit.dsl.Url
import divkit.dsl.action
import divkit.dsl.actionSetVariable
import divkit.dsl.center
import divkit.dsl.container
import divkit.dsl.core.reference
import divkit.dsl.defer
import divkit.dsl.edgeInsets
import divkit.dsl.fixedSize
import divkit.dsl.image
import divkit.dsl.stringValue
import divkit.dsl.template
import divkit.dsl.text
object CardTemplate {
val descriptionRef = reference<String>("description")
val imageRef = reference<Url>("img")
val template by lazy(LazyThreadSafetyMode.NONE) {
template("sample_card") {
container(
margins = edgeInsets(all = 10),
width = fixedSize(
value = 150,
),
items = listOf(
image().defer(
imageUrl = imageRef,
),
text(
textAlignmentHorizontal = center,
).defer(
text = descriptionRef,
)
),
actions = listOf(
action(
logId = "post_selected",
typed = actionSetVariable(
variableName = Variables.SELECTED_POST_DESCRIPTION,
value = stringValue().defer(
value = descriptionRef,
)
)
)
)
)
}
}
}
@@ -0,0 +1,92 @@
package com.yandex.divkit.example.dsl
import com.yandex.divkit.example.dsl.data.PostData
import com.yandex.divkit.example.dsl.data.Variables.SELECTED_POST_DESCRIPTION
import com.yandex.divkit.example.dsl.data.exampleData
import divkit.dsl.Div
import divkit.dsl.Divan
import divkit.dsl.Url
import divkit.dsl.center
import divkit.dsl.container
import divkit.dsl.core.bind
import divkit.dsl.core.expression
import divkit.dsl.data
import divkit.dsl.divan
import divkit.dsl.evaluate
import divkit.dsl.gallery
import divkit.dsl.horizontal
import divkit.dsl.render
import divkit.dsl.root
import divkit.dsl.scope.DivScope
import divkit.dsl.stringVariable
import divkit.dsl.text
class LayoutRenderer {
fun render(): Divan {
val postDataList = exampleData
return divan {
data(
logId = "generated_div",
div = container(
items = listOf(
createSelectedPostIndicator(),
createPostsGallery(postDataList),
)
),
variables = listOf(
stringVariable(
name = SELECTED_POST_DESCRIPTION,
value = "none",
)
)
)
}
}
private fun DivScope.createSelectedPostIndicator(): Div {
return text(
textAlignmentHorizontal = center,
).evaluate(
text = expression("Selected post: @{$SELECTED_POST_DESCRIPTION}"),
)
}
private fun DivScope.createPostsGallery(posts: List<PostData>): Div {
return gallery(
orientation = horizontal,
items = buildList {
posts.forEach { post ->
add(createCard(post))
}
}
)
}
private fun DivScope.createCard(person: PostData): Div {
return with(CardTemplate) {
render(
template,
descriptionRef bind person.description,
imageRef bind Url.create(person.imageUrl.toString()),
)
}
}
@Suppress("unused")
private fun getLayoutHardWay(): Divan {
return divan {
data(
logId = "generated_div",
states = listOf(
root(
stateId = 0,
div = container(
// Layout
)
)
),
)
}
}
}
@@ -0,0 +1,8 @@
package com.yandex.divkit.example.dsl.data
import java.net.URL
data class PostData(
val imageUrl: URL,
val description: String,
)
@@ -0,0 +1,22 @@
package com.yandex.divkit.example.dsl.data
import java.net.URL
val exampleData = listOf(
PostData(
imageUrl = URL("https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_1.png"),
description = "Аллея со скамейкой"
),
PostData(
imageUrl = URL("https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_2.png"),
description = "Дорожка около пруда"
),
PostData(
imageUrl = URL("https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_3.png"),
description = "Пересечение дорожек"
),
PostData(
imageUrl = URL("https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_4.png"),
description = "Вечерняя аллея с фонарём"
),
)
@@ -0,0 +1,5 @@
package com.yandex.divkit.example.dsl.data
object Variables {
val SELECTED_POST_DESCRIPTION = "selected_post_description"
}
@@ -0,0 +1,75 @@
{
"card" : {
"log_id" : "generated_div",
"states" : [ {
"state_id" : 0,
"div" : {
"type" : "container",
"items" : [ {
"type" : "text",
"text" : "Selected post: @{selected_post_description}",
"text_alignment_horizontal" : "center"
}, {
"type" : "gallery",
"items" : [ {
"type" : "sample_card",
"description" : "Аллея со скамейкой",
"img" : "https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_1.png"
}, {
"type" : "sample_card",
"description" : "Дорожка около пруда",
"img" : "https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_2.png"
}, {
"type" : "sample_card",
"description" : "Пересечение дорожек",
"img" : "https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_3.png"
}, {
"type" : "sample_card",
"description" : "Вечерняя аллея с фонарём",
"img" : "https://raw.githubusercontent.com/divkit/divkit/91a4fe592d2ee4ba247f87cd769caf2527dcea80/client/android/divkit-demo-app/src/main/assets/images/district/item_background_4.png"
} ],
"orientation" : "horizontal"
} ]
}
} ],
"variables" : [ {
"type" : "string",
"name" : "selected_post_description",
"value" : "none"
} ]
},
"templates" : {
"sample_card" : {
"type" : "container",
"actions" : [ {
"log_id" : "post_selected",
"typed" : {
"type" : "set_variable",
"value" : {
"type" : "string",
"$value" : "description"
},
"variable_name" : "selected_post_description"
}
} ],
"items" : [ {
"type" : "image",
"$image_url" : "img"
}, {
"type" : "text",
"$text" : "description",
"text_alignment_horizontal" : "center"
} ],
"margins" : {
"bottom" : 10,
"left" : 10,
"right" : 10,
"top" : 10
},
"width" : {
"type" : "fixed",
"value" : 150
}
}
}
}
@@ -0,0 +1,128 @@
{
"templates": {
"example_text": {
"type": "text",
"font_size": 20,
"margins": {
"bottom": 10,
"top": 10
}
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"left": 10,
"right": 10
},
"type": "container",
"separator": {
"show_between": true,
"style": {
"color": "#999",
"type": "shape_drawable",
"shape": {
"type": "rounded_rectangle",
"item_width": {
"type": "fixed",
"value": 1000
},
"item_height": {
"type": "fixed",
"value": 1
}
}
}
},
"items": [
{
"type": "example_text",
"text": "Long text that should not take up more than 1 line",
"max_lines": 1,
"ellipsis": {
"text": "… SHOW MORE",
"ranges": [
{
"start": 2,
"end": 11,
"font_size": 11,
"font_weight": "medium",
"text_color": "#95A5A6"
}
]
},
"text_shadow": {
"color": "#30d5c8",
"alpha": 1,
"blur": 1,
"offset": {
"x": {
"value": 3
},
"y": {
"value": 3
}
}
}
},
{
"type": "example_text",
"text": "Long text with many possibilities for highlighting and adding some elements. For example,\n Su\u00ADper\u00ADcal\u00ADifrag\u00ADilis\u00ADtic\u00ADex\u00ADpi\u00ADali\u00ADdo\u00ADcious",
"alignment_horizontal": "end",
"width":{
"type": "fixed",
"value": 260
},
"text_alignment_horizontal": "end",
"text_gradient": {
"type": "gradient",
"angle": 60,
"colors": [
"#8b00ff",
"#ffa500"
]
},
"images": [
{
"start": 67,
"url": "https://yastatic.net/s3/doc-binary/src/divkit/divkitfav.png"
}
],
"ranges": [
{
"start": 0,
"end": 4,
"letter_spacing": 2
},
{
"start": 38,
"end": 50,
"font_weight": "bold"
},
{
"start": 78,
"end": 89,
"underline": "single"
}
]
},
{
"type": "example_text",
"text_alignment_horizontal": "center",
"text": "**Info**: no error in code `println(\"Hello World!\")`",
"extensions": [
{
"id": "markdown"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,59 @@
{
"templates": {
"example_text": {
"type": "text",
"font_size": 20,
"margins": {
"bottom": 10,
"top": 10
}
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"left": 10,
"right": 10
},
"type": "container",
"separator": {
"show_between": true,
"style": {
"color": "#999",
"type": "shape_drawable",
"shape": {
"type": "rounded_rectangle",
"item_width": {
"type": "fixed",
"value": 1000
},
"item_height": {
"type": "fixed",
"value": 1
}
}
}
},
"items": [
{
"type": "example_text",
"text": "Long text that should not take up more than 1 line"
},
{
"type": "example_text",
"text": "Long text with many possibilities for highlighting and adding some elements. For example, Supercalifragilisticexpialidocious"
},
{
"type": "example_text",
"text": "**Info**: no error in code `println(\"Hello World!\")`"
}
]
}
}
]
}
}
@@ -0,0 +1,78 @@
{
"templates": {
"basic_text": {
"type": "text",
"font_size": 15,
"margins": {
"top": 12,
"bottom": 12
},
"border": {
"corner_radius": 10
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "wrap_content",
"constrained": true
}
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"width": {
"type": "fixed",
"value": 350
},
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"border": {
"stroke": {
"color": "#000"
}
},
"items": [
{
"type": "container",
"orientation": "horizontal",
"items": [
{
"type": "basic_text",
"text": "Block 1.1 has a larger width"
},
{
"type": "basic_text",
"text": "Block 1.2"
},
{
"type": "basic_text",
"text": "Block 1.3"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,73 @@
{
"templates": {
"block": {
"type": "container",
"width": {
"type": "fixed",
"value": 100
},
"height": {
"type": "fixed",
"value": 100
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
]
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"type": "container",
"orientation": "overlap",
"width": {
"type": "fixed",
"value": 150
},
"height": {
"type": "fixed",
"value": 150
},
"items": [
{
"type": "block",
"background_color": "#6000ff00"
},
{
"type": "block",
"background_color": "#600000ff",
"alignment_horizontal": "end",
"alignment_vertical": "bottom"
},
{
"type": "text",
"text": "Everything in one container",
"width": {
"type": "fixed",
"value": 100
},
"text_alignment_horizontal": "center",
"alignment_horizontal": "end",
"font_size": 15,
"margins": {
"top": 12
}
}
]
}
}
]
}
}
@@ -0,0 +1,92 @@
{
"templates": {
"basic_text": {
"type": "text",
"font_size": 15,
"margins": {
"top": 12,
"bottom": 12
},
"border": {
"corner_radius": 10
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "fixed",
"value": 150
}
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"type": "container",
"orientation": "vertical",
"border": {
"stroke": {
"color": "#000"
}
},
"items": [
{
"type": "container",
"orientation": "vertical",
"separator": {
"style": {
"type": "shape_drawable",
"color": "#000",
"shape": {
"type": "rounded_rectangle",
"item_width": {
"type": "fixed",
"value": 100
},
"item_height": {
"type": "fixed",
"value": 1
}
}
}
},
"content_alignment_horizontal": "center",
"items": [
{
"type": "basic_text",
"text": "Block 1.1"
},
{
"type": "basic_text",
"text": "Block 1.2"
},
{
"type": "basic_text",
"text": "Block 1.3"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,75 @@
{
"templates": {
"basic_text": {
"type": "text",
"font_size": 15,
"margins": {
"top": 12,
"bottom": 12
},
"border": {
"corner_radius": 10
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "fixed",
"value": 150
}
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"type": "container",
"orientation": "vertical",
"border": {
"stroke": {
"color": "#000"
}
},
"items": [
{
"type": "container",
"orientation": "horizontal",
"layout_mode": "wrap",
"items": [
{
"type": "basic_text",
"text": "Block 1.1"
},
{
"type": "basic_text",
"text": "Block 1.2"
},
{
"type": "basic_text",
"text": "Block 1.3"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,148 @@
{
"templates": {
"basic_text": {
"type": "text",
"font_size": 15,
"margins": {
"top": 12,
"bottom": 12,
"start": 12,
"end": 12
},
"border": {
"corner_radius": 10
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "match_parent"
},
"alignment_horizontal": "center",
"reuse_id": "text"
},
"image_block": {
"type": "container",
"background": [
{
"type": "solid",
"color": "#2000ffff"
}
],
"border": {
"corner_radius": 10
},
"margins": {
"top": 12,
"bottom": 12,
"start": 12,
"end": 12
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"items": [
{
"type": "image",
"$image_url": "url",
"height": {
"type": "fixed",
"value": 250
},
"scale": "fit"
}
],
"reuse_id": "image"
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"type": "container",
"orientation": "vertical",
"border": {
"stroke": {
"color": "#000"
}
},
"items": [
{
"type": "gallery",
"height": {
"type": "fixed",
"value": 300
},
"items": [
{
"type": "basic_text",
"text": "Block 1"
},
{
"type": "basic_text",
"text": "Block 2"
},
{
"type": "image_block",
"url": "https://yastatic.net/s3/home/divkit/wombat.jpg"
},
{
"type": "basic_text",
"text": "Block 3"
},
{
"type": "basic_text",
"text": "Block 4"
},
{
"type": "basic_text",
"text": "Block 5"
},
{
"type": "image_block",
"url": "https://yastatic.net/s3/home/divkit/ducks.jpg"
},
{
"type": "basic_text",
"text": "Block 6"
},
{
"type": "basic_text",
"text": "Block 7"
},
{
"type": "basic_text",
"text": "Block 8"
},
{
"type": "basic_text",
"text": "Block 9"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,99 @@
{
"templates": {
"grid_element": {
"type": "container",
"width": {
"type": "match_parent",
"weight": 1
},
"height": {
"type": "match_parent",
"weight": 1
},
"margins": {
"left": 8,
"top": 8,
"right": 8,
"bottom": 8
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
],
"border": {
"corner_radius": 8
},
"delimiter_style": {
"color": "#00000000"
}
}
},
"card": {
"log_id": "grid_layout",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"items": [
{
"type": "grid",
"width": {
"type": "fixed",
"value": 288
},
"height": {
"type": "fixed",
"value": 370
},
"margins": {
"top": 16
},
"paddings": {
"left": 8,
"top": 8,
"right": 8,
"bottom": 8
},
"alignment_horizontal": "center",
"column_count": 3,
"items": [
{
"type": "grid_element",
"row_span": 2,
"background_color": "#D098D3"
},
{
"type": "grid_element",
"background_color": "#FFCC00"
},
{
"type": "grid_element",
"background_color": "#e1bae3"
},
{
"type": "grid_element",
"column_span": 2,
"background_color": "#ffe066"
},
{
"type": "grid_element",
"column_span": 3,
"height": {
"type": "fixed",
"value": 200
},
"content_alignment_vertical": "space-around",
"background_color": "#D098D3"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,90 @@
{
"templates": {
"block": {
"type": "container",
"margins": {
"left": 10,
"right": 10,
"top": 10,
"bottom": 10
},
"items": [
{
"type": "text",
"$text": "text",
"font_size": 16,
"width": {
"type": "wrap_content"
},
"margins": {
"left": 10,
"right": 10,
"top": 10,
"bottom": 10
}
}
],
"background": [
{
"type": "solid",
"color": "#A0FFA0"
}
]
}
},
"card": {
"log_id": "test",
"variables": [
{
"name": "block1_height",
"type": "integer",
"value": 0
},
{
"name": "block1_width",
"type": "integer",
"value": 0
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"paddings": {
"left": 10,
"top": 10,
"right": 10,
"bottom": 10
},
"items": [
{
"type": "block",
"text": "width = height x 4\nheight = wrap_content",
"width": {
"type": "fixed",
"value": "@{block1_height * 4}"
},
"layout_provider": {
"height_variable_name": "block1_height",
"width_variable_name": "block1_width"
}
},
{
"type": "block",
"width": {
"type": "fixed",
"value": "@{block1_height * 2}"
},
"height": {
"type": "fixed",
"value": "@{block1_width}"
},
"text": "width = block1_height x 2\nheight = block1_width"
}
]
}
}
]
}
}
@@ -0,0 +1,115 @@
{
"templates": {
"basic_text": {
"type": "text",
"font_size": 15,
"margins": {
"top": 12,
"bottom": 12,
"start": 12,
"end": 12
},
"border": {
"corner_radius": 10
},
"paddings": {
"top": 10,
"bottom": 10,
"start": 10,
"end": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "match_parent"
},
"alignment_horizontal": "center",
"text_alignment_horizontal": "center"
}
},
"card": {
"log_id": "generated_div",
"states": [
{
"state_id": 0,
"div": {
"margins": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"type": "container",
"orientation": "vertical",
"border": {
"stroke": {
"color": "#000"
}
},
"items": [
{
"type": "pager",
"id": "pager_id",
"orientation": "horizontal",
"layout_mode":{
"type": "fixed",
"neighbour_page_width": {
"type": "fixed",
"value": 10
}
},
"infinite_scroll": true,
"items": [
{
"type": "basic_text",
"text": "Block 1"
},
{
"type": "basic_text",
"text": "Block 2"
},
{
"type": "basic_text",
"text": "Block 3"
}
]
},
{
"type": "indicator",
"pager_id": "pager_id",
"inactive_item_color": "#d0d1d9",
"active_item_color": "#000000",
"alignment_horizontal": "center",
"height": {
"type": "fixed",
"value": 30
},
"width": {
"type": "wrap_content"
},
"shape": {
"type": "rounded_rectangle",
"item_width": {
"type": "fixed",
"value": 10
},
"item_height": {
"type": "fixed",
"value": 2
},
"corner_radius": {
"type": "fixed",
"value": 2
}
}
}
]
}
}
]
}
}
@@ -0,0 +1,98 @@
{
"templates": {
"text_block": {
"type": "text",
"border": {
"corner_radius": 8,
"stroke": {
"color": "#ffffff",
"width": 2
}
},
"background": [
{
"color": "#0e000000",
"type": "solid"
}
],
"font_size": 20,
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000",
"height": {
"type": "fixed",
"value": 80
}
}
},
"card": {
"log_id": "sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"items": [
{
"type": "tabs",
"height": {
"type": "wrap_content"
},
"paddings": {
"left": 16,
"right": 16
},
"margins": {
"top": 4,
"bottom": 28
},
"items": [
{
"title": "Tab 1",
"div": {
"type": "text_block",
"text": "Item 0",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 2",
"div": {
"type": "text_block",
"text": "Item 1",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 3",
"div": {
"type": "text_block",
"text": "Item 3",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 4",
"div": {
"type": "text_block",
"text": "Item 4",
"width": {
"type": "match_parent"
}
}
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,119 @@
{
"templates": {
"text_block": {
"type": "text",
"border": {
"corner_radius": 8,
"stroke": {
"color": "#ffffff",
"width": 2
}
},
"background": [
{
"color": "#0e000000",
"type": "solid"
}
],
"font_size": 20,
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000",
"height": {
"type": "fixed",
"value": 80
}
},
"tabs_preset": {
"type": "tabs",
"height": {
"type": "wrap_content"
},
"paddings": {
"left": 16,
"right": 16
},
"tab_title_style": {
"animation_type": "none",
"item_spacing": 5
},
"margins": {
"top": 4,
"bottom": 28
},
"items": [
{
"title": "Tab 1",
"div": {
"type": "text_block",
"text": "Item 0",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 2",
"div": {
"type": "text_block",
"text": "Item 1",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 3",
"div": {
"type": "text_block",
"text": "Item 3",
"width": {
"type": "match_parent"
}
}
},
{
"title": "Tab 4",
"div": {
"type": "text_block",
"text": "Item 4",
"width": {
"type": "match_parent"
}
}
}
]
}
},
"card": {
"log_id": "sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"items": [
{
"type": "tabs_preset",
"tab_title_style": {
"animation_type": "slide",
"item_spacing": 5
}
},
{
"type": "tabs_preset",
"tab_title_style": {
"animation_type": "fade",
"item_spacing": 5
}
},
{
"type": "tabs_preset"
}
]
}
}
]
}
}
@@ -0,0 +1,174 @@
{
"templates": {
"cardContainer": {
"type": "container",
"border": {
"corner_radius": 16,
"stroke": {
"color": "#aaaaaa",
"width": 1
}
},
"margins": {
"bottom": 6
},
"width": {
"type": "wrap_content"
},
"orientation": "vertical",
"paddings": {
"top": 12,
"bottom": 12,
"left": 12,
"right": 12
}
}
},
"card": {
"log_id": "prototypes",
"variables": [
{
"name": "data",
"type": "array",
"value": [
{
"style": "only_text",
"title": "First text card"
},
{
"style": "only_text",
"title": "Second text card"
},
{
"style": "with_image",
"title": "Card with image",
"image_url": "https://yastatic.net/s3/home/divkit/wombat.jpg"
},
{
"style": "add_button"
}
]
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "gallery",
"orientation": "vertical",
"margins": {
"top": 10,
"start": 10,
"end": 10,
"bottom": 10
},
"item_builder": {
"type": "prototype",
"data": "@{data}",
"data_element_name": "item",
"prototypes": [
{
"selector": "@{getStringFromDict(item, 'style') == 'only_text'}",
"div": {
"type": "cardContainer",
"items": [
{
"type": "text",
"text": "@{getStringFromDict(item, 'title')}",
"font_size": 16,
"margins": {
"bottom": 4
},
"width": {
"type": "wrap_content"
}
}
],
"width": {
"type": "wrap_content"
}
}
},
{
"selector": "@{getStringFromDict(item, 'style') == 'with_image'}",
"div": {
"type": "cardContainer",
"items": [
{
"type": "image",
"image_url": "@{getStringFromDict(item, 'image_url')}",
"width": {
"type": "fixed",
"value": 150
},
"height": {
"type": "fixed",
"value": 150
}
},
{
"type": "text",
"text": "@{getStringFromDict(item, 'title')}",
"text_alignment_horizontal": "center",
"font_size": 16,
"margins": {
"left": 4
}
}
],
"width": {
"type": "wrap_content"
}
}
},
{
"selector": "@{getStringFromDict(item, 'style') == 'add_button'}",
"div": {
"type": "cardContainer",
"background": [
{
"type": "solid",
"color": "#3000ffff"
}
],
"items": [
{
"type": "text",
"text": "Add item",
"font_size": 16,
"width": {
"type": "wrap_content"
},
"paddings": {
"start": 13,
"end": 13,
"top": 13,
"bottom": 13
},
"actions": [
{
"log_id": "add_card",
"typed": {
"type": "array_insert_value",
"variable_name": "data",
"value": {
"type": "dict",
"value": {
"style": "only_text",
"title": "Additional card"
}
}
}
}
]
}
]
}
}
]
}
}
}
]
}
}
@@ -0,0 +1,116 @@
{
"templates": {
"button": {
"type": "text",
"height": {
"type": "fixed",
"value": 48
},
"margins": {
"left": 16,
"right": 16,
"bottom": 16
},
"border": {
"corner_radius": 16
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
],
"font_size": 14,
"font_weight": "medium",
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center"
}
},
"card": {
"log_id": "sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"margins": {
"top": 24,
"bottom": 24
},
"items": [
{
"type": "button",
"background_color": "#00B341",
"text": "Fade",
"text_color": "#000000",
"actions": [
{
"log_id": "fade_button_press",
"url": "div-action://animation/fade"
}
],
"action_animation": {
"name": "fade",
"start_value": 1.0,
"end_value": 0.4,
"duration": 500,
"interpolator": "ease_in_out"
}
},
{
"type": "button",
"background_color": "#0077FF",
"text_color": "#ffffff",
"text": "Scale",
"actions": [
{
"log_id": "scale_button_press",
"url": "div-action://animation/scale"
}
],
"action_animation": {
"name": "scale",
"start_value": 1.0,
"end_value": 0.4,
"duration": 500,
"interpolator": "ease_in_out"
}
},
{
"type": "button",
"background_color": "#FFCC00",
"text": "Set",
"text_color": "#000000",
"actions": [
{
"log_id": "set_button_press",
"url": "div-action://animation/set"
}
],
"action_animation": {
"name": "set",
"items": [
{
"name": "fade",
"start_value": 1.0,
"end_value": 0.2,
"duration": 300,
"interpolator": "ease_in_out"
},
{
"name": "scale",
"start_value": 1.0,
"end_value": 0.5,
"duration": 500,
"interpolator": "ease_in_out"
}
]
}
}
]
}
}
]
}
}
@@ -0,0 +1,205 @@
{
"templates": {
"case_container": {
"type": "container",
"orientation": "vertical",
"paddings": {
"left": 16,
"top": 16,
"right": 16,
"bottom": 16
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
]
},
"title": {
"type": "text",
"font_size": 24,
"font_weight": "bold",
"text_alignment_horizontal": "center",
"text_alignment_vertical": "center",
"text_color": "#586E75"
},
"button": {
"type": "text",
"height": {
"type": "fixed",
"value": 48
},
"paddings": {
"left": 8,
"top": 8,
"right": 8,
"bottom": 8
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
],
"border": {
"corner_radius": 8
},
"font_size": 20,
"font_weight": "medium",
"text_alignment_horizontal": "center",
"text_alignment_vertical": "center",
"text_color": "#FDF6E3"
}
},
"card": {
"log_id": "variable_animators",
"states": [
{
"state_id": 0,
"div": {
"type": "case_container",
"background_color": "#FDF6E3",
"items": [
{
"type": "title",
"margins": {
"bottom": 16
},
"text": "Spinner animator"
},
{
"id": "spinner",
"type": "image",
"width": {
"type": "fixed",
"value": 48
},
"height": {
"type": "fixed",
"value": 48
},
"margins": {
"bottom": 16
},
"image_url": "https://yastatic.net/s3/home/divkit/spinner.png",
"tint_color": "@{tint_color}",
"transform": {
"rotation": "@{rotation_angle}"
},
"alignment_horizontal": "center",
"variables": [
{
"name": "rotation_angle",
"type": "number",
"value": 0.0
},
{
"name": "tint_color",
"type": "color",
"value": "#268BD2"
}
],
"animators": [
{
"type": "number_animator",
"id": "rotation_animator",
"variable_name": "rotation_angle",
"duration": 1000,
"start_value": 0,
"end_value": 360,
"interpolator": "ease_in_out",
"$cancel_actions": "rotation_animator_cancel_actions"
},
{
"type": "color_animator",
"id": "tint_color_animator",
"variable_name": "tint_color",
"duration": 2000,
"start_value": "#268BD2",
"end_value": "#D33682",
"$cancel_actions": "tint_color_animator_cancel_actions"
}
],
"rotation_animator_cancel_actions": [
{
"log_id": "reset_rotation_animation",
"url": "div-action://set_variable?name=rotation_angle&value=0"
}
],
"tint_color_animator_cancel_actions": [
{
"log_id": "reset_tint_color_animation",
"url": "div-action://set_variable?name=tint_color&value=%23268BD2"
}
]
},
{
"type": "container",
"orientation": "horizontal",
"items": [
{
"type": "button",
"margins": {
"right": 16
},
"background_color": "#2AA198",
"text": "Start",
"actions": [
{
"log_id": "start_rotation_animation",
"scope_id": "spinner",
"typed": {
"type": "animator_start",
"animator_id": "rotation_animator",
"direction": "normal",
"repeat_count": {
"type": "infinity"
}
}
},
{
"log_id": "start_tint_color_animation",
"scope_id": "spinner",
"typed": {
"type": "animator_start",
"animator_id": "tint_color_animator",
"direction": "alternate",
"repeat_count": {
"type": "infinity"
}
}
}
]
},
{
"type": "button",
"background_color": "#CB4B16",
"text": "Stop",
"actions": [
{
"log_id": "stop_rotation_animation",
"scope_id": "spinner",
"typed": {
"type": "animator_stop",
"animator_id": "rotation_animator"
}
},
{
"log_id": "stop_tint_color_animation",
"scope_id": "spinner",
"typed": {
"type": "animator_stop",
"animator_id": "tint_color_animator"
}
}
]
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,151 @@
{
"templates": {
"button": {
"type": "text",
"paddings": {
"left": 16,
"top": 16,
"right": 16,
"bottom": 16
},
"margins": {
"left": 24,
"right": 24
},
"border": {
"corner_radius": 8
},
"background": [
{
"type": "solid",
"color": "#0E000000"
}
],
"font_size": 14,
"font_weight": "medium",
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000"
},
"in_out_transition_demo_block": {
"type": "text",
"height": {
"type": "fixed",
"value": 88
},
"margins": {
"left": 24,
"right": 24,
"bottom": 8
},
"border": {
"corner_radius": 16
},
"background": [
{
"type": "solid",
"color": "#3F28C3"
}
],
"text_color": "#ffffff",
"font_size": 14,
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center"
}
},
"card": {
"variables": [
{
"name": "change_state",
"type": "string",
"value": "none"
},
{
"name": "set_state",
"type": "string",
"value": "visible"
}
],
"variable_triggers": [
{
"condition": "@{change_state == 'set' && set_state == 'visible'}",
"mode": "on_variable",
"actions": [
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=change_state&value=none"
},
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=set_state&value=invisible"
}
]
},
{
"condition": "@{change_state == 'set' && set_state == 'invisible'}",
"mode": "on_variable",
"actions": [
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=change_state&value=none"
},
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=set_state&value=visible"
}
]
}
],
"log_id": "sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"margins": {
"top": 24,
"bottom": 24
},
"items": [
{
"type": "in_out_transition_demo_block",
"id": "set_in_out",
"text": "Animated item",
"visibility": "@{set_state}",
"transition_out": {
"type": "set",
"items": [
{
"type": "fade",
"duration": 1000
},
{
"type": "scale",
"duration": 1000
}
]
},
"transition_in": {
"type": "slide",
"edge": "right",
"duration": 1000
}
},
{
"type": "button",
"alignment_horizontal": "center",
"text": "Run",
"actions": [
{
"log_id": "set_state",
"url": "div-action://set_variable?name=change_state&value=set"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,228 @@
{
"templates": {
"image_block": {
"type": "image",
"image_url": "https://yastatic.net/s3/home/divkit/samples/slide_04.jpeg",
"border": {
"corner_radius": 18
}
},
"button": {
"type": "text",
"width": {
"type": "match_parent"
},
"height": {
"type": "wrap_content"
},
"paddings": {
"left": 16,
"top": 16,
"right": 16,
"bottom": 16
},
"margins": {
"left": 24,
"right": 24
},
"border": {
"corner_radius": 8
},
"background": [
{
"type": "solid",
"color": "#0E000000"
}
],
"font_size": 14,
"font_weight": "medium",
"text_alignment_vertical": "center",
"text_alignment_horizontal": "center",
"text_color": "#000000"
}
},
"card": {
"log_id": "sample_card",
"variables": [
{
"name": "change_state",
"type": "boolean",
"value": false
},
{
"name": "state",
"type": "boolean",
"value": false
}
],
"variable_triggers": [
{
"condition": "@{change_state && state}",
"mode": "on_variable",
"actions": [
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=change_state&value=false"
},
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=state&value=false"
},
{
"log_id": "change state",
"url": "div-action://set_state?state_id=0/transition_change_demo_state/state1"
}
]
},
{
"condition": "@{change_state && !state}",
"mode": "on_variable",
"actions": [
{
"log_id": "update change_state flag",
"url": "div-action://set_variable?name=change_state&value=false"
},
{
"log_id": "update state variable",
"url": "div-action://set_variable?name=state&value=true"
},
{
"log_id": "change state",
"url": "div-action://set_state?state_id=0/transition_change_demo_state/state2"
}
]
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"margins": {
"top": 24,
"bottom": 24
},
"items": [
{
"type": "container",
"orientation": "overlap",
"margins": {
"left": 16,
"right": 16,
"bottom": 16
},
"items": [
{
"type": "container",
"background": [
{
"type": "solid",
"color": "#CDE3EF"
}
],
"width": {
"type": "match_parent"
},
"height": {
"type": "match_parent"
},
"border": {
"corner_radius": 18
}
},
{
"type": "text",
"text": "Hidden text",
"text_alignment_horizontal": "center",
"font_size": 24,
"margins": {
"top": 30
}
},
{
"type": "text",
"text": "That was revealed",
"alignment_horizontal": "end",
"alignment_vertical": "bottom",
"text_alignment_horizontal": "center",
"font_size": 24,
"margins": {
"bottom": 30,
"end": 30
},
"width": {
"type": "fixed",
"value": 95
}
},
{
"type": "state",
"width": {
"type": "match_parent"
},
"height": {
"type": "fixed",
"value": 250
},
"id": "transition_change_demo_state",
"states": [
{
"state_id": "state1",
"div": {
"type": "image_block",
"id": "image",
"width": {
"type": "match_parent"
},
"height": {
"type": "match_parent"
},
"transition_change": {
"type": "change_bounds",
"duration": 1000
}
}
},
{
"state_id": "state2",
"div": {
"type": "image_block",
"id": "image",
"alignment_horizontal": "left",
"alignment_vertical": "bottom",
"width": {
"type": "fixed",
"value": 150
},
"height": {
"type": "fixed",
"value": 150
},
"transition_change": {
"type": "change_bounds",
"duration": 1000
}
}
}
]
}
]
},
{
"type": "button",
"alignment_horizontal": "center",
"text": "Run",
"actions": [
{
"log_id": "set_state1",
"url": "div-action://set_variable?name=change_state&value=true"
}
]
}
]
}
}
]
}
}
@@ -0,0 +1,174 @@
{
"templates": {
"cardContainer": {
"type": "container",
"border": {
"corner_radius": 16,
"stroke": {
"color": "#aaaaaa",
"width": 1
}
},
"margins": {
"bottom": 6
},
"width": {
"type": "wrap_content"
},
"orientation": "vertical",
"paddings": {
"top": 12,
"bottom": 12,
"left": 12,
"right": 12
}
}
},
"card": {
"log_id": "prototypes",
"variables": [
{
"name": "data",
"type": "array",
"value": [
{
"style": "only_text",
"title": "First text card"
},
{
"style": "only_text",
"title": "Second text card"
},
{
"style": "with_image",
"title": "Card with image",
"image_url": "https://yastatic.net/s3/home/divkit/wombat.jpg"
},
{
"style": "add_button"
}
]
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "gallery",
"orientation": "vertical",
"margins": {
"top": 10,
"start": 10,
"end": 10,
"bottom": 10
},
"item_builder": {
"type": "prototype",
"data": "@{data}",
"data_element_name": "item",
"prototypes": [
{
"selector": "@{getStringFromDict(item, 'style') == 'only_text'}",
"div": {
"type": "cardContainer",
"items": [
{
"type": "text",
"text": "@{getStringFromDict(item, 'title')}",
"font_size": 16,
"margins": {
"bottom": 4
},
"width": {
"type": "wrap_content"
}
}
],
"width": {
"type": "wrap_content"
}
}
},
{
"selector": "@{getStringFromDict(item, 'style') == 'with_image'}",
"div": {
"type": "cardContainer",
"items": [
{
"type": "image",
"image_url": "@{getStringFromDict(item, 'image_url')}",
"width": {
"type": "fixed",
"value": 150
},
"height": {
"type": "fixed",
"value": 150
}
},
{
"type": "text",
"text": "@{getStringFromDict(item, 'title')}",
"text_alignment_horizontal": "center",
"font_size": 16,
"margins": {
"left": 4
}
}
],
"width": {
"type": "wrap_content"
}
}
},
{
"selector": "@{getStringFromDict(item, 'style') == 'add_button'}",
"div": {
"type": "cardContainer",
"background": [
{
"type": "solid",
"color": "#3000ffff"
}
],
"items": [
{
"type": "text",
"text": "Add item",
"font_size": 16,
"width": {
"type": "wrap_content"
},
"paddings": {
"start": 13,
"end": 13,
"top": 13,
"bottom": 13
},
"actions": [
{
"log_id": "add_card",
"typed": {
"type": "array_insert_value",
"variable_name": "data",
"value": {
"type": "dict",
"value": {
"style": "only_text",
"title": "Additional card"
}
}
}
}
]
}
]
}
}
]
}
}
}
]
}
}
@@ -0,0 +1,215 @@
{
"templates": {
"block": {
"type": "container",
"width": {
"type": "fixed",
"value": 100
},
"border": {
"corner_radius": 50
},
"height": {
"type": "fixed",
"value": 100
},
"background": [
{
"type": "solid",
"$color": "background_color"
}
]
},
"color_input": {
"type": "input",
"font_size": 16,
"margins": {
"top": 10
},
"text_alignment_horizontal": "center",
"width": {
"type": "fixed",
"value": 150
},
"border": {
"corner_radius": 4,
"stroke": {
"color": "#000"
}
}
}
},
"card": {
"log_id": "generated_div",
"variables": [
{
"name": "input_1",
"type": "string",
"value": "00ff00"
},
{
"name": "input_2",
"type": "string",
"value": "0000ff"
},
{
"name": "input_3",
"type": "string",
"value": "ff0000"
},
{
"name": "color_1",
"type": "color",
"value": "#5500ff00"
},
{
"name": "color_2",
"type": "color",
"value": "#550000ff"
},
{
"name": "color_3",
"type": "color",
"value": "#55ff0000"
}
],
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"width": {
"type": "match_parent"
},
"height": {
"type": "match_parent"
},
"content_alignment_horizontal": "center",
"content_alignment_vertical": "center",
"items": [
{
"margins": {
"left": 10,
"right": 10
},
"type": "container",
"orientation": "overlap",
"width": {
"type": "fixed",
"value": 150
},
"height": {
"type": "fixed",
"value": 150
},
"items": [
{
"type": "block",
"background_color": "@{color_1}",
"alignment_horizontal": "center"
},
{
"type": "block",
"background_color": "@{color_2}",
"alignment_horizontal": "end",
"alignment_vertical": "bottom"
},
{
"type": "block",
"background_color": "@{color_3}",
"alignment_horizontal": "start",
"alignment_vertical": "bottom"
}
]
},
{
"type": "color_input",
"text_variable": "input_1",
"margins": {
"top": 40
}
},
{
"type": "color_input",
"text_variable": "input_2"
},
{
"type": "color_input",
"text_variable": "input_3"
},
{
"type": "text",
"text": "Mix!",
"text_alignment_horizontal": "center",
"font_size": 20,
"margins": {
"top": 10
},
"background": [
{
"type": "solid",
"color": "#600000ff"
}
],
"width": {
"type": "fixed",
"value": 150
},
"border": {
"corner_radius": 4
},
"functions": [
{
"name": "reduce_alpha",
"arguments": [
{
"name": "init_color",
"type": "string"
}
],
"return_type": "color",
"body": "@{toColor('#55@{init_color}')}"
}
],
"actions": [
{
"log_id": "set_color_1",
"typed":{
"type": "set_variable",
"variable_name": "color_1",
"value": {
"type": "color",
"value": "@{reduce_alpha(input_1)}"
}
}
},
{
"log_id": "set_color_2",
"typed":{
"type": "set_variable",
"variable_name": "color_2",
"value": {
"type": "color",
"value": "@{reduce_alpha(input_2)}"
}
}
},
{
"log_id": "set_color_3",
"typed":{
"type": "set_variable",
"variable_name": "color_3",
"value": {
"type": "color",
"value": "@{reduce_alpha(input_3)}"
}
}
}
]
}
]
}
}
]
}
}