Added navigation menu UI to wikivoyage

This commit is contained in:
Alexey Kulish 2018-04-16 22:17:45 +03:00
parent 7c08b6b711
commit 0995048527
7 changed files with 427 additions and 33 deletions

View file

@ -19,6 +19,24 @@ body {
font-family: sans-serif;
}
.nav-bar {
background-color: #f2f2f2;
font-size: 1.1em;
font-family: sans-serif;
color: #727272;
word-wrap: break-word;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
font-weight: normal;
line-height: 1.6em;
}
.nav-bar-current {
color: #2f7af5;
}
.title-image {
width: 100%;
height: 30%;

View file

@ -11,7 +11,6 @@
android:id="@+id/upper_row_divider"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginBottom="@dimen/bottom_sheet_divider_margin_bottom"
android:background="?attr/wikivoyage_card_divider_color" />
<LinearLayout
@ -43,15 +42,9 @@
android:paddingRight="@dimen/list_content_padding"
android:background="?attr/selectableItemBackground"
android:scaleType="center"
android:visibility="gone"
tools:src="@drawable/ic_action_arrow_up" />
</LinearLayout>
<View
android:id="@+id/bottom_row_divider"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="@dimen/bottom_sheet_divider_margin_top"
android:background="?attr/wikivoyage_card_divider_color" />
</LinearLayout>

View file

@ -14,7 +14,7 @@ import net.osmand.plus.base.BottomSheetDialogFragment;
public class WikivoyageShowPicturesDialogFragment extends BottomSheetDialogFragment {
public static final String TAG = WikivoyageShowPicturesDialogFragment.class.getSimpleName();
public static final int SHOW_PICTURES_CHANGED = 1;
public static final int SHOW_PICTURES_CHANGED_REQUEST_CODE = 1;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
@ -60,7 +60,7 @@ public class WikivoyageShowPicturesDialogFragment extends BottomSheetDialogFrag
private void sendResult() {
Fragment fragment = getTargetFragment();
if (fragment != null) {
fragment.onActivityResult(getTargetRequestCode(), SHOW_PICTURES_CHANGED, null);
fragment.onActivityResult(getTargetRequestCode(), SHOW_PICTURES_CHANGED_REQUEST_CODE, null);
}
}
}

View file

@ -28,10 +28,10 @@ public class WikivoyageArticleContentsFragment extends MenuBottomSheetDialogFrag
public static final String TAG = "WikivoyageArticleContentsFragment";
public static final String CONTENTS_JSON_KEY = "contents_json";
public static final String CONTENTS_LINK_KEY = "contents_link";
public static final String CONTENTS_TITLE_KEY = "title";
public static final String CONTENT_ITEM_LINK_KEY = "content_item_link";
public static final String CONTENT_ITEM_TITLE_KEY = "content_item_title";
public static final int REQUEST_LINK_CODE = 0;
public static final int SHOW_CONTENT_ITEM_REQUEST_CODE = 0;
private ExpandableListView expListView;
@ -98,11 +98,11 @@ public class WikivoyageArticleContentsFragment extends MenuBottomSheetDialogFrag
private void sendResults(String link, String name) {
Intent intent = new Intent();
intent.putExtra(CONTENTS_LINK_KEY, link);
intent.putExtra(CONTENTS_TITLE_KEY, name);
intent.putExtra(CONTENT_ITEM_LINK_KEY, link);
intent.putExtra(CONTENT_ITEM_TITLE_KEY, name);
Fragment fragment = getTargetFragment();
if (fragment != null) {
fragment.onActivityResult(getTargetRequestCode(), REQUEST_LINK_CODE, intent);
fragment.onActivityResult(getTargetRequestCode(), SHOW_CONTENT_ITEM_REQUEST_CODE, intent);
}
}
@ -168,11 +168,6 @@ public class WikivoyageArticleContentsFragment extends MenuBottomSheetDialogFrag
convertView.findViewById(R.id.upper_row_divider).setVisibility(View.GONE);
txtListChild.setTypeface(null);
if (childPosition == contentItem.getSubItems().get(groupPosition).getSubItems().size() - 1) {
convertView.findViewById(R.id.bottom_row_divider).setVisibility(View.VISIBLE);
} else {
convertView.findViewById(R.id.bottom_row_divider).setVisibility(View.GONE);
}
return convertView;
}
@ -223,11 +218,6 @@ public class WikivoyageArticleContentsFragment extends MenuBottomSheetDialogFrag
}
}
});
if (isExpanded) {
convertView.findViewById(R.id.bottom_row_divider).setVisibility(View.GONE);
} else {
convertView.findViewById(R.id.bottom_row_divider).setVisibility(View.VISIBLE);
}
return convertView;
}

