2015-12-13 22:21:02 +01:00
|
|
|
@model Orchard.MediaLibrary.ViewModels.ImportMediaViewModel
|
|
|
|
|
|
|
|
|
|
@using System.Text
|
|
|
|
|
@using Orchard.ContentManagement
|
|
|
|
|
@using Orchard.MediaLibrary.Models
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
@{
|
|
|
|
|
Script.Require("jQuery").AtFoot();
|
2015-12-13 23:46:19 +01:00
|
|
|
Script.Require("Knockout").AtFoot();
|
2015-12-13 22:21:02 +01:00
|
|
|
|
|
|
|
|
Style.Include("orchard-mediaproviders-admin.css");
|
|
|
|
|
Style.Include("orchard-websearch-admin.css");
|
|
|
|
|
Style.Require("FontAwesome");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@Display.Metas()
|
|
|
|
|
@Display.HeadScripts()
|
|
|
|
|
@Display.HeadLinks()
|
|
|
|
|
@Display.StyleSheetLinks()
|
|
|
|
|
|
|
|
|
|
@{
|
|
|
|
|
var apiKey = WorkContext.CurrentSite.As<WebSearchSettingsPart>().ApiKey;
|
|
|
|
|
}
|
|
|
|
|
</head>
|
|
|
|
|
<body >
|
|
|
|
|
<div id="websearch-main">
|
|
|
|
|
<!-- Register for an API account on https://datamarket.azure.com/dataset/5BA839F1-12CE-4CCE-BF57-A49D98D29A44 -->
|
|
|
|
|
|
|
|
|
|
@if (String.IsNullOrWhiteSpace(apiKey)) {
|
|
|
|
|
<div id="message-api">
|
|
|
|
|
@T("You need to define an API Key in the Media settings before being able to use this feature.")
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
<form data-bind="submit: doSearch">
|
|
|
|
|
<div class="query-container">
|
|
|
|
|
<div id="icon">
|
2016-02-22 15:29:33 -05:00
|
|
|
<button type="submit" class="fa fa-search"></button>
|
2015-12-13 22:21:02 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="query">
|
|
|
|
|
<input type="text" autofocus placeholder="@T("search")"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<ul id="websearch-results" data-bind="foreach: results">
|
|
|
|
|
<li data-bind="style: { backgroundImage: 'url(' + data.Thumbnail.MediaUrl + ')' }, css: { 'has-focus': hasFocus(), 'selected': selected() }">
|
|
|
|
|
<div class="overlay">
|
|
|
|
|
<p class="filename" data-bind="text: getFilename()"></p>
|
|
|
|
|
<p class="dimensions" data-bind="text: data.Width + ' x ' + data.Height + ' - ' + Math.round(data.FileSize/1024) + ' KB'"></p>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="websearch-properties">
|
|
|
|
|
<article data-bind="with: focus">
|
|
|
|
|
<h1>@T("PROPERTIES")</h1>
|
|
|
|
|
<div class="thumbnail" data-bind="style: { backgroundImage: 'url(' + data.Thumbnail.MediaUrl + ')' }"></div>
|
|
|
|
|
<div class="dimensions"><em>@T("Dimensions:")</em> <span data-bind="text: data.Width + ' x ' + data.Height"></span></div>
|
|
|
|
|
<div class="filename"><em>@T("Filename:")</em> <span data-bind="text: getFilename()"></span></div>
|
|
|
|
|
<div class="filesize"><em>@T("Size:")</em> <span data-bind="text: Math.round(data.FileSize/1024) + ' KB'"></span></div>
|
|
|
|
|
<div class="actions">
|
|
|
|
|
<a class="source button" data-bind="attr: {href: data.SourceUrl}" target="_blank">@T("Page")</a>
|
|
|
|
|
<a class="media button" data-bind="attr: {href: data.MediaUrl}" target="_blank">@T("Open")</a>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<div id="websearch-properties-selection" data-bind="visible: selection().length">
|
|
|
|
|
<h1>@T("SELECTION")</h1>
|
|
|
|
|
<button id="button-import">IMPORT</button>
|
|
|
|
|
<ul data-bind="foreach: selection">
|
|
|
|
|
<li>
|
|
|
|
|
<div class="selection" data-bind="click: $parent.focus, style: { backgroundImage: 'url(' + data.Thumbnail.MediaUrl + ')' }">
|
|
|
|
|
<div class="selection-overlay">
|
|
|
|
|
<div class="selection-progress" data-bind="css: status()"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@Html.Hidden("antiforgerytoken", Html.AntiForgeryTokenValueOrchard())
|
|
|
|
|
@Html.Hidden("action", Url.Action("ImagePost"))
|
|
|
|
|
@Html.Hidden("folderPath", Model.FolderPath)
|
|
|
|
|
@Html.Hidden("type", Model.Type)
|
|
|
|
|
|
|
|
|
|
@using(Script.Foot()) {
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
//<![CDATA[
|
|
|
|
|
$(function () {
|
|
|
|
|
function SearchResult(data) {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// values
|
|
|
|
|
self.data = data;
|
|
|
|
|
self.hasFocus = ko.observable();
|
|
|
|
|
self.selected = ko.observable();
|
|
|
|
|
self.status = ko.observable('');
|
|
|
|
|
|
|
|
|
|
// operations
|
|
|
|
|
self.setData = function (value) {
|
|
|
|
|
self.data = value;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.getFilename = function() {
|
|
|
|
|
var value = self.data.MediaUrl;
|
|
|
|
|
return value.substr(value.lastIndexOf('/') + 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.kilobytes = function() {
|
|
|
|
|
return Math.round(self.data.FileSize / 1024);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function WebSearchViewModel() {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// values
|
|
|
|
|
self.selection = ko.observableArray([]);
|
|
|
|
|
self.focus = ko.observable();
|
|
|
|
|
self.results = ko.observableArray();
|
|
|
|
|
|
|
|
|
|
self.filename = function () {
|
|
|
|
|
return value.substr(value.lastIndexOf('/') + 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.doSearch = function () {
|
|
|
|
|
var query = $('#query > input').val();
|
|
|
|
|
var url = 'https://api.datamarket.azure.com/Bing/Search/Image?$format=json&Query=%27' + encodeURIComponent(query) + '%27';
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
type: "POST",
|
|
|
|
|
url: url,
|
|
|
|
|
headers: { "Authorization": "Basic @Convert.ToBase64String(Encoding.ASCII.GetBytes(":" + @apiKey))" }
|
|
|
|
|
}).done(function (msg) {
|
|
|
|
|
var results = msg.d.results;
|
|
|
|
|
self.clearSelection();
|
|
|
|
|
self.results([]);
|
|
|
|
|
for (var i = 0; i < results.length; i++) {
|
|
|
|
|
self.results.push(new SearchResult(results[i]));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.clearSelection = function () {
|
|
|
|
|
// unselect previous elements
|
|
|
|
|
self.selection().forEach(function (item) {
|
|
|
|
|
item.selected(false);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
self.selection([]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.focus.subscribe(function (oldValue) {
|
|
|
|
|
if (oldValue) {
|
|
|
|
|
oldValue.hasFocus(false);
|
|
|
|
|
}
|
|
|
|
|
}, this, "beforeChange");
|
|
|
|
|
|
|
|
|
|
self.focus.subscribe(function (newValue) {
|
|
|
|
|
if (newValue) {
|
|
|
|
|
newValue.hasFocus(true);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
self.toggleSelect = function (searchResult) {
|
|
|
|
|
var index = $.inArray(searchResult, self.selection());
|
|
|
|
|
if (index == -1) {
|
|
|
|
|
self.selection.push(searchResult);
|
|
|
|
|
searchResult.selected(true);
|
|
|
|
|
} else {
|
|
|
|
|
self.selection.remove(searchResult);
|
|
|
|
|
searchResult.selected(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
self.focus(searchResult);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
self.select = function (searchResult) {
|
|
|
|
|
var index = $.inArray(searchResult, self.selection());
|
|
|
|
|
if (index == -1) {
|
|
|
|
|
self.clearSelection();
|
|
|
|
|
self.selection([searchResult]);
|
|
|
|
|
searchResult.selected(true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
self.focus(searchResult);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var viewModel = new WebSearchViewModel();
|
|
|
|
|
ko.applyBindings(viewModel);
|
|
|
|
|
|
|
|
|
|
$("#websearch-results").on("click", "li", function (e) {
|
|
|
|
|
var searchResult = ko.dataFor(this);
|
|
|
|
|
if (e.ctrlKey) {
|
|
|
|
|
viewModel.toggleSelect(searchResult);
|
|
|
|
|
} else {
|
|
|
|
|
viewModel.select(searchResult);
|
|
|
|
|
}
|
|
|
|
|
}).on("contextmenu", "li", function(e) {
|
|
|
|
|
var searchResult = ko.dataFor(this);
|
|
|
|
|
viewModel.toggleSelect(searchResult);
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$("#button-import").on("click", function (e) {
|
|
|
|
|
var antiForgeryToken = $('[name=antiforgerytoken]').val();
|
|
|
|
|
var folderPath = $('[name=folderPath]').val();
|
|
|
|
|
var type = $('[name=type]').val();
|
|
|
|
|
var action = $('[name=action]').val();
|
|
|
|
|
|
|
|
|
|
viewModel.selection().forEach(function (item) {
|
|
|
|
|
var url = item.data.MediaUrl;
|
|
|
|
|
item.status('uploading');
|
|
|
|
|
$.post(action, {
|
|
|
|
|
folderPath: folderPath,
|
|
|
|
|
type: type,
|
|
|
|
|
url: url,
|
|
|
|
|
__RequestVerificationToken: antiForgeryToken,
|
|
|
|
|
})
|
|
|
|
|
.done(function (data) {
|
|
|
|
|
if (data.error) {
|
|
|
|
|
console.log(data);
|
|
|
|
|
item.status('failure');
|
|
|
|
|
} else {
|
|
|
|
|
item.status('success');
|
|
|
|
|
viewModel.selection.remove(item);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.fail(function (jqXhr, data) {
|
|
|
|
|
console.log('failed: ' + JSON.stringify(textStatus));
|
|
|
|
|
item.status('failure');
|
|
|
|
|
})
|
|
|
|
|
.always(function() {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
//]]>
|
|
|
|
|
</script>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@Display.FootScripts()
|
|
|
|
|
</body>
|
2013-04-18 10:59:15 -07:00
|
|
|
</html>
|
