add read more option to song's about section
				
					
				
			This commit is contained in:
		
							parent
							
								
									9325639b13
								
							
						
					
					
						commit
						f5288a0e1d
					
				
							
								
								
									
										10
									
								
								lyrics.go
									
									
									
									
									
								
							
							
						
						
									
										10
									
								
								lyrics.go
									
									
									
									
									
								
							|  | @ -4,6 +4,7 @@ import ( | ||||||
| 	"fmt" | 	"fmt" | ||||||
| 	"net/http" | 	"net/http" | ||||||
| 	"path" | 	"path" | ||||||
|  | 	"strings" | ||||||
| 	"text/template" | 	"text/template" | ||||||
| 
 | 
 | ||||||
| 	"github.com/PuerkitoBio/goquery" | 	"github.com/PuerkitoBio/goquery" | ||||||
|  | @ -16,7 +17,7 @@ type song struct { | ||||||
| 	Image   string | 	Image   string | ||||||
| 	Lyrics  string | 	Lyrics  string | ||||||
| 	Credits map[string]string | 	Credits map[string]string | ||||||
| 	About   string | 	About   [2]string | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| func (s *song) parseLyrics(doc *goquery.Document) { | func (s *song) parseLyrics(doc *goquery.Document) { | ||||||
|  | @ -52,7 +53,12 @@ func (s *song) parseCredits(doc *goquery.Document) { | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| func (s *song) parseAbout(doc *goquery.Document) { | func (s *song) parseAbout(doc *goquery.Document) { | ||||||
| 	s.About = doc.Find("[class*='SongDescription__Content']").Text() | 	s.About[0] = doc.Find("[class*='SongDescription__Content']").Text() | ||||||
|  | 	summary := strings.Split(s.About[0], "") | ||||||
|  | 
 | ||||||
|  | 	if len(summary) > 250 { | ||||||
|  | 		s.About[1] = strings.Join(summary[0:250], "") + "..." | ||||||
|  | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| func (s *song) parse(doc *goquery.Document) { | func (s *song) parse(doc *goquery.Document) { | ||||||
|  |  | ||||||
|  | @ -1,7 +1,18 @@ | ||||||
|  | const fullAbout = document.querySelector("#about #full_about") | ||||||
|  | const summary = document.querySelector("#about #summary") | ||||||
|  | 
 | ||||||
|  | function showAbout() { | ||||||
|  | 	summary.classList.toggle("hidden") | ||||||
|  | 	fullAbout.classList.toggle("hidden") | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | [fullAbout, summary].forEach(item => item.onclick = showAbout) | ||||||
|  | 
 | ||||||
| document.querySelectorAll("#lyrics a").forEach(item => { | document.querySelectorAll("#lyrics a").forEach(item => { | ||||||
| 	item.addEventListener("click", getAnnotation) | 	item.addEventListener("click", getAnnotation) | ||||||
| }) | }) | ||||||
| 
 | 
 | ||||||
| function getAnnotation(e) { | function getAnnotation(e) { | ||||||
| 	e.preventDefault() | 	e.preventDefault() | ||||||
|  | 	console.log(e.target.parentElement.getAttribute("href")) | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -99,7 +99,8 @@ a { | ||||||
| #container { | #container { | ||||||
| 	display: grid; | 	display: grid; | ||||||
| 	grid-template-columns: 1fr 3fr 1fr; | 	grid-template-columns: 1fr 3fr 1fr; | ||||||
| 	padding: 2rem; | 	padding: 5rem 10rem; | ||||||
|  | 	gap: 5rem; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| #credits { | #credits { | ||||||
|  | @ -141,4 +142,10 @@ a { | ||||||
| 	font-size: 1.4rem; | 	font-size: 1.4rem; | ||||||
| 	color: #171717; | 	color: #171717; | ||||||
| 	line-height: 1.8rem; | 	line-height: 1.8rem; | ||||||
|  | 	cursor: pointer; | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | .hidden { | ||||||
|  | 	display: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  |  | ||||||
|  | @ -4,7 +4,7 @@ | ||||||
| 		<title>{{.Artist}} - {{.Title}} lyrics</title> | 		<title>{{.Artist}} - {{.Title}} lyrics</title> | ||||||
| 		<meta charset="utf-8" /> | 		<meta charset="utf-8" /> | ||||||
| 		<link rel="stylesheet" type="text/css" href="/static/style.css" /> | 		<link rel="stylesheet" type="text/css" href="/static/style.css" /> | ||||||
| 		<script type="text/javascript" src="/static/script.js" async></script> | 		<script type="text/javascript" src="/static/script.js" defer></script> | ||||||
| 	</head> | 	</head> | ||||||
| 	<body> | 	<body> | ||||||
| 		<h1 id="nav">DUMB</h1> | 		<h1 id="nav">DUMB</h1> | ||||||
|  | @ -18,7 +18,8 @@ | ||||||
| 			<div id="info"> | 			<div id="info"> | ||||||
| 				<div id="about"> | 				<div id="about"> | ||||||
| 					<h1 id="title">About</h1> | 					<h1 id="title">About</h1> | ||||||
| 					<p>{{.About}}</p> | 					<p class="hidden" id="full_about">{{index .About 0}}</p> | ||||||
|  | 					<p id="summary">{{index .About 1}}</p> | ||||||
| 				</div> | 				</div> | ||||||
| 				<div id="credits"> | 				<div id="credits"> | ||||||
| 					<h1 id="title">Credits</h1> | 					<h1 id="title">Credits</h1> | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user