View file

@ -18,9 +18,11 @@ import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;
import net.osmand.AndroidUtils;
import net.osmand.IndexConstants;
@ -56,6 +58,11 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n" +
"<meta http-equiv=\"cleartype\" content=\"on\" />\n" +
"<link href=\"article_style.css\" type=\"text/css\" rel=\"stylesheet\"/>\n" +
"<script type=\"text/javascript\">" +
"function showNavigation() {" +
" Android.showNavigation();" +
"}" +
"</script>" +
"</head><body>\n";
private static final String FOOTER_INNER = "<script>var coll = document.getElementsByTagName(\"H2\");" +
"var i;" +
@ -108,7 +115,7 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
private TextView articleToolbarText;
@SuppressLint("SetJavaScriptEnabled")
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
@ -160,7 +167,7 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
WikivoyageArticleContentsFragment fragment = new WikivoyageArticleContentsFragment();
fragment.setUsedOnMap(false);
fragment.setArguments(args);
fragment.setTargetFragment(WikivoyageArticleDialogFragment.this, WikivoyageArticleContentsFragment.REQUEST_LINK_CODE);
fragment.setTargetFragment(WikivoyageArticleDialogFragment.this, WikivoyageArticleContentsFragment.SHOW_CONTENT_ITEM_REQUEST_CODE);
fragment.show(fm, WikivoyageArticleContentsFragment.TAG);
}
});
@ -198,6 +205,7 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
WebSettings webSettings = contentWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
updateWebSettings();
contentWebView.addJavascriptInterface(new WikivoyageArticleWebAppInterface(), "Android");
contentWebView.setWebViewClient(new WikivoyageWebViewClient(getActivity(), getFragmentManager()));
return mainView;
@ -217,11 +225,11 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == WikivoyageArticleContentsFragment.REQUEST_LINK_CODE) {
String link = data.getStringExtra(WikivoyageArticleContentsFragment.CONTENTS_LINK_KEY);
String title = data.getStringExtra(WikivoyageArticleContentsFragment.CONTENTS_TITLE_KEY);
if (requestCode == WikivoyageArticleContentsFragment.SHOW_CONTENT_ITEM_REQUEST_CODE) {
String link = data.getStringExtra(WikivoyageArticleContentsFragment.CONTENT_ITEM_LINK_KEY);
String title = data.getStringExtra(WikivoyageArticleContentsFragment.CONTENT_ITEM_TITLE_KEY);
moveToAnchor(link, title);
} else if (requestCode == WikivoyageShowPicturesDialogFragment.SHOW_PICTURES_CHANGED) {
} else if (requestCode == WikivoyageShowPicturesDialogFragment.SHOW_PICTURES_CHANGED_REQUEST_CODE) {
updateWebSettings();
populateArticle();
}
@ -236,7 +244,7 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
FragmentManager fm = getFragmentManager();
if (activity != null && fm != null) {
WikivoyageShowPicturesDialogFragment fragment = new WikivoyageShowPicturesDialogFragment();
fragment.setTargetFragment(this, WikivoyageShowPicturesDialogFragment.SHOW_PICTURES_CHANGED);
fragment.setTargetFragment(this, WikivoyageShowPicturesDialogFragment.SHOW_PICTURES_CHANGED_REQUEST_CODE);
fragment.show(fm, WikivoyageShowPicturesDialogFragment.TAG);
settings.WIKIVOYAGE_SHOW_IMAGES_ASKED.set(true);
}
@ -352,6 +360,25 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
StringBuilder sb = new StringBuilder(HEADER_INNER);
String imageTitle = article.getImageTitle();
if (!TextUtils.isEmpty(article.getAggregatedPartOf())) {
String[] aggregatedPartOfArrayOrig = article.getAggregatedPartOf().split(",");
if (aggregatedPartOfArrayOrig.length > 0) {
String current = aggregatedPartOfArrayOrig[0];
sb.append("<div class=\"nav-bar\" onClick=\"showNavigation()\">");
if (aggregatedPartOfArrayOrig.length > 1) {
String[] aggregatedPartOfArray = new String[aggregatedPartOfArrayOrig.length - 1];
for (int i = 0; i < aggregatedPartOfArrayOrig.length - 1; i++) {
aggregatedPartOfArray[i] = aggregatedPartOfArrayOrig[aggregatedPartOfArrayOrig.length - i - 1];
}
String navBarString = TextUtils.join("", aggregatedPartOfArray);
sb.append(navBarString);
}
if (!TextUtils.isEmpty(current)) {
sb.append(" • <span class=\"nav-bar-current\">").append(current).append("</span>");
}
sb.append("</div>");
}
}
if (!TextUtils.isEmpty(imageTitle)) {
String url = TravelArticle.getImageUrl(imageTitle, false);
sb.append("<div class=\"title-image\" style=\"background-image: url(").append(url).append(")\"></div>");
@ -416,4 +443,16 @@ public class WikivoyageArticleDialogFragment extends WikivoyageBaseDialogFragmen
return false;
}
}
private class WikivoyageArticleWebAppInterface {
@JavascriptInterface
public void showNavigation() {
FragmentManager fm = getFragmentManager();
if (article == null || fm == null) {
return;
}
WikivoyageArticleNavigationFragment.showInstance(fm, cityId, selectedLang);
}
}
}

View file

@ -0,0 +1,275 @@
package net.osmand.plus.wikivoyage.article;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentManager;
import android.support.v4.content.ContextCompat;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ExpandableListView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import net.osmand.plus.R;
import net.osmand.plus.activities.OsmandBaseExpandableListAdapter;
import net.osmand.plus.base.MenuBottomSheetDialogFragment;
import net.osmand.plus.base.bottomsheetmenu.SimpleBottomSheetItem;
import net.osmand.plus.base.bottomsheetmenu.simpleitems.TitleItem;
import net.osmand.plus.wikivoyage.data.TravelArticle;
import net.osmand.plus.wikivoyage.data.WikivoyageSearchResult;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.List;
public class WikivoyageArticleNavigationFragment extends MenuBottomSheetDialogFragment {
public static final String TAG = WikivoyageArticleNavigationFragment.class.getSimpleName();
private static final String CITY_ID_KEY = "city_id_key";
private static final String SELECTED_LANG_KEY = "selected_lang_key";
public static final int OPEN_ARTICLE_REQUEST_CODE = 2;
private static final long UNDEFINED = -1;
private long cityId = UNDEFINED;
private String selectedLang;
private List<String> parentsList;
private ExpandableListView expListView;
@Override
public void createMenuItems(Bundle savedInstanceState) {
if (savedInstanceState != null) {
selectedLang = savedInstanceState.getString(SELECTED_LANG_KEY);
cityId = savedInstanceState.getLong(CITY_ID_KEY);
} else {
Bundle args = getArguments();
if (args != null) {
selectedLang = args.getString(SELECTED_LANG_KEY);
cityId = args.getLong(CITY_ID_KEY);
}
}
if (cityId == UNDEFINED || TextUtils.isEmpty(selectedLang)) {
return;
}
TravelArticle article = getMyApplication().getTravelDbHelper().getArticle(cityId, selectedLang);
if (article == null) {
return;
}
parentsList = new ArrayList<>(Arrays.asList(article.getAggregatedPartOf().split(",")));
LinkedHashMap<String, List<WikivoyageSearchResult>> navigationMap = getMyApplication().getTravelDbHelper().getNavigationMap(article);
items.add(new TitleItem(getString(R.string.shared_string_navigation)));
expListView = new ExpandableListView(getContext());
ExpandableListAdapter listAdapter = new ExpandableListAdapter(getContext(), navigationMap);
expListView.setAdapter(listAdapter);
Drawable transparent = ContextCompat.getDrawable(getContext(), R.color.color_transparent);
expListView.setDivider(transparent);
expListView.setGroupIndicator(transparent);
expListView.setSelector(transparent);
expListView.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT)
);
expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
dismiss();
return true;
}
});
expListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
dismiss();
return true;
}
});
LinearLayout container = new LinearLayout(getContext());
container.addView(expListView);
items.add(new SimpleBottomSheetItem.Builder().setCustomView(container).create());
if (listAdapter.getGroupCount() > 0) {
expListView.expandGroup(listAdapter.getGroupCount() - 1);
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putLong(CITY_ID_KEY, cityId);
outState.putString(SELECTED_LANG_KEY, selectedLang);
}
@Override
protected boolean useScrollableItemsContainer() {
return false;
}
public static boolean showInstance(@NonNull FragmentManager fm,
long cityId,
@Nullable String selectedLang) {
try {
Bundle args = new Bundle();
args.putLong(CITY_ID_KEY, cityId);
args.putString(SELECTED_LANG_KEY, selectedLang);
WikivoyageArticleNavigationFragment fragment = new WikivoyageArticleNavigationFragment();
fragment.setArguments(args);
fragment.show(fm, TAG);
return true;
} catch (RuntimeException e) {
return false;
}
}
class ExpandableListAdapter extends OsmandBaseExpandableListAdapter {
private Context context;
private LinkedHashMap<String, List<WikivoyageSearchResult>> navigationMap;
private List<String> headers;
private Drawable itemGroupIcon;
private Drawable itemChildIcon;
ExpandableListAdapter(Context context, LinkedHashMap<String, List<WikivoyageSearchResult>> navigationMap) {
this.context = context;
this.navigationMap = navigationMap;
headers = new ArrayList<>(navigationMap.keySet());
itemGroupIcon = getIcon(R.drawable.ic_action_list_header, nightMode
? R.color.wikivoyage_contents_parent_icon_dark : R.color.wikivoyage_contents_parent_icon_light);
itemChildIcon = getIcon(R.drawable.ic_action_list_bullet, nightMode
? R.color.wikivoyage_contents_child_icon_dark
: R.color.wikivoyage_contents_child_icon_light);
}
private List<WikivoyageSearchResult> getArticleItems(int groupPosition) {
return navigationMap.get(headers.get(groupPosition));
}
private WikivoyageSearchResult getArticleItem(int groupPosition, int childPosititon) {
return navigationMap.get(headers.get(groupPosition)).get(childPosititon);
}
@Override
public Object getChild(int groupPosition, int childPosititon) {
return getArticleItem(groupPosition, childPosititon).getArticleTitles().get(0);
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public int getChildrenCount(int groupPosition) {
return getArticleItems(groupPosition).size();
}
@Override
public Object getGroup(int groupPosition) {
return headers.get(groupPosition);
}
@Override
public int getGroupCount() {
return headers.size();
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
WikivoyageSearchResult articleItem = getArticleItem(groupPosition, childPosition);
String childText = articleItem.getArticleTitles().get(0);
boolean selected = cityId == articleItem.getCityId() || parentsList.contains(childText);
if (convertView == null) {
convertView = LayoutInflater.from(context)
.inflate(R.layout.wikivoyage_contents_list_item, parent, false);
}
TextView txtListChild = (TextView) convertView.findViewById(R.id.item_label);
txtListChild.setText(childText);
if (selected) {
txtListChild.setTextColor(ContextCompat.getColor(context, nightMode
? R.color.wikivoyage_contents_parent_icon_dark : R.color.wikivoyage_contents_parent_icon_light));
} else {
txtListChild.setTextColor(ContextCompat.getColor(context, nightMode
? R.color.secondary_text_dark : R.color.secondary_text_light));
}
txtListChild.setCompoundDrawablesWithIntrinsicBounds(itemChildIcon, null, null, null);
convertView.findViewById(R.id.upper_row_divider).setVisibility(View.GONE);
txtListChild.setTypeface(null);
return convertView;
}
@Override
public View getGroupView(final int groupPosition, final boolean isExpanded,
View convertView, ViewGroup parent) {
String headerTitle = (String) getGroup(groupPosition);
boolean selected = parentsList.contains(headerTitle);
if (convertView == null) {
convertView = LayoutInflater.from(context)
.inflate(R.layout.wikivoyage_contents_list_item, parent, false);
}
TextView lblListHeader = (TextView) convertView.findViewById(R.id.item_label);
lblListHeader.setText(headerTitle);
if (selected) {
lblListHeader.setTextColor(ContextCompat.getColor(context, nightMode
? R.color.wikivoyage_contents_parent_icon_dark : R.color.wikivoyage_contents_parent_icon_light));
} else {
lblListHeader.setTextColor(ContextCompat.getColor(context, nightMode
? R.color.secondary_text_dark : R.color.secondary_text_light));
}
lblListHeader.setCompoundDrawablesWithIntrinsicBounds(itemGroupIcon, null, null, null);
adjustIndicator(getMyApplication(), groupPosition, isExpanded, convertView, !nightMode);
ImageView indicator = (ImageView) convertView.findViewById(R.id.explist_indicator);
indicator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(isExpanded){
expListView.collapseGroup(groupPosition);
} else {
expListView.expandGroup(groupPosition);
}
}
});
return convertView;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
}

View file

@ -2,6 +2,7 @@ package net.osmand.plus.wikivoyage.data;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.text.TextUtils;
import net.osmand.Collator;
import net.osmand.CollatorStringMatcher;
@ -25,7 +26,10 @@ import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import gnu.trove.map.hash.TLongObjectHashMap;
@ -239,6 +243,81 @@ public class TravelDbHelper {
return wikivoyage.valueCollection();
}
@NonNull
public LinkedHashMap<String, List<WikivoyageSearchResult>> getNavigationMap(final TravelArticle article) {
String lang = article.getLang();
String title = article.getTitle();
if (TextUtils.isEmpty(lang) || TextUtils.isEmpty(title)) {
return new LinkedHashMap<>();
}
String[] parts = null;
if (!TextUtils.isEmpty(article.getAggregatedPartOf())) {
String[] originalParts = article.getAggregatedPartOf().split(",");
if (originalParts.length > 1) {
parts = new String[originalParts.length];
for (int i = 0; i < originalParts.length; i++) {
parts[i] = originalParts[originalParts.length - i - 1];
}
} else {
parts = originalParts;
}
}
Map<String, List<WikivoyageSearchResult>> navMap = new HashMap<>();
SQLiteConnection conn = openConnection();
if (conn != null) {
List<String> params = new ArrayList<>();
StringBuilder query = new StringBuilder("SELECT a.city_id, a.title, a.lang, a.is_part_of " +
"FROM wikivoyage_articles a WHERE is_part_of = ? and lang = ? ");
params.add(title);
params.add(lang);
if (parts != null && parts.length > 0) {
for (String part : parts) {
query.append("UNION SELECT a.city_id, a.title, a.lang, a.is_part_of " +
"FROM wikivoyage_articles a WHERE is_part_of = ? and lang = ? ");
params.add(part);
params.add(lang);
}
}
SQLiteCursor cursor = conn.rawQuery(query.toString(), params.toArray(new String[params.size()]));
if (cursor.moveToFirst()) {
do {
WikivoyageSearchResult rs = new WikivoyageSearchResult();
rs.cityId = cursor.getLong(0);
rs.articleTitles.add(cursor.getString(1));
rs.langs.add(cursor.getString(2));
rs.isPartOf = cursor.getString(3);
List<WikivoyageSearchResult> l = navMap.get(rs.isPartOf);
if (l == null) {
l = new ArrayList<>();
navMap.put(rs.isPartOf, l);
}
l.add(rs);
} while (cursor.moveToNext());
}
cursor.close();
}
LinkedHashMap<String, List<WikivoyageSearchResult>> res = new LinkedHashMap<>();
if (navMap.keySet().size() > 1 && parts != null && parts.length > 0) {
for (String part : parts) {
List<WikivoyageSearchResult> partsList = navMap.get(part);
if (partsList != null) {
Collections.sort(partsList, new Comparator<WikivoyageSearchResult>() {
@Override
public int compare(WikivoyageSearchResult o1, WikivoyageSearchResult o2) {
return collator.compare(o1.articleTitles.get(0), o2.articleTitles.get(0));
}
});
res.put(part, partsList);
}
}
} else {
res.putAll(navMap);
}
return res;
}
@Nullable
public TravelArticle getArticle(long cityId, String lang) {
TravelArticle res = null;